Animated SVG dynamically

Ignition
6

Agree with @PGriffith

Here is a spinner animation.

Stylesheet CSS looks like:

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

.psc-spinner {
    animation: spin 1s linear infinite;
}

Looks like:
spinner

Looks a lot better in the browser, the GIF kind of messes with the appearance of the animation.

Here is the view:

{
  "custom": {},
  "params": {},
  "props": {
    "defaultSize": {
      "height": 422,
      "width": 573
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "spinner"
        },
        "position": {
          "height": 176,
          "width": 155,
          "x": 183,
          "y": 106
        },
        "props": {
          "elements": [
            {
              "elements": [
                {
                  "elements": [
                    {
                      "offset": "0%",
                      "stopColor": "value",
                      "type": "stop"
                    },
                    {
                      "offset": "25%",
                      "stopColor": "#07c",
                      "stopOpacity": "75%",
                      "type": "stop"
                    },
                    {
                      "offset": "50%",
                      "stopColor": "#07c",
                      "stopOpacity": "50%",
                      "type": "stop"
                    },
                    {
                      "offset": "75%",
                      "stopColor": "#07c",
                      "stopOpacity": "25%",
                      "type": "stop"
                    },
                    {
                      "offset": "100%",
                      "stopColor": "#07c",
                      "stopOpacity": "5%",
                      "type": "stop"
                    }
                  ],
                  "id": "fade",
                  "type": "linearGradient",
                  "x1": "1%",
                  "x2": "80%",
                  "y1": "95%",
                  "y2": "15%"
                }
              ],
              "type": "defs"
            },
            {
              "cx": 24,
              "cy": 24,
              "fill": "transparent",
              "r": 22,
              "stroke": {
                "paint": "url(#fade)",
                "width": 4
              },
              "type": "circle"
            }
          ],
          "style": {
            "classes": "spinner"
          },
          "viewBox": "0 0 48 48"
        },
        "type": "ia.shapes.svg"
      }
    ],
    "meta": {
      "name": "root"
    },
    "type": "ia.container.coord"
  }
}

Only thing of note, is that the animation doesn't work in the designer (for whatever reason, probably has to do with when the stylesheet CSS is applied?)

Anyway, works as expected in the browser.

Apparently its SVG week.

4 Likes