Dev.To <sprite-meister> Hamburger2Arrow

by WebComponents

HTML

<script src="//sprite-meister.github.io/element.js"></script>

<sprite-meister duration="4s">
  ${ setv1( 40-ease({distance:25}) , "top and bottom X position" ) ,
  setv2( ease({distance:20})       , "top and bottom line to Y=50" )
  }
  <g stroke="black" stroke-width="8" stroke-linecap="round" transform="${rotate(180-ease({distance:180}))}">
    <path d="M${v1} 30L85 ${50 - v2}"></path>
    <path d="M15 50L85 50"></path>
    <path d="M${v1} 70L85 ${50 + v2}"></path>
  </g>
</sprite-meister>


<h1>
1 SVG with 24 frames:
</h1>

<svg style="background:pink" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 100'><g transform='translate(0 0)'><g stroke='black' stroke-width='8' stroke-linecap='round' transform='rotate(0 50 50)'><path d='M15 30L85 30'></path><path d='M15 50L85 50'></path><path d='M15 70L85 70'></path></g></g><g transform='translate(100 0)'><g stroke='black' stroke-width='8' stroke-linecap='round' transform='rotate(1.1999999999999886 50 50)'><path d='M15 30L85 30.1'></path><path d='M15 50L85 50'></path><path d='M15 70L85 69.9'></path></g></g><g transform='translate(200 0)'><g stroke='black' stroke-width='8' stroke-linecap='round' transform='rotate(5 50 50)'><path d='M16 30L85 30.6'></path><path d='M15 50L85 50'></path><path d='M16 70L85 69.4'></path></g></g><g transform='translate(300 0)'><g stroke='black' stroke-width='8' stroke-linecap='round' transform='rotate(11.199999999999989 50 50)'><path d='M17 30L85 31.2'></path><path d='M15 50L85 50'></path><path d='M17 70L85 68.8'></path></g></g><g transform='translate(400 0)'><g stroke='black' stroke-width='8' stroke-linecap='round' transform='rotate(20 50 50)'><path d='M18 30L85 32.2'></path><path d='M15 50L85 50'></path><path d='M18 70L85 67.8'></path></g></g><g transform='translate(500 0)'><g stroke='black' stroke-width='8' stroke-linecap='round' transform='rotate(31.19999999999999 50 50)'><path d='M19 30L85 33.5'></path><path d='M15 50L85 50'></path><path d='M19 70L85 66.5'></path></g></g><g...