SVG Animations

Technical Deep Dive & Specifications

1. Declarative SMIL Animation (<animate>, <animateTransform>)

SMIL (Synchronized Multimedia Integration Language) allows XML elements to animate their own attributes declaratively without CSS or JavaScript:

<circle cx="50" cy="50" r="20" fill="#3b82f6">
  <!-- Animate Radius smoothly back and forth -->
  <animate 
    attributeName="r" 
    values="20; 45; 20" 
    dur="2s" 
    repeatCount="indefinite" 
    calcMode="spline" 
    keyTimes="0; 0.5; 1" 
    keySplines="0.4 0 0.2 1; 0.4 0 0.2 1" />
</circle>

Core SMIL Elements & Attributes:

• <animate>: Animates scalar attributes (x, y, cx, cy, r, width, fill, opacity, d).
• <animateTransform>: Animates matrix transformations (type="rotate|scale|translate|skewX").
• <animateMotion>: Guides a shape along a vector path trajectory (path="M 0,0 C 50,100 ...").
• attributeName: The exact XML attribute to modify.
• dur: Duration (e.g. 1.5s, 800ms).
• repeatCount: Number of iterations (3, or indefinite).
• values: Semicolon-delimited keyframe list ("0; 50; 0").

2. Path Morphing Rules in SMIL

You can morph complex vector shapes into other shapes by animating the path string d:

<path fill="#ec4899">
  <animate 
    attributeName="d" 
    dur="3s" 
    repeatCount="indefinite" 
    values="M 20,20 L 80,20 L 50,80 Z; 
            M 10,50 L 50,10 L 90,50 Z; 
            M 20,20 L 80,20 L 50,80 Z" />
</path>

The Path Morphing Cardinal Rule: To morph from Path A to Path B, both path strings MUST contain the identical number of path commands and vertex points in the exact same sequence (e.g. M L L Z $\to$ M L L Z). If vertex counts mismatch, the browser cannot interpolate between coordinates and the animation breaks.

3. The SVG Rotation Origin Trap in CSS

When animating standard HTML elements with CSS transform: rotate(360deg), the element spins around its own center by default (transform-origin: 50% 50%).

However, in SVG, transform-origin: 50% 50% historically evaluates relative to the top-left $(0, 0)$ of the entire SVG canvas, causing shapes to fling wildly across the screen in giant orbital loops!

The Modern CSS Solution:

.spin-target {
  transform-box: fill-box;    /* Locks coordinate box to the shape itself! */
  transform-origin: center;   /* Anchors rotation dead center of the shape */
  animation: spin 3s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 37–41: .radar-beam sets transform-box: fill-box and transform-origin: center. This forces the rotation matrix to anchor directly over the radar scanner's center $(100, 100)$ rather than the top-left corner of the document.
• Line 47–51: @media (prefers-reduced-motion: reduce) disables the spinning animation for users who have requested reduced motion in their operating system accessibility settings.
• Line 77–88: Demonstrates declarative SMIL: two <circle> elements animate their radius r from $20 \to 80$ while fading opacity from $1 \to 0$, creating expanding sonar beacon rings.
• Line 98–109: Morphs an organic vector blob by interpolating 4 cubic Bézier control nodes across three keyframes.

Expected Browser Render Output

+---------------------------------------------------------------+
|  1. CSS Radar Scanner     2. SMIL Beacon         3. Morph Blob|
|        (  /  )              ( ( ( * ) ) )           . - .     |
|       (  /    )             Expanding Radar        (     '    |
|      (360° Spin)             Pulse Waves            ' - - `   |
|                                                    (Fluid 4s) |
+---------------------------------------------------------------+