An SVG animation tool for idiots?

Question

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 · Accepted Answer

Draw 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#-diag...

8toast · Answer

Here are some free SVG animation maker:https://bestsnip.com/svg_animation/ (my site)https://www.expressivesuite.com/products/expressive-animator...https://glaxnimate.mattbas.org/