Auto playing SVG keyframe animation

readme.md

SVG file embedded with Javascript <script> to play a keyframed animation. Looks for layers named frame_X, where X is parsed as the frame number.

You can add the following HTTP query paramaters for additional control:

• fps (default: 12)
• reload (default: false) - Reload after one full animation

The rotating star is not the best example, since rotation can be done by SVG animations. I may update this with a proper example at some point.

Based on https://www.reddit.com/r/Inkscape/comments/ut05ra/keyframe_animation_svg_open_in_browser_to_play/

script.js

let fps = 12;
let reload = false

const frames = [];

let frameCount = 0;

function draw_frame() {
    frames[frameCount].style.display = "inline";
    frames[(frames.length + frameCount - 1) % frames.length].style.display = "none";
    frameCount++;
    if (reload && frameCount >= frames.length) {
        location.reload()
    }
    frameCount %= frames.length;
}

function set_fps(new_fps) {
    fps = new_fps
    clearInterval(animate_id)
    animate_id = setInterval(draw_frame, 1000 / fps);
}

function get_frame_number(el) {
    return parseInt(el.getAttribute('inkscape:label').substring(6))
}

let animate_id;
window.onload = function () {
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    fps = parseInt(urlParams.get("fps")) || fps;
    reload = urlParams.get("reload") === "true" || false;

    frames.push(...[...document.querySelectorAll(`g[*|label^=frame_]`)]
        .sort((a, b) => get_frame_number(a) - get_frame_number(b)))

    for (let i = 0; i < frames.length; i++) {
        if (i === 0) {
            frames[i].style.display = "inline";
        } else {
            frames[i].style.display = "none";
        }
    }
    animate_id = setInterval(draw_frame, 1000 / fps);
};

star.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="1024"
   height="1024"
   viewBox="0 0 270.93333 270.93333"
   version="1.1"
   id="svg1"
   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
   sodipodi:docname="star.svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <script
     id="autoplay">let fps = 12;&#10;let reload = false&#10;&#10;const frames = [];&#10;&#10;let frameCount = 0;&#10;&#10;function draw_frame() {&#10;    frames[frameCount].style.display = &quot;inline&quot;;&#10;    frames[(frames.length + frameCount - 1) % frames.length].style.display = &quot;none&quot;;&#10;    frameCount++;&#10;    if (reload &amp;&amp; frameCount &gt;= frames.length) {&#10;        location.reload()&#10;    }&#10;    frameCount %= frames.length;&#10;}&#10;&#10;function set_fps(new_fps) {&#10;    fps = new_fps&#10;    clearInterval(animate_id)&#10;    animate_id = setInterval(draw_frame, 1000 / fps);&#10;}&#10;&#10;function get_frame_number(el) {&#10;    return parseInt(el.getAttribute('inkscape:label').substring(6))&#10;}&#10;&#10;let animate_id;&#10;window.onload = function () {&#10;    const queryString = window.location.search;&#10;    const urlParams = new URLSearchParams(queryString);&#10;    fps = parseInt(urlParams.get(&quot;fps&quot;)) || fps;&#10;    reload = urlParams.get(&quot;reload&quot;) === &quot;true&quot; || false;&#10;&#10;    frames.push(...[...document.querySelectorAll(`g[*|label^=frame_]`)]&#10;        .sort((a, b) =&gt; get_frame_number(a) - get_frame_number(b)))&#10;&#10;    for (let i = 0; i &lt; frames.length; i++) {&#10;        if (i === 0) {&#10;            frames[i].style.display = &quot;inline&quot;;&#10;        } else {&#10;            frames[i].style.display = &quot;none&quot;;&#10;        }&#10;    }&#10;    animate_id = setInterval(draw_frame, 1000 / fps);&#10;};</script>
  <sodipodi:namedview
     id="namedview1"
     pagecolor="#ffffff"
     bordercolor="#999999"
     borderopacity="1"
     inkscape:showpageshadow="2"
     inkscape:pageopacity="0"
     inkscape:pagecheckerboard="0"
     inkscape:deskcolor="#d1d1d1"
     inkscape:document-units="px"
     inkscape:zoom="0.74394518"
     inkscape:cx="366.96252"
     inkscape:cy="537.00193"
     inkscape:window-width="2560"
     inkscape:window-height="1377"
     inkscape:window-x="3432"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer2" />
  <defs
     id="defs1" />
  <g
     inkscape:label="frames"
     inkscape:groupmode="layer"
     id="layer1">
    <g
       inkscape:groupmode="layer"
       id="layer15"
       inkscape:label="frame_24"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use34"
         inkscape:transform-center-y="-11.508312"
         id="use35"
         inkscape:label="star_f24"
         transform="rotate(15,135.46666,146.97498)" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="layer14"
       inkscape:label="frame_23"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use33"
         inkscape:transform-center-x="9.6388597"
         inkscape:transform-center-y="-2.3977481"
         id="use34"
         inkscape:label="star_f23"
         transform="rotate(15,135.46666,146.97498)"
         style="display:inline" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="layer13"
       inkscape:label="frame_22"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use32"
         inkscape:transform-center-x="2.9649781"
         inkscape:transform-center-y="6.8762204"
         id="use33"
         inkscape:label="star_f22"
         transform="rotate(15,135.46666,146.97498)" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="layer12"
       inkscape:label="frame_21"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use31"
         inkscape:transform-center-x="-6.5834606"
         inkscape:transform-center-y="6.5834659"
         id="use32"
         inkscape:label="star_f21"
         transform="rotate(15,135.46666,146.97498)" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="layer11"
       inkscape:label="frame_20"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use30"
         inkscape:transform-center-x="-6.8762182"
         inkscape:transform-center-y="-2.9649734"
         id="use31"
         inkscape:label="star_f20"
         transform="rotate(15,135.46666,146.97498)" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="layer10"
       inkscape:label="frame_19"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use29"
         inkscape:transform-center-x="2.3977512"
         id="use30"
         inkscape:label="star_f19"
         transform="rotate(15,135.46666,146.97498)"
         inkscape:transform-center-y="-9.6388591" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="layer9"
       inkscape:label="frame_18"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use28"
         inkscape:transform-center-x="11.508318"
         id="use29"
         inkscape:label="star_f18"
         transform="rotate(15,135.46666,146.97498)" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="layer8"
       inkscape:label="frame_17"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use27"
         inkscape:transform-center-x="2.3977537"
         inkscape:transform-center-y="9.6388587"
         id="use28"
         inkscape:label="star_f17"
         transform="rotate(15,135.46666,146.97498)"
         style="display:inline" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="layer7"
       inkscape:label="frame_16"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use26"
         inkscape:transform-center-x="-6.8762148"
         inkscape:transform-center-y="2.9649771"
         id="use27"
         transform="rotate(15,135.46666,146.97498)"
         inkscape:label="star_f16" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="layer6"
       inkscape:label="frame_15"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use25"
         inkscape:transform-center-x="-6.5834603"
         inkscape:transform-center-y="-6.5834616"
         id="use26"
         transform="rotate(15,135.46666,146.97498)"
         inkscape:label="star_f15" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="layer5"
       inkscape:label="frame_14"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use24"
         inkscape:transform-center-x="2.964979"
         inkscape:transform-center-y="-6.8762192"
         id="use25"
         inkscape:label="star_f14"
         transform="rotate(15,135.46666,146.97498)" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="layer3"
       inkscape:label="frame_13"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use23"
         inkscape:transform-center-x="9.6388647"
         inkscape:transform-center-y="2.3977502"
         id="use24"
         style="display:inline"
         inkscape:label="star_f13"
         transform="rotate(15,135.46666,146.97498)" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="g13"
       inkscape:label="frame_12"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use22"
         inkscape:transform-center-x="5.5732522e-06"
         inkscape:transform-center-y="11.508317"
         id="use23"
         style="display:inline"
         inkscape:label="star_f12"
         transform="rotate(15,135.46666,146.97498)" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="g12"
       inkscape:label="frame_11"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use21"
         inkscape:transform-center-x="-9.6388537"
         inkscape:transform-center-y="2.3977527"
         id="use22"
         style="display:inline"
         inkscape:label="star_f11"
         transform="rotate(15,135.46666,146.97498)" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="g11"
       inkscape:label="frame_10"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use20"
         inkscape:transform-center-x="-2.9649721"
         inkscape:transform-center-y="-6.8762158"
         id="use21"
         style="display:inline"
         inkscape:label="star_f10"
         transform="rotate(15,135.46666,146.97498)" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="g10"
       inkscape:label="frame_9"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use19"
         inkscape:transform-center-x="6.5834666"
         inkscape:transform-center-y="-6.5834613"
         id="use20"
         style="display:inline"
         inkscape:label="star_f9"
         transform="rotate(15,135.46666,146.97498)" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="g9"
       inkscape:label="frame_8"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use18"
         inkscape:transform-center-x="6.8762242"
         inkscape:transform-center-y="2.964978"
         id="use19"
         style="display:inline"
         inkscape:label="star_f8"
         transform="rotate(15,135.46666,146.97498)" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="g8"
       inkscape:label="frame_7"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use17"
         inkscape:transform-center-x="-2.3977452"
         inkscape:transform-center-y="9.6388637"
         id="use18"
         style="display:inline"
         inkscape:label="star_f7"
         transform="rotate(15,135.46666,146.97498)" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="g7"
       inkscape:label="frame_6"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use16"
         inkscape:transform-center-x="-11.508312"
         inkscape:transform-center-y="4.5732522e-06"
         id="use17"
         style="display:inline"
         inkscape:label="star_f6"
         transform="rotate(15,135.46666,146.97498)" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="g6"
       inkscape:label="frame_5"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use15"
         inkscape:transform-center-x="-2.3977481"
         inkscape:transform-center-y="-9.6388547"
         id="use16"
         style="display:inline"
         inkscape:label="star_f5"
         transform="rotate(15,135.46666,146.97498)" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="g5"
       inkscape:label="frame_4"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use14"
         inkscape:transform-center-x="6.8762204"
         inkscape:transform-center-y="-2.9649731"
         id="use15"
         style="display:inline"
         inkscape:label="star_f4"
         transform="rotate(15,135.46666,146.97498)" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="g4"
       inkscape:label="frame_3"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#use13"
         inkscape:transform-center-x="6.5834659"
         inkscape:transform-center-y="6.5834656"
         id="use14"
         style="display:inline"
         inkscape:label="star_f3"
         transform="rotate(15,135.46666,146.97498)" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="g3"
       inkscape:label="frame_2"
       style="display:none">
      <use
         x="0"
         y="0"
         xlink:href="#path2"
         inkscape:transform-center-y="6.8762232"
         id="use13"
         style="display:inline;opacity:1"
         inkscape:label="star_f2"
         transform="rotate(30,135.46666,146.97498)"
         inkscape:transform-center-x="-2.9649734" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="layer2"
       inkscape:label="frame_1"
       style="display:inline;opacity:1">
      <path
         sodipodi:type="star"
         style="fill:#ffff00;stroke:#000000;stroke-width:0.969436;stroke-dasharray:none;stroke-opacity:1"
         id="path2"
         inkscape:flatsided="false"
         sodipodi:sides="5"
         sodipodi:cx="62.594215"
         sodipodi:cy="54.414291"
         sodipodi:r1="86.126549"
         sodipodi:r2="43.063274"
         sodipodi:arg1="-1.5707963"
         sodipodi:arg2="-0.94247777"
         inkscape:rounded="0"
         inkscape:randomized="0"
         d="m 62.594218,-31.712257 25.311956,51.287628 56.599256,8.224355 -40.95561,39.92185 9.66831,56.370554 L 62.594214,97.477566 11.970298,124.09213 21.638607,67.721574 -19.316999,27.799722 37.282259,19.57537 Z"
         inkscape:transform-center-y="-11.508313"
         transform="matrix(1.3308108,0,0,1.3992973,52.165604,70.833209)"
         inkscape:label="star" />
    </g>
  </g>
</svg>