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. Pro animations are exclusive, more detailed scenes you can unlock with a Pro pass.

Colour
Outline
Shadow isometric
PRO
AI agent workflowIsometric
PRO
AI agent workflowFlat line
AI chatbot animationAI AGENT
AI chatbotIsometric
AI chatbot animationAI assistant
AI chatbotFlat line
API request animationGET /USERS200 OKCLIENT
API requestIsometric
API request animationCLIENTGET /USERS200 OK
API requestFlat line
Database animationWRITEPRIMARY DB
DatabaseIsometric
Database animationWRITEPRIMARY DB
DatabaseFlat line
Deployment pipeline animationbuildtestdeployLIVE · V2.4
Deployment pipelineIsometric
Deployment pipeline animationBuildTestDeployLive!V2.4.0
Deployment pipelineFlat line
Job queue animationQUEUE · 5WORKER
Job queueIsometric
Job queue animationQUEUE · 5WORKER
Job queueFlat line
Rate limiting animationLIMIT 2/SALLOWED
Rate limitingIsometric
Rate limiting animationLIMIT 2/SALLOWED
Rate limitingFlat line
Server monitoring animationuptime 99.9%
Server monitoringIsometric
Server monitoring animationAll systems normal
Server monitoringFlat line
Webhooks animationEVENTPOST /HOOK
WebhooksIsometric
Webhooks animationPOST /HOOKWEBHOOK
WebhooksFlat line
Data analysis animationOUTLIER3 SEGMENTS
Data analysisIsometric
Data analysis animationBY REGIONOUTLIER3 SEGMENTS
Data analysisFlat line
PRO
Data pipelineIsometric
PRO
Data pipelineFlat line
Donut chart animation72kBY SOURCE
Donut chartIsometric
Donut chart animation72kvisitsDirect 40%Search 25%Social 20%Email 15%TOTAL 72K
Donut chartFlat line
Funnel chart animationVISITS 1,000SALES 120
Funnel chartIsometric
Funnel chart animation1,000640310120
Funnel chartFlat line
Gauge meter animation72SCORE 72
Gauge meterIsometric
Gauge meter animation720100SCORE 72 / 100
Gauge meterFlat line
Line chart animation+24%
Line chartIsometric
Line chart animation+24%JANMARMAYJUL
Line chartFlat line
Market forecasting animationACTUALFORECAST +18%
Market forecastingIsometric
Market forecasting animationACTUALFORECAST +18%
Market forecastingFlat line
Pie chart animationPRODUCT A · 45%
Pie chartIsometric
Pie chart animationProduct AProduct BProduct COther45%
Pie chartFlat line
Scatter plot animationR² 0.82
Scatter plotIsometric
Scatter plot animationUSERS →↑ $R² 0.82
Scatter plotFlat line
Cloud sync animationSYNCEDPHONE
Cloud syncIsometric
Cloud sync animationSYNCED
Cloud syncFlat line
File upload animationREPORT.PDFUPLOADING
File uploadIsometric
File upload animationREPORT.PDF0%100%
File uploadFlat line
Global edge network animationEDGE · 18 MS
Global edge networkIsometric
Global edge network animationEDGE · 18 MS
Global edge networkFlat line
PRO
Checkout flowIsometric
PRO
Checkout flowFlat line
PRO
Package deliveryIsometric
PRO
Package deliveryFlat line
404 error animation404NOT FOUND
404 errorIsometric
404 error animation404page not found
404 errorFlat line
Analytics animationQ4 +32%
AnalyticsIsometric
Analytics animationQ1Q2Q3Q4Q5+32%
AnalyticsFlat line
Email sent animation1INBOX
Email sentIsometric
Email sent animationSENT
Email sentFlat line
Notifications animationNEW · 3
NotificationsIsometric
Notifications animationNEW · 3
NotificationsFlat line
Online payment animationAPPROVED
Online paymentIsometric
Online payment animationAPPROVED
Online paymentFlat line
Product launch animationIGNITIONLIFTOFF
Product launchIsometric
Product launch animationIGNITIONLIFTOFF
Product launchFlat line
Search animation3 RESULTS
SearchIsometric
Search animation3 RESULTS
SearchFlat line
Shipment tracking animationIN TRANSITARRIVED
Shipment trackingIsometric
Shipment tracking animationSHIPPEDIN TRANSITARRIVED
Shipment trackingFlat line
Team collaboration animation3 EDITING
Team collaborationIsometric
Team collaboration animation3 ONLINE
Team collaborationFlat line
Data encryption animationPLAINTEXTAES-256
Data encryptionIsometric
Data encryption animationHELLOX9#QF2AES-256
Data encryptionFlat line
PRO
Firewall blocking an attackIsometric
PRO
Firewall blocking an attackFlat line
Login & authentication animationVERIFIED
Login & authenticationIsometric
Login & authentication animationSign inVERIFIED
Login & authenticationFlat line
Two-factor authentication animationONE-TIME CODE
Two-factor authenticationIsometric
Two-factor authentication animationYour codeONE-TIME 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 and line thickness?
Yes. Pick an accent colour and an outline colour (any hex code with the custom picker) and set the line weight from 0.5× to 2.5×. Your choices are saved into the download, the embed link and the React component.
Can I add a shadow or remove the outlines on the isometric illustrations?
Yes. Choose a flat shadow in any colour, or a soft shadow that blends with your background, with Contact, Natural and Floating presets and controls for opacity, blur, distance and tint. Choose None in the Outline row for a soft look with no outlines.
Do they work for visitors who prefer less motion?
Yes. Every illustration stops animating when a visitor has turned on reduced motion in their system settings, and each SVG has a text title for screen readers.
Buy me a coffee