Animated robot avatars that play inside a plain image.

Pick eyes, a mouth, and a skin texture, or let a seed draw the face for you. The motion lives in the SVG, so it runs in an img tag, a CSS background, or a script from jsDelivr.

Features

Motion inside the image
— CSS keyframes are part of the SVG, so the face moves with no extra stylesheet
Official Bottts art
— Eyes, mouths, and textures from Bottts by Pablo Stanley, free for personal and commercial use
One seed, one face
— The same seed always draws the same avatar
Random on demand 
— Leave the seed off, and each call returns a new bottt
Full official set 
— 14 eyes, 9 mouths, 8 skin textures, and 24 background colors
Script tag or import 
— Load the minified build from jsDelivr, or import the module
Reduced motion 
— Animation stops when the visitor prefers less motion

Requirements

Browser: any current browser that shows SVG in an image 
Runtime: none 
Module: Node for a local build; the CDN script needs no install

Info

Current Version: 6.2.1

Packages

npm – @mcpherson-media/bottts-animated
GitHub – mcphersonjr/bottts-animated
jsDelivr – npm file • GitHub file

Artwork is a remix of Bottts by Pablo Stanley. The animation layer is © McPherson Media, LLC.