Ask HN: An SVG animation tool for idiots?

[linkdd]

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]

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...

[efortis → efortis]

The 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 → efortis]

Thanks,

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 → linkdd]

Nice, what'd you use for drawing it?

[linkdd → efortis]

Vanilla 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

(I'll shut down the ngrok in a few hours)

[efortis → linkdd]

Yeah! looks awesome and fresh.

[linkdd → efortis]

Thanks!

The design is inspired by star trek's LCARS (the computer interface in The Next Generation) ^^

[8toast]

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/