Free · No CSS or SMIL · No signup · No upload

Animate an SVG online, no code

SVG can be animated with CSS keyframes, SMIL, or a JavaScript library, but all three mean hand-writing timing and easing and re-checking them in every browser. The alternative is to animate visually and ship the result as a Lottie: paste your SVG into Lotiqlab, keyframe the paths on a timeline, and export .json or .lottie that a player runs identically everywhere. If you need pixels instead, export GIF, MP4, or WebM from the same file.

How it works

  1. Paste your SVG onto the canvas (Cmd+V straight from Figma or Illustrator) or drop the .svg file in — each path becomes an editable shape layer.
  2. Set each layer's anchor point where you want it to pivot, and group the pieces that should move together.
  3. Keyframe on the timeline: position, scale, rotation, opacity, fill colour, stroke width, or trim paths for a self-drawing line, then tune the easing curves.
  4. Export as Lottie JSON or dotLottie to embed with a player, or render GIF, MP4, or WebM if you need a flat file.

By the numbers

No CSS or SMIL
Set keyframes visually on a timeline instead of hand-writing @keyframes, animateTransform, or a GSAP tween
Consistent playback
A Lottie player renders the same timing and easing across browsers, where SMIL support and CSS behaviour still vary
0 uploads
The SVG is parsed and animated in your browser, so nothing is sent to a server

Frequently asked questions

How do I animate an SVG without writing code?

Paste the SVG into Lotiqlab, set keyframes on the timeline for the properties you want to move, and export. You never touch CSS, SMIL, or a JavaScript animation library, and there is nothing to install.

Should I use CSS, SMIL, or Lottie to animate SVG?

CSS is fine for a hover or a simple transform you can express in a few lines. SMIL is powerful but its support has been shaky for years. Lottie is the better fit for anything with real choreography — several elements, staggered timing, custom easing — because you author it visually and one player runs it the same way everywhere.

Can I animate individual paths inside the SVG?

Yes. The import turns each path, group, and shape into its own layer, so you can animate them independently, reorder them, and recolour them one by one.

Can I export the animation back as an animated SVG?

No — Lotiqlab's animation exports are Lottie JSON, dotLottie, GIF, MP4, and WebM. You can export a single frame as a static SVG, but the motion itself ships as Lottie or as video.

Does trim path work for a self-drawing line effect?

Yes. Animate a stroke's trim start and end over time and the line draws itself — the standard technique for signatures, outlined icons, and route or map reveals.