Does an animated SVG need a script to play?

No. The animation is CSS inside the file. A few lines of script only help pause it while it is off screen.

Lottie plays animations exported from After Effects through a player library. An SVG with CSS animation needs no player and can follow your page's colours. For illustrations that explain an idea, plain SVG is usually the lighter choice.

Will it look sharp on a large screen?

Yes. An SVG is drawn at whatever size it is shown, so it is crisp on every screen.

Animated SVG on product sites.

An animated SVG is an illustration written as code, with CSS animation inside the file, so parts of it move without a video or a player. It stays sharp at any size, can take its colours from your page, and can be paused or stilled with a few lines of CSS.

What an animated SVG is

An SVG is shapes, lines and text that the browser draws at any size. Add CSS keyframes inside it and parts of it move: a packet travels a wire, a gauge fills, a queue moves up one.

Because it is code, it can use your site's colours, switch with your light and dark modes, and show a still frame to people who ask for less motion.

Three ways to put one on a page

As an image: <img src="queue.svg" alt="...">. The simplest. It animates, but it cannot read your page's colours and you cannot pause it from the page.
Inline: paste the <svg> into your HTML. It can follow your theme's colours, and your page can pause it.
As a React component: the inline SVG, packaged so you write <IllosQueue /> where you want it.

npx shadcn@latest add https://illos.dev/r/isometric/queue.json

That command adds a free Illos illustration to a React project as a component, ready to place.

Respect reduced motion, and pause it off screen

Some people turn on reduced motion in their system settings. Give them the still frame:

@media (prefers-reduced-motion: reduce) {
  .illo * { animation: none !important; }
}

An illustration nobody can see has no reason to move. Pause it when it scrolls away:

const svg = document.querySelector(".illo");
new IntersectionObserver(([entry]) => {
  svg.style.setProperty("--play", entry.isIntersecting ? "running" : "paused");
}).observe(svg);

/* in the SVG's CSS */
.illo * { animation-play-state: var(--play, running); }

Every Illos illustration does both already.

Keep one style across the site

One illustration is easy. The tenth is where sites fall apart: a different line weight, a different palette, a different idea of what moves. Ask a coding agent for illustrations on two different days and you get two different hands.

Illos solves that with themes. Each theme has a library to start from and skills that teach any coding agent its rules, so the illustration it makes next month matches the one you added today.

Start with a free one

Browse the 61 illustrations in the library. The 30 spots are free for personal and commercial work, with no credit and no account.

Browse free illustrations

Questions

Does an animated SVG need a script to play?: No. The animation is CSS inside the file. A few lines of script only help pause it while it is off screen.
SVG or Lottie?: Lottie plays animations exported from After Effects through a player library. An SVG with CSS animation needs no player and can follow your page's colours. For illustrations that explain an idea, plain SVG is usually the lighter choice.
Will it look sharp on a large screen?: Yes. An SVG is drawn at whatever size it is shown, so it is crisp on every screen.

Last checked 14 October 2026.