Basic Shape

Let's learn how to draw basic shapes.

SVG attributes

pathLength

Changes how the path length is computed. Instead of using the actual computed length, force the computer to use this number.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <style>
    #path-length-example {
      stroke-width: 5;
      stroke-dasharray: 10;
      fill: yellow;
      stroke: blue;
    }
  </style>
  <!-- stroke-dasharray length is 10 -->
  <!-- with path length of 60, you will have 6 segments. -->
  <!-- I.e. 60/10 = 6: dash, gap, dash, gap, dash, gap -->
  <circle id="path-length-example" cx="50" cy="50" r="40" pathLength="60" />
</svg>

SVG elements

<circle>

• cx — center x (specify length or percentage)
• cy — center y (specify length or percentage)
• r — radius (specify length or percentage)
• pathLength — when drawing the stroke, assume the circumference of the circle is this number (this won't change the size of the circle)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="red" />
</svg>

<ellipse>

• cx — center x (specify length or percentage)
• cy — center y (specify length or percentage)
• rx — radius in the x-axis (specify length or percentage)
• rx — radius in the y-axis (specify length or percentage)
• pathLength — when drawing the stroke, assume the circumference of the ellipse is this number (this won't change the size of the ellipse)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <ellipse cx="50" cy="50" rx="40" ry="20" fill="orange" />
</svg>

<rect>

• x — top-left x coordinate (specify length or percentage)
• y — top-left y coordinate (specify length or percentage)
• width — width (specify length or percentage)
• height — height (specify length or percentage)
• rx — horizontal corner radius of the rectangle (specify length or percentage, takes the value of ry if it's specified)
• ry — horizontal corner radius of the rectangle (specify length or percentage, takes the value of rx if it's specified)
• pathLength — when drawing the stroke, assume the perimeter of the rectangle is this number (this won't change the size of the rectangle)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <rect x="10" y="20" width="80" height="60" rx="10" fill="green" />
</svg>

<polygon>

• points — space-separated x,y coordinates of the polygon (only accepts numbers for both x and y)
• pathLength — when drawing the stroke, assume the perimeter of the polygon is this number (this won't change the size of the polygon)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <polygon points="50,0 100,100 0,100" fill="blue" />
</svg>

<line>

• x1 — starting x coordinate (specify length or percentage)
• y1 — starting y coordinate (specify length or percentage)
• x2 — ending x coordinate (specify length or percentage)
• y2 — ending y coordinate (specify length or percentage)
• pathLength — when drawing the stroke, assume the length of the line is this number

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <line x1="0" y1="0" x2="100" y2="100" stroke="purple"  stroke-width="5" />
</svg>

<polyline>

Creates an open shape (unlike <polygon>).

• points — space-separated x,y coordinates of the polyline (only accepts numbers for both x and y)
• pathLength — when drawing the stroke, assume the length of the polyline is this number

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <polyline points="0,100, 50,0 50,100, 100,0" fill="gray" stroke="black" stroke-width="5" />
</svg>

References

• pathLength (MDN) — https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength
• <circle> (MDN) — https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle
• <ellipse> (MDN) — https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse
• <rect> (MDN) — https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect
• <polygon> (MDN) — https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon
• <line> (MDN) — https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line
• <polyline> (MDN) — https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline