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.

Gradients

IntermediatelinearGradient (horizontal, vertical, diagonal) and radialGradient defined in <defs> and referenced via fill="url(#id)". MDN linearGradient

<defs>
  <!-- Linear horizontal (x1→x2) -->
  <linearGradient id="lg-h"
    x1="0" y1="0" x2="1" y2="0">
    <stop offset="0%"
          stop-color="#4f46e5"/>
    <stop offset="100%"
          stop-color="#ec4899"/>
  </linearGradient>

  <!-- Linear vertical (y1→y2) -->
  <linearGradient id="lg-v"
    x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%"   stop-color="#f59e0b"/>
    <stop offset="100%" stop-color="#16a34a"/>
  </linearGradient>

  <!-- Diagonal with 3 stops -->
  <linearGradient id="lg-d"
    x1="0" y1="0" x2="1" y2="1">
    <stop offset="0%"   stop-color="#0ea5e9"/>
    <stop offset="50%"  stop-color="#8b5cf6"/>
    <stop offset="100%" stop-color="#e11d48"/>
  </linearGradient>

  <!-- Radial gradient -->
  <radialGradient id="rg"
    cx="50%" cy="50%" r="50%">
    <stop offset="0%"   stop-color="#4cc9f0"/>
    <stop offset="100%" stop-color="#03045e"/>
  </radialGradient>

  <!-- Rotated with gradientTransform -->
  <linearGradient id="lg-rot"
    x1="0" y1="0" x2="1" y2="0"
    gradientTransform=
      "rotate(45, 0.5, 0.5)">
    ...
  </linearGradient>
</defs>

<!-- Apply to fill or stroke -->
<rect fill="url(#lg-h)"/>
<circle fill="url(#rg)"/>
<path stroke="url(#lg-h)"/>

Key Concepts

Gradients are defined once in <defs> and referenced by id via fill="url(#id)"
x1/y1/x2/y2 on linearGradient — gradient vector (default: gradientUnits="objectBoundingBox", so values are 0–1)
cx/cy/r on radialGradient — centre and radius; fx/fy sets the focal point
stop offset — 0%–100% or 0–1 decimal
stop-opacity — per-stop opacity, independent of stop-color
gradientTransform — applies any SVG transform to the gradient coordinate system
xlink:href (legacy) / href — one gradient can inherit stops from another