Free Animated SVG Illustrations

Animated illustrations for SaaS, tech and product websites, drawn in code. Each one is a single SVG file with the animation inside: no JavaScript, no Lottie player, just a few kilobytes. Pick a colour, then download, embed or install it in React.

Colour
AI chatbot animation
AI chatbotIsometric
AI chatbot animationAI assistant
AI chatbotFlat line
API request animation
API requestIsometric
API request animation
API requestFlat line
Database animation
DatabaseIsometric
Database animation
DatabaseFlat line
Deployment pipeline animationbuildtestdeploy
Deployment pipelineIsometric
Deployment pipeline animationBuildTestDeployLive!
Deployment pipelineFlat line
Job queue animation
Job queueIsometric
Job queue animationworker
Job queueFlat line
Rate limiting animationlimit 2 / s
Rate limitingIsometric
Rate limiting animationlimit 2 / s
Rate limitingFlat line
Server monitoring animationuptime 99.9%
Server monitoringIsometric
Server monitoring animationAll systems normal
Server monitoringFlat line
Webhooks animation
WebhooksIsometric
Webhooks animationwebhook
WebhooksFlat line
Cloud sync animation
Cloud syncIsometric
Cloud sync animation
Cloud syncFlat line
File upload animation
File uploadIsometric
File upload animation
File uploadFlat line
404 error animation404
404 errorIsometric
404 error animation404page not found
404 errorFlat line
Analytics animation
AnalyticsIsometric
Analytics animation
AnalyticsFlat line
Email sent animation1
Email sentIsometric
Email sent animation
Email sentFlat line
Notifications animation
NotificationsIsometric
Notifications animation
NotificationsFlat line
Online payment animation
Online paymentIsometric
Online payment animation
Online paymentFlat line
Search animation
SearchIsometric
Search animation
SearchFlat line
Team collaboration animation
Team collaborationIsometric
Team collaboration animation
Team collaborationFlat line
Data encryption animation
Data encryptionIsometric
Data encryption animationhelloencrypted
Data encryptionFlat line
Login & authentication animation
Login & authenticationIsometric
Login & authentication animationSign in
Login & authenticationFlat line
Two-factor authentication animation
Two-factor authenticationIsometric
Two-factor authentication animationYour code
Two-factor authenticationFlat line

Three ways to use them

Embed with an img tag

Paste <img src="https://sketchvalley.com/motion/api-request-isometric.svg"> and the animation plays. Add ?accent=12b886 to change the colour.

Download the SVG

Use it inline in HTML, Webflow, Framer or WordPress. Set the CSS variable --svm-accent to recolour it from your own stylesheet.

Install in React

Copy the component, or run one npx shadcn@latest add command from any illustration's page. It takes an accent prop.

Questions

Are these animated illustrations free?
Yes. Every animation is free for personal and commercial use, including client projects, with no attribution required.
How are they animated?
With CSS inside the SVG file. There is no JavaScript, no Lottie player and no GIF, so each file is only a few kilobytes and stays sharp at any size.
Can I use them in React or Next.js?
Yes. Every illustration can be copied as a React component or installed with one shadcn command, and it takes an accent prop for the colour.
Can I change the colours?
Yes. Pick an accent colour on the page before downloading, add ?accent=hex to the embed link, or set the CSS variable --svm-accent.
Buy me a coffee