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;
}
 About SVG Animation Generator
Create animated SVGs with CSS animations
 Use this free online svg tools tool to work faster without installing extra software. The interface is built for quick input, clear output, and straightforward results on desktop and mobile devices. 
 Processing 
This tool runs in your browser whenever possible, which keeps your inputs private and reduces unnecessary round-trips to the server.
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