Skip to main content

Animating edges in SVG

· 2 min read
Simon Porritt

We've had a few queries recently regarding the possibility of adding support for animated edges to the Toolkit. Like this:

We've never exposed an API to do this because it's never really occurred to us do so, given that achieving this effect is about as easy as falling off a log. There are three parts to this:

1. Define the CSS animation

Define a CSS animation with a single keyframe that sets the dash offset:

@keyframes dashdraw {
0% {
stroke-dashoffset:10;
}
}

2. Map the animation to a CSS rule

.animated-edge {
stroke-dasharray:5;
animation: dashdraw .5s linear infinite;
}

3. Use the cssClass property in an edge definition to map to this class

toolkit.render(someContainer, {
...,
view:{
edges:{
animated:{
cssClass:"animated-edge"
}
}
},
...
})
Animated Edges

That's it! That's all you need to do. As easy as falling off a log.

Library support

We tend to avoid polluting the Toolkit with functionality that is easily created such as this is, but if you're a licensee or evaluator of the Toolkit - or just someone with an opinion - and you've got suggestions for how we could usefully build support for this into the library, we'd definitely like to hear them.


Start a free trial

Sending your evaluation request...

Interested in the concepts discussed in this article? Start a free trial and see how jsPlumb can help bring your ideas to market in record time.


Get in touch!

If you'd like to discuss any of the ideas/concepts in this article we'd love to hear from you - drop us a line at hello@jsplumbtoolkit.com.