A terrible way to animate a SVG in grafana

I like to use the grafana Canvas panel. I wanted to show a simple animation. So, I grabbed a SVG and added an id to it. Like This

<g
inkscape:label=”Layer 1″
inkscape:groupmode=”layer”
id=”layer1″>
<g
id=”cycle”>

Then you can drop a Text Panel and use CSS to make it spin

#cycle {
    transform-origin: center;
    animation: swirl 10s infinite linear;
  }

  @keyframes swirl {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

And then you see 

Leave a comment