SVG Animation Generator

Generate animated SVG graphics — spinners, loaders, shapes, waves and more. Customize colors, speed and size, then copy or download.

SVG Library

Color 1

#a855f7

Color 2

#6366f1

Duration: 1.5s

Stroke: 3px

Size: 64px

SVG

<svg width="64" height="64" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
  <circle cx="25" cy="25" r="20" fill="none" stroke="#6366f1" stroke-width="3" opacity="0.2"/>
  <circle cx="25" cy="25" r="20" fill="none" stroke="#a855f7" stroke-width="3" stroke-linecap="round" stroke-dasharray="80, 200" stroke-dashoffset="0">
    <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1.5s" repeatCount="indefinite"/>
  </circle>
</svg>

Usage

<!-- Inline -->
<div dangerouslySetInnerHTML={{ __html: `<svg width="64" height="64" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">...` }} />

<!-- As image -->
<img src="data:image/svg+xml,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20vi..." alt="animated svg" />

<!-- As file -->
<img src="/spinner-ring.svg" alt="animated svg" />