SVG Polygon

The <polygon> element is used to draw closed polygons with at least three sides, such as triangles, pentagons, stars, etc.

Basic Syntax

<svg width="200" height="200">
  <polygon points="100,10 190,190 10,190" fill="#3b82f6"/>
</svg>

Main Properties

Property	Description
points	Defines polygon vertex coordinates, format: x1,y1 x2,y2 x3,y3...
fill	Fill color
stroke	Stroke color
stroke-width	Stroke width
fill-rule	Fill rule (nonzero or evenodd)

points Format

Coordinate points can be separated by spaces or commas:

• 100,10 190,190 10,190
• 100 10, 190 190, 10 190
• 100 10 190 190 10 190

Triangles

<svg width="400" height="150">
  <!-- Equilateral triangle -->
  <polygon points="70,20 130,120 10,120" fill="#3b82f6"/>

  <!-- Isosceles triangle -->
  <polygon points="210,20 260,120 160,120" fill="#22c55e"/>

  <!-- Right triangle -->
  <polygon points="310,120 310,20 390,120" fill="#ef4444"/>
</svg>

Rectangles and Squares

<svg width="300" height="150">
  <!-- Square -->
  <polygon points="20,20 100,20 100,100 20,100" fill="#3b82f6"/>

  <!-- Rectangle -->
  <polygon points="130,30 280,30 280,90 130,90" fill="#22c55e"/>
</svg>

Pentagons and Hexagons

<svg width="400" height="200">
  <!-- Pentagon -->
  <polygon points="100,10 161,59 138,127 62,127 39,59" fill="#3b82f6"/>

  <!-- Hexagon -->
  <polygon points="300,30 350,55 350,105 300,130 250,105 250,55" fill="#8b5cf6"/>
</svg>

Stars

<svg width="400" height="200">
  <!-- Five-pointed star -->
  <polygon points="100,10 120,80 190,80 135,120 155,190 100,150 45,190 65,120 10,80 80,80"
           fill="#f59e0b"/>

  <!-- Four-pointed star -->
  <polygon points="300,20 320,80 380,100 320,120 300,180 280,120 220,100 280,80"
           fill="#ef4444"/>
</svg>

Polygons with Stroke

<svg width="400" height="150">
  <!-- Stroke only -->
  <polygon points="70,20 130,120 10,120"
           fill="none" stroke="#3b82f6" stroke-width="3"/>

  <!-- Fill + stroke -->
  <polygon points="220,20 280,120 160,120"
           fill="#bfdbfe" stroke="#3b82f6" stroke-width="4"/>

  <!-- Dashed stroke -->
  <polygon points="370,20 430,120 310,120"
           fill="none" stroke="#ef4444" stroke-width="3"
           stroke-dasharray="10,5"/>
</svg>

Fill Rule (fill-rule)

<svg width="400" height="200">
  <!-- nonzero (default) -->
  <polygon points="100,10 120,80 190,80 135,120 155,190 100,150 45,190 65,120 10,80 80,80"
           fill="#3b82f6" fill-rule="nonzero"/>
  <text x="100" y="210" text-anchor="middle" font-size="12">nonzero</text>

  <!-- evenodd -->
  <polygon points="300,10 320,80 390,80 335,120 355,190 300,150 245,190 265,120 210,80 280,80"
           fill="#3b82f6" fill-rule="evenodd"/>
  <text x="300" y="210" text-anchor="middle" font-size="12">evenodd</text>
</svg>

Transparent Polygons

<svg width="250" height="200">
  <polygon points="70,20 130,120 10,120" fill="#3b82f6" opacity="0.6"/>
  <polygon points="110,20 170,120 50,120" fill="#ef4444" opacity="0.6"/>
  <polygon points="90,60 150,160 30,160" fill="#22c55e" opacity="0.6"/>
</svg>

Using CSS Styling

<style>
  .polygon-hover {
    fill: #3b82f6;
    stroke: #1d4ed8;
    stroke-width: 2;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .polygon-hover:hover {
    fill: #60a5fa;
    transform: scale(1.1);
    transform-origin: center;
  }
</style>

<svg width="150" height="150">
  <polygon class="polygon-hover" points="75,10 140,130 10,130"/>
</svg>

Polygon Animation

<svg width="400" height="150">
  <!-- Color animation -->
  <polygon points="70,20 130,120 10,120" fill="#3b82f6">
    <animate attributeName="fill"
             values="#3b82f6;#ef4444;#22c55e;#3b82f6"
             dur="3s" repeatCount="indefinite"/>
  </polygon>

  <!-- Rotation animation -->
  <polygon points="220,20 280,120 160,120" fill="#8b5cf6">
    <animateTransform attributeName="transform" type="rotate"
                      values="0 220 70;360 220 70" dur="3s" repeatCount="indefinite"/>
  </polygon>

  <!-- Scale animation -->
  <polygon points="370,20 430,120 310,120" fill="#f59e0b">
    <animateTransform attributeName="transform" type="scale"
                      values="1;1.2;1" dur="1.5s" repeatCount="indefinite"/>
  </polygon>
</svg>

Practical Application Examples

Play Button

<svg width="80" height="80">
  <circle cx="40" cy="40" r="38" fill="#3b82f6"/>
  <polygon points="32,25 60,40 32,55" fill="white"/>
</svg>

Arrow

<svg width="300" height="100">
  <!-- Right arrow -->
  <polygon points="10,35 60,35 60,20 100,50 60,80 60,65 10,65" fill="#3b82f6"/>

  <!-- Up arrow -->
  <polygon points="180,100 180,50 165,50 200,10 235,50 220,50 220,100" fill="#22c55e"/>

  <!-- Bidirectional arrow -->
  <polygon points="260,50 290,25 290,40 360,40 360,25 390,50 360,75 360,60 290,60 290,75"
           fill="#ef4444"/>
</svg>

Badge/Shield

<svg width="100" height="120">
  <polygon points="50,5 95,25 95,70 50,115 5,70 5,25"
           fill="#3b82f6" stroke="#1d4ed8" stroke-width="3"/>
  <text x="50" y="65" text-anchor="middle" fill="white" font-size="24" font-weight="bold">
    ★
  </text>
</svg>

Diamond

<svg width="100" height="120">
  <!-- Top -->
  <polygon points="50,5 85,35 50,50 15,35" fill="#60a5fa"/>
  <!-- Bottom -->
  <polygon points="50,50 85,35 50,115 15,35" fill="#3b82f6"/>
</svg>

Mountain Icon

<svg width="150" height="100">
  <!-- Background -->
  <rect width="150" height="100" rx="8" fill="#0ea5e9"/>
  <!-- Big mountain -->
  <polygon points="30,90 75,30 120,90" fill="#22c55e"/>
  <!-- Small mountain -->
  <polygon points="80,90 110,50 140,90" fill="#16a34a"/>
  <!-- Sun -->
  <circle cx="120" cy="25" r="12" fill="#fbbf24"/>
</svg>

Hexagonal Grid Unit

<svg width="200" height="180">
  <polygon points="60,10 100,30 100,70 60,90 20,70 20,30"
           fill="#3b82f6" stroke="white" stroke-width="2"/>
  <polygon points="120,10 160,30 160,70 120,90 80,70 80,30"
           fill="#60a5fa" stroke="white" stroke-width="2"/>
  <polygon points="90,70 130,90 130,130 90,150 50,130 50,90"
           fill="#93c5fd" stroke="white" stroke-width="2"/>
</svg>

Next Steps

Now that you've learned polygons, let's learn about SVG Polyline!