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.

Animation (SMIL)

Advanced Declarative SVG animation via SMIL: <animate>, <animateTransform>, and <animateMotion> with <mpath>. MDN animate

<!-- animate: attribute cycling -->
<circle cx="80" cy="70" r="35">
  <animate
    attributeName="fill"
    values="#4f46e5;#e11d48;#4f46e5"
    dur="4s"
    repeatCount="indefinite"/>
  <animate
    attributeName="r"
    values="35;45;35"
    dur="2s"
    repeatCount="indefinite"/>
</circle>

<!-- animateTransform: rotate -->
<polygon ...>
  <animateTransform
    attributeName="transform"
    type="rotate"
    from="0" to="360"
    dur="6s"
    repeatCount="indefinite"/>
</polygon>

<!-- stroke-dashoffset draw effect -->
<path stroke-dasharray="600"
      stroke-dashoffset="600">
  <animate
    attributeName="stroke-dashoffset"
    from="600" to="0"
    dur="3s"
    repeatCount="indefinite"/>
</path>

<!-- animateMotion + mpath -->
<defs>
  <path id="track"
    d="M 40 240 C 80 170 ..."/>
</defs>

<circle r="8" fill="#e11d48">
  <animateMotion
    dur="4s"
    repeatCount="indefinite"
    rotate="auto">
    <mpath href="#track"/>
  </animateMotion>
</circle>

Key Concepts

<animate> — animates any presentation attribute: fill, r, opacity, stroke-dashoffset, etc.
values — semicolon-separated keyframe values; or use from/to for two-point animations
dur — duration (e.g. 2s, 500ms); repeatCount="indefinite" loops forever
<animateTransform> — animates translate, rotate, scale, or skewX/Y
additive="sum" — adds the animation on top of the element's existing transform
<animateMotion> — moves an element along a path; rotate="auto" aligns to the tangent
<mpath href="#id"> — references a <path> element as the motion track