Building SVG animations that work without JavaScript

In a world where performance and accessibility matter, SVG animations that run without JavaScript can be a powerful tool for fast, resilient experiences. This guide walks you through practical patterns, tiny snippets, and real-world considerations so you can deliver animated SVGs that degrade gracefully and still look polished on a diverse range of devices. For more context and design-ready assets, check SVG resources at SVGenius.

Why animate with no JavaScript?

Relying on CSS and native SVG features provides several benefits:

• Faster rendering and reduced main-thread work.
• Better accessibility when animations are driven by CSS or SMIL, not DOM scripting.
• Support on environments with limited JavaScript capabilities or strict CSPs.
• Predictable playback across devices, including static image fallbacks.

Core techniques you can rely on

There are a few solid, JS-free approaches to animated SVG. Pick the technique that matches your design goals and accessibility needs.

CSS animations inside SVG

You can animate SVG properties such as transform, opacity, stroke-dashoffset, and more using CSS. This keeps animations declarative and easy to tweak in a stylesheet.

Example (inline SVG with CSS):

<svg width="120" height="60" viewBox="0 0 120 60" xmlns="http://www.w3.org/2000/svg">
  <rect class="bar" x="10" y="10" width="20" height="40" fill="#4CAF50"/>
  <rect class="bar" x="40" y="10" width="20" height="40" fill="#8BC34A" style="animation-delay:0.1s"/>
  <rect class="bar" x="70" y="10" width="20" height="40" fill="#CDDC39" style="animation-delay:0.2s"/>
</svg>
<style>
  .bar{ transform-origin: bottom; transform: scaleY(1); animation: bounce 1s ease-in-out infinite; }
  @keyframes bounce {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.5); }
  }
</style>

Tip: keep a simple color palette and use CSS custom properties for easy theming. Learn more about CSS-driven SVG animation at SVGenus resources.

SVG SMIL animations

SMIL (SVG SMIL) is a native animation language inside SVG. It runs without any JavaScript, but note that some environments may have limited SMIL support. It remains a compact way to animate properties like cx, cy, r, and even gradients.

Example (a pulsing circle with SMIL):

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="20" fill="tomato">
    <animateAttributeName="r" values="20;28;20" dur="1.2s" repeatCount="indefinite"/>
  </circle>
</svg>

Note: the syntax can vary (attributes like <animate> or <animateTransform>), so validate against your target browsers. For a quick, JS-free pattern, consider combining SMIL with CSS for a robust fallback strategy. See practical examples on SVGenious.

Making animations accessible

Accessible SVG animations should respect motion-sensitive users and screen readers. Use these guidelines to keep things usable without JavaScript:

• Provide sensible default states and avoid motion as the only way to convey information.
• Offer a way to reduce motion via CSS media features like prefers-reduced-motion.
• Ensure controls and status indicators are present in the DOM for screen readers, and that animations do not rely solely on timing for conveyance.

Respecting prefers-reduced-motion

Use a media query to disable or simplify animations for users who opt out of motion:

@media (prefers-reduced-motion: reduce) {
  .bar{ animation: none; transform: scaleY(1); }
}

In practice, provide a static version or a gentle, non-jarring alternative when motion is reduced. This keeps your design inclusive and still visually cohesive.

Practical patterns you can reuse

Here are small, repeatable patterns to include in your design toolkit. Each pattern stays JS-free and keeps the DOM simple.

Pattern 1: Pulsing icon with CSS

Animated SVG icons that pulse to indicate activity.

<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
  <circle cx="20" cy="20" r="8" fill="royalblue">
    <animate attributeName="r" values="8;12;8" dur="1.5s" repeatCount="indefinite"/>
  </circle>
</svg>

Tip: SMIL inside a group can be paired with CSS for multi-element interactions. Visit SVGenius for a library of ready-made ideas.

Pattern 2: Progress bar built with stroke-dasharray

SVG stroke animation can simulate progress without any scripting.

<svg width="240"