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.

Symbols & Use

Advanced Define reusable icon components with <symbol> and stamp them with <use> — overriding size, position, and fill at each usage site. MDN symbol

<defs>
  <!-- Define symbol with its own viewBox -->
  <symbol id="icon-heart"
          viewBox="0 0 24 24">
    <path d="M12 21.593 C 6.37 16.054..."
          fill="currentColor"/>
  </symbol>

  <symbol id="icon-star"
          viewBox="0 0 24 24">
    <polygon points="12,2 15.09,8.26..."
             fill="currentColor"/>
  </symbol>
</defs>

<!-- Stamp with <use> -->
<!-- x/y = position, width/height = size -->
<use href="#icon-heart"
     x="10" y="32"
     width="24" height="24"
     color="#e11d48"/>

<!-- Different size, same symbol -->
<use href="#icon-heart"
     x="88" y="22"
     width="44" height="44"
     color="#be185d"/>

<!-- Rotate via transform -->
<use href="#icon-arrow"
     x="10" y="68"
     width="30" height="30"
     color="#4f46e5"
     transform="rotate(90, 25, 83)"/>

<!-- CSS currentColor lets <use>
     inherit fill from parent/attribute -->
<!-- Set color="" on <use> to control
     fill="currentColor" inside symbol -->

Key Concepts

<symbol> — defines a reusable graphic with its own viewBox; not rendered directly
<use href="#id"> — instantiates the symbol; each instance is independent in the DOM
x, y, width, height on <use> — position and scale the symbol into its viewport
fill="currentColor" inside a symbol + color="…" on <use> — theming without duplicating shapes
transform on <use> — rotate, translate, or skew individual instances
Symbols are the basis of SVG sprite sheets — one hidden SVG containing all icons, used across the page
preserveAspectRatio on the symbol controls how the viewBox scales into the use-site viewport