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.

Paths

Intermediate The path element's d attribute — every command letter: M L H V C Q A Z (uppercase = absolute, lowercase = relative). MDN path d

<!-- M — moveto (pen up) -->
<!-- L — lineto -->
<!-- Z — closepath -->
<path d="M 10 40 L 80 10
         L 120 50 L 60 70 Z"/>

<!-- H — horizontal lineto
     V — vertical lineto -->
<path d="M 150 10 H 230
         V 70 H 150 Z"/>

<!-- C — cubic Bézier
     C cp1x,cp1y cp2x,cp2y x,y -->
<path d="M 270 60
         C 290 10, 360 10, 380 60"/>

<!-- Q — quadratic Bézier
     Q cpx,cpy x,y -->
<path d="M 400 60 Q 440 10 470 60"/>

<!-- A — arc
     A rx ry x-rotation
       large-arc-flag sweep-flag
       x y -->
<path d="M 80 175
         A 50 50 0 0 1 170 175"/>

<!-- S — smooth cubic (mirrors cp2) -->
<path d="M 230 140
         C 250 110, 280 110, 300 140
         S 360 170, 380 140"/>

<!-- T — smooth quadratic (mirrors cp) -->
<path d="M 230 210 Q 270 170 310 210
         T 390 210"/>

<!-- Lowercase = relative coords -->
<path d="M 10 10 l 50 0 l 0 30"/>

Command Reference

M/m — moveto (starts a sub-path)
L/l — lineto; H/h horizontal; V/v vertical
C/c — cubic Bézier (2 control points); S/s — smooth cubic
Q/q — quadratic Bézier (1 control point); T/t — smooth quadratic
A/a — elliptical arc: rx ry x-rotation large-arc-flag sweep-flag x y
Z/z — closepath (straight line back to current sub-path start)
Uppercase = absolute coordinates; lowercase = relative to current point