Code

SVG

Basic Shapes

rect, circle, ellipse, line, polygon, polyline — the foundational SVG elements.

Text

text, tspan, textPath — text layout, anchoring, and curved text.

Stroke & Fill

stroke-dasharray, linecap, linejoin, fill-opacity, and fill-rule.

Transforms

translate, rotate, scale, and skewX applied to group elements.

Paths

Path d commands: M L H V C Q A Z — lines, Béziers, and arcs.

Gradients

linearGradient and radialGradient with stop elements.

Patterns

pattern element as a tileable fill: checkerboard, dots, hatching.

Filters

Filter primitives: feGaussianBlur, feDropShadow, feTurbulence, feColorMatrix.

Clip & Mask

clipPath and mask elements for compositing and spotlight effects.

Animation (SMIL)

Declarative animation with animate, animateTransform, and animateMotion.

Symbols & Use

symbol + use for a reusable SVG icon system.

Generative Art

Animated Lissajous figures and phyllotaxis spiral — generative art via raw SVG DOM.

Stroke & Fill

Beginner Painting attributes: fill, stroke, stroke-dasharray, stroke-linecap, stroke-linejoin, fill-opacity, and fill-rule. MDN stroke

<!-- stroke-dasharray: on, off, ... -->
<line stroke-dasharray="8,4"/>
<line stroke-dasharray="12,3,3,3"/>

<!-- stroke-linecap -->
<line stroke-linecap="butt"/>
<line stroke-linecap="round"/>
<line stroke-linecap="square"/>

<!-- stroke-linejoin -->
<polyline stroke-linejoin="miter"/>
<polyline stroke-linejoin="round"/>
<polyline stroke-linejoin="bevel"/>

<!-- stroke-miterlimit -->
<polyline stroke-miterlimit="4"/>

<!-- fill-opacity -->
<rect fill="#4f46e5"
      fill-opacity="0.5"/>

<!-- fill-rule: nonzero | evenodd -->
<polygon
  points="180,230 192,263 ..."
  fill="#8b5cf6"
  fill-rule="evenodd"/>

<!-- stroke-opacity -->
<rect stroke="#000"
      stroke-opacity="0.3"
      stroke-width="4"/>

<!-- Animate dash offset for draw effect -->
<path stroke-dasharray="500"
      stroke-dashoffset="500">
  <animate attributeName="stroke-dashoffset"
           from="500" to="0"
           dur="2s" fill="freeze"/>
</path>

Key Attributes

stroke-dasharray — comma/space list of dash and gap lengths (repeating pattern)
stroke-dashoffset — shift start of dash pattern; animating it creates a "draw" effect
stroke-linecap — butt | round | square — cap style at line endpoints
stroke-linejoin — miter | round | bevel — join style at path corners
stroke-miterlimit — max miter ratio before falling back to bevel
fill-opacity / stroke-opacity — transparency 0–1
fill-rule — nonzero | evenodd — which areas are "inside" a self-intersecting path