Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to draw a star in HTML5 SVG?
SVG stands for Scalable Vector Graphics and is a language for describing 2D-graphics and graphical applications in XML. Most web browsers can display SVG just like they can display PNG, GIF, and JPG.
To draw a star in HTML5 SVG, we use the <polygon> element. The key is to set the correct x and y coordinates for each point of the star, alternating between outer points (tips) and inner points (valleys).
How Star Coordinates Work
A 5-point star requires 10 coordinate pairs - 5 outer points (star tips) and 5 inner points (valleys). The points must be arranged in a specific order to create the star shape when connected.
Example
Here's a complete HTML example showing how to draw a star using SVG:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 SVG Star</title>
<style>
#svgelem {
position: relative;
left: 10%;
transform: translateX(-20%);
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>HTML5 SVG Star</h2>
<svg id="svgelem" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<polygon points="150,20 170,80 230,80 185,120 205,180 150,150 95,180 115,120 70,80 130,80"
fill="#FFD700"
stroke="#FFA500"
stroke-width="2"/>
</svg>
</body>
</html>
Understanding the Points
The star coordinates follow a pattern of alternating between outer (tip) and inner (valley) points:
| Point | Type | Coordinates | Description |
|---|---|---|---|
| 1 | Outer | (150,20) | Top tip |
| 2 | Inner | (170,80) | Right valley |
| 3 | Outer | (230,80) | Top-right tip |
| 4 | Inner | (185,120) | Bottom-right valley |
| 5 | Outer | (205,180) | Bottom-right tip |
Creating Different Star Styles
You can customize the star appearance using various SVG attributes:
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- Filled star -->
<polygon points="70,20 80,50 110,50 90,70 100,100 70,85 40,100 50,70 30,50 60,50"
fill="#FF6B6B"/>
<!-- Outlined star -->
<polygon points="200,20 210,50 240,50 220,70 230,100 200,85 170,100 180,70 160,50 190,50"
fill="none"
stroke="#4ECDC4"
stroke-width="3"/>
</svg>
Key Points
- Use
<polygon>element with 10 coordinate pairs for a 5-point star - Alternate between outer (tip) and inner (valley) points
- Customize with
fill,stroke, andstroke-widthattributes - Points are specified as "x1,y1 x2,y2 x3,y3..." format
Conclusion
Drawing stars in HTML5 SVG is straightforward using the <polygon> element. The key is understanding the coordinate pattern of alternating outer and inner points to create the classic star shape.
9K+ Views
