Welcome to the Power Users community on Codidact!
Power Users is a Q&A site for questions about the usage of computer software and hardware. We are still a small site and would like to grow, so please consider joining our community. We are looking forward to your questions and answers; they are the building blocks of a repository of knowledge we are building together.
How do I make animated dotted lines ("marching ants") in images on my web page?
How do I make animated dotted lines ("marching ants") in images on my web page?
Some people have showed me diagrams online where the lines are animated dotted lines / animated dashed lines, where each dash moves towards the arrow-point end of the line. (I hear this kind of animated dotted line is also called "marching ants"). They claim this makes the diagrams "easier to understand" which way the data goes.
I have some SVG diagrams on my (internal) website showing the flow of data from sensors to a database to a laptop screen, with arrow-points on the lines showing which way the data flows.
What is the best practice for animating those diagrams so the marching ants show up when viewed in a web browser? (Animated GIFs? Some combination of SVG, CSS, and JavaScript?)
My diagrams are SVG files originally created in Inkscape. Do I need to switch to a full-fledged "animation studio" software?
( I want the arrows to also show the direction, so the diagram still makes sense when printed out on paper. The animation is a "progressive enhancement" of the image. ).
For this kind of diagram, I prefer a solution that animates all of the dotted lines in the diagram, rather than one that requires me to manually select and do something with each specific line in the diagram.
- Inkscape: "Animation" mentions a variety of tools used to animate SVG drawings: https://inkscape.org/learn/animation/
- TechSmith forums: "How do you create moving ants? Moving dotted lines around a shape" mentions a variety of animation tools https://support.techsmith.com/hc/en-us/community/posts/360071663671-How-do-you-create-moving-ants-Moving-dotted-lines-around-a-shape
- Some examples of images with the kinds of animated dotted lines I'm trying to create: https://blog.bytebytego.com/i/137944253/how-do-companies-ship-code-to-production ; https://medium.com/@link.gagan92/aws-elastic-load-balancer-elb-727340f7c1ba ; https://babkin-pavel.medium.com/how-to-animate-objects-along-the-path-in-figma-motion-plugin-370f3bf95e7b ; https://www.youtube.com/watch?v=MLlal_jRoXQ ; etc.
1 answer
SVG apparently has an <animate> tag which can do this.
The thing you would animate is the offset of the points/dashes on the line. This is called <stroke-dashoffset>.
It sounds like you are not writing the SVG by hand, but exporting from a program. You could of course edit the resulting SVG with a text editor. But sounds like you can also use CSS to alter it: https://css-tricks.com/svg-line-animation-works/
.path {
stroke-dasharray: 100;
animation: dash 5s linear;
}
@keyframes dash {
to {
stroke-dashoffset: 1000;
}
}
0 comment threads
0 comment threads