Shipment tracking Animated Illustration

More animated illustrations

Questions

Is this Shipment tracking animation free?

Yes. It is free for personal and commercial projects, including client work, with no attribution required.

Does it need JavaScript or a Lottie player?

No. The animation is plain CSS inside the SVG file, so it plays anywhere an SVG can be shown: an img tag, inline in HTML, in React, Vue, Webflow or WordPress. It also pauses for visitors who turn on reduced motion.

How do I change the colours?

Pick an accent colour and an outline colour on this page before you download or copy; the custom picker takes any hex code. For inline SVG you can also set the CSS variables --svm-accent and --svm-ink, or the accent and ink props on the React component.

Can I make the lines thicker or thinner?

Yes. Use the Line weight slider (0.5× to 2.5×) and every outline scales together. It is saved into the download, the embed link (?stroke=1.5) and the React stroke prop.

Can I remove the outlines?

Yes. Choose None in the Outline row for a soft, outline-free look. The faces are shaded a step darker so the shapes still read clearly, and labels and details stay visible. It is saved into the download, the embed link (?outline=0) and the React outline prop.

Can I add a shadow?

Yes. Choose Flat for a solid shadow in any colour, or Soft for a blurred shadow that blends with your background. Soft has Contact, Natural and Floating presets plus opacity, blur, distance and tint controls, and the result is saved into the download, the embed link and the React shadow props.

How do I add it to my website?

Paste the one-line img embed, download the SVG and use it inline, or install it in React with the shadcn command. All three keep your colours, line weight, outline and shadow settings.