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.
Post History
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 y...
Answer
#1: Initial revision
by
matthewsnyderâ€
·
2023-10-23T16:44:34Z (about 1 year ago)
SVG apparently has an [`<animate>` tag](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate) which can do this.
The thing you would animate is the offset of the points/dashes on the line. This is called [`<stroke-dashoffset>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/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;
}
}
```