客户端（模板文字）生成的 SVG 精灵表动画工具？

Question

Sarah Drasners 的帖子是 (SVG) 动画的一个很好的起点：
https://www.smashingmagazine.com/2015/03/different-ways-to-use-svg-sprites-in-animation/

以这些知识为基础； 一段时间以来，我一直在尝试客户端生成 SVG 动画。

问题：有没有（Github）库可以做到这一点？
我找不到任何，好的搜索词很难，结果充满了图标（符号）精灵表，这是我不追求的。

我有一个概念证明（非在线）<svg-spriter> 可转换模板文字字符串的网络组件：

<svg-spriter duration="1s" width="250px" background-color="lightgrey" style="--steps:23;">
    <ellipse cx='50' cy='${70 - ease(36)}' 
             rx='${ framenr > 11 ? minmax(30,41 - ease(10)) : 30}' 
             ry='${minmax(30,30 - ease(30))}' 
             fill='none' stroke='black' stroke-width='5'></ellipse>
    <text y='12'>n:${framenr}</text>
</svg-spriter>

变成一个完整的精灵表动画（背景图片网址中的SVG）

玩 PoC 很有趣；但我想知道把它带到 Working Model 或 Alpha 并放到 Github 上是否值得。

<style>
  div {
    display: inline-flex;
    width: 250px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 100' width='100'%3E%3Cg transform='translate(0 0)'%3E%3Cellipse cx='50' cy='34' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:0%3C/text%3E%3C/g%3E%3Cg transform='translate(100 0)'%3E%3Cellipse cx='50' cy='34.25' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:1%3C/text%3E%3C/g%3E%3Cg transform='translate(200 0)'%3E%3Cellipse cx='50' cy='35' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:2%3C/text%3E%3C/g%3E%3Cg transform='translate(300 0)'%3E%3Cellipse cx='50' cy='36.25' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:3%3C/text%3E%3C/g%3E%3Cg transform='translate(400 0)'%3E%3Cellipse cx='50' cy='38' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:4%3C/text%3E%3C/g%3E%3Cg transform='translate(500 0)'%3E%3Cellipse cx='50' cy='40.25' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:5%3C/text%3E%3C/g%3E%3Cg transform='translate(600 0)'%3E%3Cellipse cx='50' cy='43' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:6%3C/text%3E%3C/g%3E%3Cg transform='translate(700 0)'%3E%3Cellipse cx='50' cy='46.25' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:7%3C/text%3E%3C/g%3E%3Cg transform='translate(800 0)'%3E%3Cellipse cx='50' cy='50' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:8%3C/text%3E%3C/g%3E%3Cg transform='translate(900 0)'%3E%3Cellipse cx='50' cy='54.25' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:9%3C/text%3E%3C/g%3E%3Cg transform='translate(1000 0)'%3E%3Cellipse cx='50' cy='59' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:10%3C/text%3E%3C/g%3E%3Cg transform='translate(1100 0)'%3E%3Cellipse cx='50' cy='64.25' rx='30' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:11%3C/text%3E%3C/g%3E%3Cg transform='translate(1200 0)'%3E%3Cellipse cx='50' cy='70' rx='41' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:12%3C/text%3E%3C/g%3E%3Cg transform='translate(1300 0)'%3E%3Cellipse cx='50' cy='64.25' rx='39.40277777777778' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:13%3C/text%3E%3C/g%3E%3Cg transform='translate(1400 0)'%3E%3Cellipse cx='50' cy='59' rx='37.94444444444444' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:14%3C/text%3E%3C/g%3E%3Cg transform='translate(1500 0)'%3E%3Cellipse cx='50' cy='54.25' rx='36.625' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:15%3C/text%3E%3C/g%3E%3Cg transform='translate(1600 0)'%3E%3Cellipse cx='50' cy='50' rx='35.44444444444444' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:16%3C/text%3E%3C/g%3E%3Cg transform='translate(1700 0)'%3E%3Cellipse cx='50' cy='46.25' rx='34.40277777777778' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:17%3C/text%3E%3C/g%3E%3Cg transform='translate(1800 0)'%3E%3Cellipse cx='50' cy='43' rx='33.5' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:18%3C/text%3E%3C/g%3E%3Cg transform='translate(1900 0)'%3E%3Cellipse cx='50' cy='40.25' rx='32.736111111111114' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:19%3C/text%3E%3C/g%3E%3Cg transform='translate(2000 0)'%3E%3Cellipse cx='50' cy='38' rx='32.111111111111114' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:20%3C/text%3E%3C/g%3E%3Cg transform='translate(2100 0)'%3E%3Cellipse cx='50' cy='36.25' rx='31.625' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:21%3C/text%3E%3C/g%3E%3Cg transform='translate(2200 0)'%3E%3Cellipse cx='50' cy='35' rx='31.27777777777778' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:22%3C/text%3E%3C/g%3E%3Cg transform='translate(2300 0)'%3E%3Cellipse cx='50' cy='34.25' rx='31.069444444444443' ry='30' fill='none' stroke='black' stroke-width='5'%3E%3C/ellipse%3E%3Ctext y='12'%3En:23%3C/text%3E%3C/g%3E%3C/svg%3E");
    background-size: auto 250px;
  }
  div::before {
    content: "";
    padding-top: 100%;
  }
  div {
    background-color: lightgrey;
    animation: moveX 1s steps(23) Infinite;
  }
  @keyframes moveX {
    to {
      background-position: -5750px;
    }
  }
</style>
<div></div>

更多示例：

此处没有动画 SO 片段；清理 HTML 使其作为片段运行需要一些手动编辑。

问题：是否有可能将 原始 SVG spritesheet 转换为动画 GIF？

吃豆子：

<g fill='yellow'>
  <g transform='rotate(${ - ease(45)} 50 50)'>
    <path d='m90 50a1 1 0 0 0 -80 0'></path>
    <ellipse cx='60' cy='30' rx='${5 + ease(1)}' ry='${5 - ease(2)}' fill='black'></ellipse> 
  </g>
  <path transform='rotate(${ease(45)} 50 50)' d='m10 50a1 1 0 0 0 80 0'></path>
</g>
<text y='99'>n:${framenr}</text>

Facebook 竖起大拇指

<circle cx='50' cy='50' r='40' fill='royalblue'></circle>
<path transform='rotate(${ease(-15)} 50 50)' fill='white' 
d='m32 45h-8c-1 0-2 1-2 2v24c0 1 1 2 2 2h8c1 0 2-1 2-2v-23c0-1-1-2-2-3zm-4 25c-1 0-2-1-2-2s1-2 2-2s2 1 2 2s-1 2-2 2zm32-39c0 4-3 7-3 9h10c3 0 6 3 6 6c0 2-1 4-2 5l0 0c1 2 1 6-1 8c1 3 0 6-2 7c0 2 0 3-1 4c-1 4-6 4-10 4l0 0c-5 0-9-2-12-3c-2-1-4-2-5-2c-1 0-1-1-1-1v-21c0 0 0-1 0-1c4-4 6-8 9-11c1-1 2-4 3-6c-1-2 0-6 2-6c2 0 7 1 7 8z'>
</path>