Dev.To <sprite-meister> Ghosts

by WebComponents

HTML

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

<template spritemeister id="ghost" duration=".5s" steps="24" ghostcolor="hotpink">
  ${setv1(ease({distance:1}),"squeeze eyes")} 
  ${setv2(ease({distance:1}),"bounce eyes")} 
  ${setv3(pulse({mid:2}),"bounce ghost")} 
  ${setv4(pulse({start:0,mid:2}),"wiggle skirt")} 
  <g transform="skewY(${v3})">
    <path fill="${attr('ghostcolor','red')}"
          d="M82 94 c7-13 4-44 1-65s-40-55-63-1 c-7 22-7 53-3 66
             l${v4}-11 l7 11l8-13l8 13l8-12l8 12l7-12z"></path>
    <g id="eye${framenr}" transform="translate(0 ${v2})">
      <ellipse fill="white" cx="${58 + v1}" cy="${30 + v1}" rx="${5 + v1}" ry="${5 - v1}"></ellipse>
      <ellipse fill="black" cx="${60 + v1}" cy="${30 + v1}" rx="${1 + v1}" ry="${2 - v1}"></ellipse>
    </g>
    <use x="0" y="36" href="#eye${framenr}" transform="rotate(180 50 50)"></use>
    <text x="25" y="75">${attr("id")} </text>
  </g>
</template>

<sprite-meister id="Blinky" template="ghost" ghostcolor="red"></sprite-meister>
<sprite-meister id="Pinky" template="ghost" ghostcolor="hotpink"></sprite-meister>
<sprite-meister id="Inky" template="ghost" ghostcolor="cyan"></sprite-meister>
<sprite-meister id="Clyde" template="ghost" ghostcolor="orange"></sprite-meister>

CSS

body{
  background:black;
}