I want to create a small animation that looks like the graph on https://playground.tensorflow.org/ (hit play to see the animation).
I have a few images that I want to connect with those "animated paths". I need to be able to export this as a SVG file.
Is there a tool out there that can help me?
Thank you :)
BTW, in Inkscape, you can Path -> Reverse if it's animated the wrong way.
document.querySelectorAll('.animatedLine').forEach(animateLine)
function animateLine(elem) {
elem.style.strokeDasharray = '6 1'
elem.style.strokeDashoffset = elem.getTotalLength()
requestAnimationFrame(anim)
function anim() {
elem.style.strokeDashoffset -= 0.2 // speed
requestAnimationFrame(anim)
}
}
function animateLine(elem) {
var offset = 0
elem.style.strokeDasharray = '6 1'
elem.style.strokeDashoffset = offset;
requestAnimationFrame(anim)
function anim() {
offset -= 0.2
elem.style.strokeDashoffset = offset
requestAnimationFrame(anim)
}
}For me Inkscape is insanely hard to use, I ended up using a canvas and drawing directly in it.
The 2D context API provides the `lineDashOffset` property as well, so it works fine :)
<canvas id="my-canvas"></canvas>
<div style="display: none;">
<img id="asset-foo" src="/img/foo.svg" />
<!-- ... -->
</div>
<script defer type="application/javascript">
window.addEventListener("DOMContentLoaded", () => {
const canvas = document.getElementById("my-canvas")
const context = canvas.getContext("2d")
const fooAsset = document.getElementById("asset-foo")
// ...
const frame = () => {
canvas.clearRect(0, 0, canvas.width, canvas.height)
// NB: this will fail if image could not be loaded by the browser
context.drawImage(fooAsset, x, y, w, h)
// ...
requestAnimationFrame(frame)
}
requestAnimationFrame(frame)
})
</script>
(I'll shut down the ngrok in a few hours)
The design is inspired by star trek's LCARS (the computer interface in The Next Generation) ^^
https://bestsnip.com/svg_animation/ (my site)
https://www.expressivesuite.com/products/expressive-animator...