10 SVG Animation Examples with Code

Sometimes the fastest way to learn is to see working code. This post contains 10 production-ready SVG animation examples you can copy, customize, and drop into your projects.

Each example includes the complete SVG markup, CSS, and a description of how it works. All examples respect prefers-reduced-motion for accessibility.

1. Pulsing Loading Spinner

A clean, minimal spinner that works at any size. Uses stroke-dasharray to create the arc effect.

<svg width="48" height="48" viewBox="0 0 48 48">
  <circle
    cx="24" cy="24" r="20"
    fill="none"
    stroke="#9333ea"
    stroke-width="4"
    stroke-linecap="round"
    stroke-dasharray="80"
    stroke-dashoffset="60"
    class="spinner"
  />
</svg>

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

.spinner {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

How it works: The circle has a gap created by stroke-dasharray and stroke-dashoffset. The rotation animation spins the gap around continuously.

2. Heartbeat Icon

A subtle pulse perfect for favorite buttons or health indicators.

<svg width="32" height="32" viewBox="0 0 24 24" class="heartbeat">
  <path
    d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
    fill="#ec4899"
  />
</svg>

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
}

.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
  transform-origin: center;
}

3. Draw-On Logo Reveal

An elegant effect where a logo draws itself. Perfect for hero sections.

<svg width="200" height="50" viewBox="0 0 200 50">
  <path
    class="draw"
    d="M10,25 L50,10 L90,25 L50,40 Z"
    fill="none"
    stroke="#9333ea"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

.draw {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: draw 2s ease-out forwards;
}

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

How it works: stroke-dasharray creates a dashed stroke where the dash equals the path length. stroke-dashoffset shifts the dash pattern, revealing the path progressively.

4. Morphing Shape

A circle that morphs into a square using SMIL. SMIL is still the cleanest way to do this without JavaScript.

<svg width="100" height="100" viewBox="0 0 100 100">
  <path fill="#9333ea">
    <animate
      attributeName="d"
      values="M50,10 C70,10 90,30 90,50 C90,70 70,90 50,90 C30,90 10,70 10,50 C10,30 30,10 50,10 Z;
              M20,20 L80,20 L80,80 L20,80 Z;
              M50,10 C70,10 90,30 90,50 C90,70 70,90 50,90 C30,90 10,70 10,50 C10,30 30,10 50,10 Z"
      dur="3s"
      repeatCount="indefinite"
    />
  </path>
</svg>

5. Checkmark Success Animation

A satisfying checkmark that draws itself when a task completes.

<svg width="64" height="64" viewBox="0 0 64 64">
  <circle cx="32" cy="32" r="30" fill="none" stroke="#22c55e" stroke-width="3"/>
  <path
    class="checkmark"
    d="M18,32 L28,42 L46,22"
    fill="none"
    stroke="#22c55e"
    stroke-width="4"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

.checkmark {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: check 0.5s ease-out 0.3s forwards;
}

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

Trigger tip: Add the check class via JavaScript when your async action completes:

document.querySelector('.checkmark').classList.add('animate');

6. Hover-Scale Icon

A subtle scale effect for navigation or action icons.

<svg width="24" height="24" viewBox="0 0 24 24" class="hover-icon">
  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" 
        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>

.hover-icon {
  transition: transform 0.2s ease, color 0.2s ease;
  color: #6b7280;
}

.hover-icon:hover {
  transform: scale(1.15);
  color: #9333ea;
}

7. Bouncing Ball

A classic physics-based animation using the Web Animations API.

<svg width="200" height="200" viewBox="0 0 200 200">
  <circle id="ball" cx="100" cy="30" r="20" fill="#9333ea"/>
</svg>

const ball = document.getElementById('ball');

ball.animate([
  { cy: 30, easing: 'ease-in' },
  { cy: 170, easing: 'ease-out' },
  { cy: 30, easing: 'ease-in' }
], {
  duration: 1200,
  iterations: Infinity
});

8. Rotating Gear

A mechanical gear animation, perfect for settings icons or loading states.

<svg width="48" height="48" viewBox="0 0 48 48">
  <path
    class="gear"
    d="M24 12v-4m0 32v-4m12-12h4M8 24h4m17.7-8.3l2.8-2.8M15.5 32.5l2.8-2.8m0-14.2l-2.8-2.8m14.2 22.6l-2.8-2.8"
    fill="none"
    stroke="#6b7280"
    stroke-width="3"
    stroke-linecap="round"
  />
  <circle cx="24" cy="24" r="6" fill="none" stroke="#6b7280" stroke-width="3"/>
</svg>

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

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

9. Progress Ring

A circular progress indicator that fills based on a percentage value.

<svg width="120" height="120" viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="52" fill="none" stroke="#e5e7eb" stroke-width="8"/>
  <circle
    class="progress"
    cx="60" cy="60" r="52"
    fill="none"
    stroke="#9333ea"
    stroke-width="8"
    stroke-linecap="round"
    stroke-dasharray="326.73"
    stroke-dashoffset="326.73"
    transform="rotate(-90 60 60)"
  />
</svg>

.progress {
  transition: stroke-dashoffset 0.5s ease;
}

// Set progress to 75%
const circle = document.querySelector('.progress');
const circumference = 2 * Math.PI * 52; // 326.73
const percent = 0.75;
circle.style.strokeDashoffset = circumference * (1 - percent);

How it works: The ring's circumference is calculated from 2 * π * r. Setting stroke-dashoffset to a percentage of the circumference creates the fill effect.

10. Text Scramble Reveal

A typewriter-style text reveal using SMIL.

<svg width="400" height="60" viewBox="0 0 400 60">
  <text x="0" y="40" font-family="monospace" font-size="24" fill="#9333ea">
    <tspan class="scramble">Hello, Vector Wizard!</tspan>
  </text>
</svg>

For a true text scramble, JavaScript works better than SMIL:

function scrambleText(element, finalText, duration = 1000) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  const steps = 20;
  const interval = duration / steps;
  let step = 0;

  const timer = setInterval(() => {
    const progress = step / steps;
    const revealed = Math.floor(progress * finalText.length);
    const scrambled = finalText
      .split('')
      .map((char, i) => {
        if (i < revealed) return char;
        if (char === ' ') return ' ';
        return chars[Math.floor(Math.random() * chars.length)];
      })
      .join('');

    element.textContent = scrambled;
    step++;
    if (step > steps) clearInterval(timer);
  }, interval);
}

Customizing these examples

Change Colors

Most examples use a single color. Replace #9333ea with your brand color. For currentColor examples, set the color on the parent element:

.icon-wrapper {
  color: #your-brand-color;
}

Change Speed

Modify the duration value in CSS animations or JavaScript. For CSS:

/* Faster */
.spinner {
  animation: spin 0.5s linear infinite;
}

/* Slower */
.spinner {
  animation: spin 3s linear infinite;
}

Change Size

All examples use viewBox, so scaling is trivial. Change the width and height attributes:

<svg width="96" height="96" viewBox="0 0 48 48">
  <!-- Same markup, now 2x size -->
</svg>

Or use CSS:

svg {
  width: 100%;
  height: auto;
}

Performance tips

1. Prefer transform and opacity — These are GPU-composited and run at 60fps
2. Avoid animating width, height, top, left — These trigger layout recalculation every frame
3. Use will-change: transform sparingly — It improves performance but consumes GPU memory
4. Test on mobile — Animations that run smoothly on desktop may drop frames on low-end phones
5. Respect prefers-reduced-motion — Always provide a static fallback

Copy-Paste Ready

All examples above are complete and self-contained. Copy the SVG markup and CSS into your project, adjust colors and sizes, and they will work immediately.

---

Want to generate custom animations without writing code? Try Vector Wizard's AI SVG Animation and describe what you want in plain English.