SpriteMeister Muybridge horse

by WebComponents

HTML

The <a href="https://dev.to/dannyengelman/create-svg-spritesheet-animations-with-1-template-literal-string-3hee">SpriteMeister Web Component</a>
 turns a <i>spritesheet</i> (all frames in one file) into an animation
<script src="https://sprite-meister.github.io/element.js"></script>

<h3>&lt;sprite-animation duration="3s" src=".../spritesheets/muybridge_horse.jpg"&gt;</h3>
<h4>JPG spritesheet: original photographs Eadweard Muybridge shot in 1872</h4>
<img src="https://sprite-meister.github.io/spritesheets/muybridge_horse.jpg" style="width:90vw">

<h3>Web Component output:</h3>
<sprite-animation 
    steps="15"
    cell="183x122"
    duration="3s"
    src="https://sprite-meister.github.io/spritesheets/muybridge_horse.jpg">
</sprite-animation>

<hr>
<h3>And once you can handle a spritesheet</h3>
<h3>&lt;sprite-meister> can <b>create</b> a 24 frame SVG spritesheet <i><b>client-side</b></i></h3>
<h3>From a Template Literal String:</h3>

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

<h3>And we need 4 ghosts ofcourse; created from one &lt;template></h3>

<template spritemeister id="ghost" duration=".5s">
  ${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')}"
          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...

CSS

body{ font:18px arial;background:lightgray}
h3{margin:.5em}
h4{margin:0}