Apply animated SVG as element border

by Haze32

HTML

<div style="width: 100px">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    id="Layer_1"
    version="1.1"
    viewBox="0 0 400 400"
    preserveAspectRatio="xMidYMid"
    width="NaN"
    height="NaN"
    style="
      fill: rgb(0, 0, 0);
      stroke: none;
      stroke-width: 1px;
      stroke-linejoin: miter;
      stroke-linecap: butt;
      stroke-miterlimit: 4;
      opacity: 1;
      filter: none;
    "
  >
    <defs id="defs5266" />
    <polygon
      points="351.9 51.5 323 40 323 37 317 37 317 165 323 165 323 86 351.9 74.5 380.9 63 351.9 51.5"
      id="polygon7143"
      style="
        fill: rgb(0, 0, 0);
        stroke: none;
        stroke-width: 1px;
        stroke-linejoin: miter;
        stroke-linecap: butt;
        stroke-miterlimit: 4;
        opacity: 1;
        filter: none;
      "
    >
      <animateTransform
        attributeName="transform"
        attributeType="auto"
        type="rotate"
        values="0 320 156.5;15 320 156.5;0 320 156.5;-15 320 156.5;0 320 156.5"
        calcMode="spline"
        keyTimes="0;0.24752475247524752;0.49455445544554455;0.7425742574257426;1"
        keySplines="0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1"
        dur="2.02s"
        begin="0s"
        repeatCount="indefinite"
        additive="sum"
        accumulate="none"
        id="animateTransform6476"
        style="
          stroke: none;
          stroke-width: 1px;
          stroke-linejoin: miter;
          stroke-linecap: butt;
          stroke-miterlimit: 4;
          opacity: 1;
          filter: none;
          fill: rgb(0, 0, 0);
        "
      />
    </polygon>
    <path
      d=" M 332,158 h -36 v 216 h -12 v -171 h -48 v 171 h -12 v -126 h -48 v 126 h -12 v -81 h -25 c 3.6 -1.2,6.7 -4.3,7.9 -9.5,2.1 -9.2,3.7 -21.9,4.8 -31.5 0.8 -6.7,1.2 -10.2 -4.7 -14.7 l -21.9 -12.3 0.5 -8.2 c 1.9,1.5,3.5,3.1,5.8,4,4.8,1.8,19.8,5.3,25,5.9,6.8 0.9,14 -1.4,15 -9.1,2 -15.8 -19.8 -14.1 -29.6 -17.8 -8.7 -8.3 -16.4 -22.4 -28.7 -25.3 0.5,0,1,0,1.6 -0.1,21.8 -2.6,23.1...

JavaScript

let paused = false;

// Pause all svgs on load
const handleSVGLoad = (e) => {
  e.target.pauseAnimations();
  paused = true;
}

const svgs = document.querySelectorAll('svg');
[...svgs].forEach(svg => svg.addEventListener('load', handleSVGLoad));

// start all svgs playing
const button = document.querySelector('button');
button.addEventListener('click', () => {
  [...svgs].forEach(svg => {
    paused ? svg.unpauseAnimations() : svg.pauseAnimations();
  })
  paused = !paused;
})