SVG Animation Generator

Create animated SVGs with CSS animations

Browser ProcessingYour data never leaves your browser

Input SVG

Animation Type

Animation Settings

Duration2s
Timing Function
Iteration
Rotation (degrees)360°

Preview

Animated SVG Code 

 CSS Animation (Alternative) 
@keyframes svg-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animated-svg {
  animation: svg-rotate 2s ease-in-out infinite;
  transform-origin: center;
}
Related Tools
SVG Blob GeneratorGenerate organic blob shapes for backgrounds
SVG Wave GeneratorGenerate wave patterns for website sections
SVG Pattern GeneratorGenerate repeating SVG patterns for backgrounds
SVG OptimizerOptimize and minify SVG files for smaller size