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

Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau: <svgwidth='300'height='200'style='background: #B71C1C'></svg> 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: <svgwidth='300'height='200'style='background: #B71C1C'><polygonpoints='150,30 105,165'stroke='#FFD600'/></svg> <svgwidth='300'height='200'style='background: #B71C1C'><polygonpoints='150,30 105,165 215,80'stroke='#FFD600'/></svg> <svgwidth='300'height='200'style='background: #B71C1C'><polygonpoints='150,30 105,165 215,80 85,80'stroke='#FFD600'/></svg> <svgwidth='300'height='200'style='background: #B71C1C'><polygonpoints='150,30 105,165 215,80 85,80 195,165'stroke='#FFD600'/></svg>


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

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

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:

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

Cuối cùng, mình sẽ thay đổi màu nền của ngôi sao:

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

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

Nguồn: viblo.asia

Bài viết liên quan

9 Mẹo lập trình Web “ẩn mình” giúp tiết kiệm hàng giờ đồng hồ

Hầu hết các lập trình viên (kể cả những người giỏi) đều tốn thời gian x

Can GPT-4o Generate Images? All You Need to Know about GPT-4o-image

OpenAI‘s GPT-4o, introduced on March 25, 2025, has revolutionized the way we create visual con

Khi nào nên dùng main, section, article, header, footer, và aside trong HTML5

HTML5 đã giới thiệu các thẻ ngữ nghĩa giúp cấu trúc nội dung web một cách có

So sánh Webhook và API: Khi nào nên sử dụng?

Trong lĩnh vực công nghệ thông tin và phát triển phần mềm, Webhook và API là hai th