SVG Animations Demo | Web Animations

Scalable Vector Graphics animations using CSS. Resolution-independent and performant.

1. Path Drawing (Line Animation)

Classic "drawing" effect using stroke-dasharray and stroke-dashoffset.

.svg-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 3s forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}
				

2. Rotating SVG

Apply CSS transforms to SVG elements.

.svg-rotate {
  animation: rotateSVG 4s linear infinite;
  transform-origin: center;
}

@keyframes rotateSVG {
  to { transform: rotate(360deg); }
}
				

3. Animated Icon (Success Checkmark)

Circle draws first, then checkmark appears.

.icon-circle {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawCircle 1s forwards;
}

.icon-check {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: drawCheck 0.5s 0.5s forwards;
}
				

4. Fill Color Animation

Animate SVG fill property with smooth color transitions.

@keyframes fillColor {
  0% { fill: #ef4444; }
  33% { fill: #10b981; }
  66% { fill: #3b82f6; }
  100% { fill: #ef4444; }
}

.svg-fill-animate {
  animation: fillColor 4s infinite;
}
				

5. SVG + SMIL Animation (Alternative)

Using built-in SVG <animate> element.

<circle cx="100" cy="60" r="30" fill="#8b5cf6">
  <animate
    attributeName="r"
    values="30;50;30"
    dur="2s"
    repeatCount="indefinite" />
</circle>
				

6. Animated Background Pattern

SVG pattern with animated elements.

<pattern id="animPattern" ...>
  <circle cx="20" cy="20" r="3" fill="#667eea">
    <animate
      attributeName="r"
      values="3;6;3"
      dur="2s"
      repeatCount="indefinite" />
  </circle>
</pattern>
				

💡 Key Takeaways

Path drawing: Use stroke-dasharray and stroke-dashoffset for line animations
Resolution-independent: SVGs scale perfectly on all screens and devices
CSS vs SMIL: CSS animations have better browser support; SMIL is deprecated in some browsers
Transform origin: SVG uses a different coordinate system; set transform-origin: center
Use cases: Logos, icons, illustrations, data visualizations, loading animations
Tools: Use SVGOMG to optimize SVG files