4 ms·
Ask HN: An SVG animation tool for idiots?
Hello HN!
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 :)
- efortis 5y agoDraw the diagram in e.g. Inkscape and add `class="animatedLine"` to the desired paths (select the path and hit CMD+Shift+X). 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) } } https://blog.uidrafter.com/freebsd-jails-network-setup#-diagram-network https://blog.uidrafter.com/freebsd-jails-network-setup#-diag...
- efortis 5y agoThe previous function only works for Chrome, these one works for Chrome, FF, and Safari 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) } }
- linkdd 5y agoThanks, 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 :)
- efortis 5y agoNice, what'd you use for drawing it?
- linkdd 5y agoVanilla JS API: <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> The result can be seen here: http://bd2e-77-141-81-91.ngrok.io http://bd2e-77-141-81-91.ngrok.io (I'll shut down the ngrok in a few hours)
- 8toast 5y agoHere are some free SVG animation maker: https://bestsnip.com/svg_animation/ https://bestsnip.com/svg_animation/ (my site) https://www.expressivesuite.com/products/expressive-animator.html https://www.expressivesuite.com/products/expressive-animator... https://glaxnimate.mattbas.org/ https://glaxnimate.mattbas.org/