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.

Filters

Advanced SVG filter primitives: feGaussianBlur, feDropShadow, feTurbulence + feDisplacementMap, and feColorMatrix. MDN filter

<defs>
  <!-- feGaussianBlur -->
  <filter id="blur">
    <feGaussianBlur stdDeviation="5"/>
  </filter>

  <!-- feDropShadow -->
  <filter id="shadow">
    <feDropShadow dx="4" dy="4"
      stdDeviation="3"
      flood-color="#4f46e5"
      flood-opacity="0.5"/>
  </filter>

  <!-- Distort with turbulence -->
  <filter id="wavy">
    <feTurbulence type="turbulence"
      baseFrequency="0.05"
      numOctaves="2"
      result="noise"/>
    <feDisplacementMap
      in="SourceGraphic"
      in2="noise"
      scale="12"
      xChannelSelector="R"
      yChannelSelector="G"/>
  </filter>

  <!-- feColorMatrix: saturate -->
  <filter id="saturate">
    <feColorMatrix
      type="saturate"
      values="3"/>
  </filter>

  <!-- Glow: blur + merge -->
  <filter id="glow">
    <feGaussianBlur stdDeviation="6"
                    result="blur"/>
    <feMerge>
      <feMergeNode in="blur"/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
</defs>

<!-- Apply -->
<rect filter="url(#blur)"/>

Key Primitives

feGaussianBlur — Gaussian blur with stdDeviation; use result to chain
feDropShadow — shorthand for blur + offset + flood composite
feTurbulence — generates Perlin noise or turbulence; use with feDisplacementMap for warp effects
feColorMatrix — type: matrix | saturate | hueRotate | luminanceToAlpha
feMorphology — erode (shrink) or dilate (expand) shape edges
feMerge — composites multiple filter results; in="SourceGraphic" for the original element
x/y/width/height on <filter> — bounding region; expand to avoid clipping the effect