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.

Patterns

Intermediate The <pattern> element defines a tiled fill. Patterns are defined in <defs> and applied via fill="url(#id)". MDN pattern

<defs>
  <!-- Checkerboard: two offset squares -->
  <pattern id="checker"
    width="16" height="16"
    patternUnits="userSpaceOnUse">
    <rect width="8" height="8"
          fill="#4f46e5"/>
    <rect x="8" y="8"
          width="8" height="8"
          fill="#4f46e5"/>
  </pattern>

  <!-- Dots on white background -->
  <pattern id="dots"
    width="12" height="12"
    patternUnits="userSpaceOnUse">
    <rect width="12" height="12"
          fill="#fff"/>
    <circle cx="6" cy="6" r="3"
            fill="#e11d48"/>
  </pattern>

  <!-- Diagonal lines -->
  <pattern id="diag"
    width="10" height="10"
    patternUnits="userSpaceOnUse">
    <line x1="0" y1="10"
          x2="10" y2="0"
          stroke="#f59e0b"
          stroke-width="1.5"/>
  </pattern>

  <!-- Cross-hatch: two diagonals -->
  <pattern id="crosshatch"
    width="10" height="10"
    patternUnits="userSpaceOnUse">
    <line x1="0" y1="10" x2="10" y2="0"
          stroke="#16a34a"/>
    <line x1="0" y1="0"  x2="10" y2="10"
          stroke="#16a34a"/>
  </pattern>
</defs>

<!-- Apply as fill -->
<rect x="10" y="10" width="200" height="120"
      fill="url(#checker)"/>

Key Concepts

patternUnits="userSpaceOnUse" — width/height are in SVG user units; objectBoundingBox uses 0–1 fractions of the shape's bounding box
patternContentUnits — controls the coordinate system for the pattern's content
x / y on pattern — offset of the tiling origin
patternTransform — rotate, scale, or skew the entire tile grid
Any SVG element can be used inside the pattern — shapes, text, even nested patterns
Apply patterns to fill or stroke: fill="url(#id)"