Dev.To <sprite-meister> Bounce

by WebComponents

HTML

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

<sprite-meister id="bounce" duration="1s" steps="24">
      <ellipse
        cx="50"
        cy="${70 - ease({distance:36})}"
        rx="${ framenr > 11 ? minmax({value:30,min:41 - ease({distance:10})}) : 30}"
        ry="${minmax({value:30,min:30 - ease({distance:30})})}"
        fill="none"
        stroke="red"
        stroke-width="5"
      ></ellipse>
      <text y="12">n:${framenr}</text>
</sprite-meister>

<h1>
The SVG created:
</h1>

<svg style="background:hotpink" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 100'><g transform='translate(0 0)'><ellipse cx='50' cy='34' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'></ellipse><text y='12'>n:0</text></g><g transform='translate(100 0)'><ellipse cx='50' cy='34.2' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'></ellipse><text y='12'>n:1</text></g><g transform='translate(200 0)'><ellipse cx='50' cy='35' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'></ellipse><text y='12'>n:2</text></g><g transform='translate(300 0)'><ellipse cx='50' cy='36.2' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'></ellipse><text y='12'>n:3</text></g><g transform='translate(400 0)'><ellipse cx='50' cy='38' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'></ellipse><text y='12'>n:4</text></g><g transform='translate(500 0)'><ellipse cx='50' cy='40.2' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'></ellipse><text y='12'>n:5</text></g><g transform='translate(600 0)'><ellipse cx='50' cy='43' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'></ellipse><text y='12'>n:6</text></g><g transform='translate(700 0)'><ellipse cx='50' cy='46.2' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'></ellipse><text y='12'>n:7</text></g><g transform='translate(800 0)'><ellipse cx='50' cy='50' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'></ellipse><text y='12'>n:8</text></g><g...

CSS

body{
  background:beige;
}