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.

Clip & Mask

Advanced<clipPath> clips to a hard-edged shape; <mask> uses luminance for soft, gradient-based compositing. MDN clipPath

<defs>
  <!-- clipPath: hard-edge clipping -->
  <clipPath id="clip-circle">
    <circle cx="75" cy="65" r="55"/>
  </clipPath>

  <!-- clip with text shape -->
  <clipPath id="clip-text">
    <text x="0" y="80"
      font-size="72"
      font-weight="900">SVG</text>
  </clipPath>

  <!-- mask: luminance controls opacity
       white = fully visible
       black = fully transparent -->
  <mask id="mask-spotlight">
    <radialGradient id="spot"
      cx="50%" cy="50%" r="50%">
      <stop offset="0%"
            stop-color="white"/>
      <stop offset="100%"
            stop-color="black"/>
    </radialGradient>
    <rect width="200" height="110"
          fill="url(#spot)"/>
  </mask>

  <!-- fade-out mask -->
  <mask id="mask-fade">
    <linearGradient id="fade"
      x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%"
            stop-color="white"/>
      <stop offset="100%"
            stop-color="black"/>
    </linearGradient>
    <rect fill="url(#fade)"/>
  </mask>
</defs>

<!-- Apply -->
<rect clip-path="url(#clip-circle)"/>
<text mask="url(#mask-fade)">FADE</text>

Key Concepts

<clipPath> — binary clip: pixels inside the clip shape are visible, outside are hidden
<mask> — luminance-based: white = fully opaque, black = transparent, grey = semi-transparent
clip-path="url(#id)" attribute on any shape or group
mask="url(#id)" attribute on any shape or group
clipPathUnits — userSpaceOnUse (default) or objectBoundingBox
maskContentUnits — same two options for the mask contents
Masks support gradients, shapes, images, and text — anything with SVG fill determines the alpha