Dev.To <sprite-meister> PacMan

by WebComponents

HTML

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

<sprite-meister duration="1s">
  ${ setv1( pulse({mid:45}) ,"rotation" ),
     setv2( ease({distance:1}) ,"squint eye")
  }
  <g fill="yellow">
    <g transform="rotate(${ -v1 } 50 50)">
      <path d="m90 50a1 1 0 0 0 -80 0"></path>
      <ellipse cx="60" cy="30" rx="${5 + v2}" ry="${5 - v2}" fill="black"></ellipse>
    </g>
    <path transform="rotate(${v1} 50 50)" d="m10 50a1 1 0 0 0 80 0"></path>
  </g>
</sprite-meister>

CSS

body{
  background:black;
}
sprite-meister{
  zoom:4;
}