SVG Animation with CSS and JS: SMIL vs CSS vs JS

SVG paths, shapes, and text need to animate, but there are three competing approaches (SMIL, CSS, JS) with different trade-offs.

Prefer CSS animations for SVG properties that CSS can target. Use JS (GSAP, anime.js) for complex path morphing or programmatic control. Avoid SMIL in production (deprecated in Chrome briefly, then un-deprecated — too risky for long-term use).

/* CSS drawing animation via stroke-dashoffset */
.circle {
  stroke-dasharray: 251; /* circumference = 2*pi*r */
  stroke-dashoffset: 251;
  animation: drawCircle 1.5s ease forwards;
}
@keyframes drawCircle {
  to { stroke-dashoffset: 0; }
}

// anime.js path drawing
import anime from 'animejs';
anime({
  targets: '.path',
  strokeDashoffset: [anime.setDashoffset, 0],
  duration: 1500,
  easing: 'easeInOutSine',
});

CSS animations on SVG are compositor-friendly for transform and opacity. stroke-dashoffset animations give the illusion of drawing a path using pure CSS. SMIL is fragile due to inconsistent browser support history.