Inkscape.org
Share Finished Artwork Rotating shapes with SMIL
  1. #1
    Pacer Pacer @pacer🏁
    *

    This was inspired by an animation by Noah Blon (featured on CSS Tricks).

    Here is his post on codepen: https://codepen.io/noahblon/post/an-intro-to-svg-animation-with-smil

    He noted in his blog post, the animation wasn't quite right as the triangle was morphing in the wrong direction. I solved this by tilting the triangle to the left (prior to rotation), allowing it to rotate into position.

    I used Inkscape for a guide, but had to move to hand coding the shapes with cubic beziers (quadratic beziers didn't allow for a viable circle). I would love to see more control over these things within Inkscape in the future.

     

    Mophing Shapes With Smil
  2. #2
    Xav Xav @Xav👹

    For anyone wanting to experiment with SMIL further, I covered it briefly in parts 76 & 77 of my series in Full Circle Magazine (free download). More details here: https://inkscape.org/forums/tutorials/inkscape-tutorials-in-full-circle-magazine/

     

    Note that since those articles were written, Microsoft Edge has switched to using Chrome's rendering engine (and therefore, presumably, now supports SMIL), and the imminent deprecation of SMIL seems to have fallen by the wayside. I still expect it to be dropped at some point, once CSS animations fully catch up, but I'd feel a lot more confident about using it in production now than I did when I wrote those articles.