pelicin › web › SVG

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>
| LIVE PREVIEW

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>
| LIVE PREVIEW

<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>
| LIVE PREVIEW

<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>
| LIVE PREVIEW

<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>
| LIVE PREVIEW

<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>
| LIVE PREVIEW

<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>
| LIVE PREVIEW

References