SVG animation generator
Choose a shape, colors and an effect — the animated SVG plays in the preview, and below you get the inline SVG markup together with the CSS @keyframes, ready to paste into your page.
<svg viewBox="0 0 100 100" width="160" height="160" aria-hidden="true">
<polygon
class="shape"
points="50,20.2 58.5,41.4 81.4,43 63.8,57.6 69.4,79.8 50,67.7 30.6,79.8 36.2,57.6 18.6,43 41.5,41.4"
fill="#fbbf24"
stroke="#b45309"
stroke-width="4"
stroke-linejoin="round"
stroke-linecap="round"
/>
</svg>
.shape {
transform-box: fill-box;
transform-origin: 50% 55%;
animation: spin 2s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.shape {
animation: none;
}
}How to use it
- Pick a shape — circle, square, star, heart or check mark — and set the fill color, the stroke color and the stroke width.
- Choose an effect: rotate (
rotate), pulse (scale), bounce, fade, draw the outline withstroke-dasharray, or color shift (fill and stroke swap places). - Tune the duration, delay, number of repeats, timing function and direction. The “Pause” and “Restart” buttons in the preview help you inspect the animation.
- Click “Copy” and paste the SVG into your HTML and the CSS into your stylesheet. The
prefers-reduced-motionblock is already included.
How it works
Why animate SVG with CSS
Inline SVG elements are part of the DOM, so you can style and animate them with ordinary animation and @keyframes — no JavaScript or library needed. This works for <circle>, <rect>, <path> and other shapes, but not for SVG loaded through <img> or background-image: the page CSS cannot reach into such a file, so the animation has to be written inside the SVG itself.
transform-box and transform-origin
In SVG the default transform origin is the top-left corner of the whole drawing (0 0), so a rotation swings the shape around the wrong point. transform-box: fill-box ties the origin to the shape's own bounding box, and transform-origin: center puts it in the middle. A five-point star is bottom-heavy: its visual center sits at about 55% of the box height, so the generator uses 50% 55% for it.
.shape {
transform-box: fill-box;
transform-origin: center;
}Drawing a stroke: dasharray and dashoffset
stroke-dasharray sets the length of dashes and gaps, stroke-dashoffset shifts that pattern. If the dash is as long as the whole outline and the offset equals that length, the line is invisible; animating the offset to 0 “draws” it. The length is measured in user units: the generator uses a value slightly above the outline length so no dot is left at the end. For your own shape you can get the length with getTotalLength(). On filled shapes the generator also fades the fill in with fill-opacity.
@keyframes draw {
from { stroke-dashoffset: 177; }
to { stroke-dashoffset: 0; }
}Respect prefers-reduced-motion
Constant movement can cause discomfort for people with vestibular disorders, which is why operating systems have a “reduce motion” setting. The generator adds a @media (prefers-reduced-motion: reduce) block that turns the animation off; the base styles stay fully visible, so nothing disappears. Decorative SVG should also get aria-hidden="true".
@media (prefers-reduced-motion: reduce) {
.shape { animation: none; }
}FAQ
Can I animate an SVG used in an img tag?
Not with your page's CSS: page styles do not reach inside an <img>. Put a <style> with @keyframes into the SVG file itself, or inline the SVG into your HTML.
Why does my SVG rotate around the wrong point?
Because the default transform origin is the top-left corner of the drawing. Add transform-box: fill-box and transform-origin: center.
CSS animation or SMIL (the animate element)?
CSS is easier to combine with the rest of your styles and responds to media queries, including prefers-reduced-motion. SMIL lives inside the SVG and also works in all modern browsers, but is used less often.
Is SVG animation heavy for the browser?
Animating transform and opacity is cheap. Animating the d attribute, filters or hundreds of elements at once costs more — test on low-end phones.
