Animated SVG Avatars

Give profile pictures a little life. Animated DiceBear styles carry a looping CSS animation inside the SVG, and a single option turns it on. A plain img tag is enough to play it.

Try Playground See the Styles

16 Animated Styles

Every avatar below is a live SVG playing its own looping CSS animation. Click a style to see its options.

Motion Without the Weight

Animated profile pictures usually mean heavy GIFs or video files. DiceBear animates the SVG itself instead.

CSS-Only Animation

The keyframes live inside the SVG itself. There is nothing to export or encode, and nothing extra to load at runtime.

Plays in an img Tag

Browsers run CSS animations in SVG images, so a plain img element or CSS background is enough. You embed animated avatars exactly like static ones.

Reduced Motion Built In

Every animation sits behind a prefers-reduced-motion media query. Visitors who turn off motion in their system settings get a static avatar instead.

Off by Default

Avatars render static unless you request motion, so nothing in an existing integration starts moving just because a style supports animation.

Still Deterministic

The same seed returns the same avatar, animated or not. Changing the speed changes the motion, never the artwork.

A Few Kilobytes

A looping animated avatar weighs a fraction of a comparable GIF or video and stays sharp at every size, from favicon to full screen.

One Option, Six Speeds

Animation is a regular variant option. Pick a speed from slowest to fastest, or leave it out for a static avatar.

Animation Speed

HTTP API

https://api.dicebear.com/10.x/planets/svg?seed=Felix&animationVariant=medium

JavaScript

import { Style, Avatar } from '@dicebear/core';
import planets from '@dicebear/styles/planets.json' with { type: 'json' };

const style = new Style(planets);
const svg = new Avatar(style, {
  seed: 'Felix',
  animationVariant: 'medium',
}).toString();

API Documentation All Options

For a random speed per avatar, filter variants with tags=animation instead.