Hướng dẫn vẽ ngôi sao bằng SVG

Hướng dẫn vẽ ngôi sao bằng SVG 8

Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau:

<svg width='300' height='200' style='background: #B71C1C'></svg>

Hướng dẫn vẽ ngôi sao bằng SVG 9

Tiếp theo, mình sẽ tạo hình ngôi sao bằng thẻ polygon, tại điểm bắt đầu là x = 150, y = 30:

<svg width='300' height='200' style='background: #B71C1C'>
   <polygon points='150,30 105,165' stroke='#FFD600'/>
</svg>

Hướng dẫn vẽ ngôi sao bằng SVG 10

<svg width='300' height='200' style='background: #B71C1C'>
   <polygon points='150,30 105,165 215,80' stroke='#FFD600'/>
</svg>

Hướng dẫn vẽ ngôi sao bằng SVG 11

<svg width='300' height='200' style='background: #B71C1C'>
   <polygon points='150,30 105,165 215,80 85,80' stroke='#FFD600'/>
</svg>

Hướng dẫn vẽ ngôi sao bằng SVG 12

<svg width='300' height='200' style='background: #B71C1C'>
   <polygon points='150,30 105,165 215,80 85,80 195,165' stroke='#FFD600'/>
</svg>

Hướng dẫn vẽ ngôi sao bằng SVG 13
Cuối cùng, mình sẽ thay đổi màu nền của ngôi sao:

<svg width='300' height='200' style='background: #B71C1C'>
   <polygon points='150,30 105,165 215,80 85,80 195,165' fill='#FFD600'/>
</svg>

Hướng dẫn vẽ ngôi sao bằng SVG 14
Bây giờ, bạn có thể tạo một hình ngôi sao bằng SVG thật dễ dàng!

Nguồn: www.naututs.com