Second Pass At Animated SVG BG


Uncategorized

Updated Dec 12th, 2021

Lost just short of two whole days deep diving into native SVG animation technique. I ripped apart an animation I saw in a tutorial, looked under the hood, and put it back together again. I was able to create my own version. This is the type of things that needs to live in a codepen.

Got quite a ways off track with this one but I did end up learning a lot.

There’s a Name For This Technique

It’s called SMIL and is it dead? Has it died and ben revied?! WTF. It was deprecated and the deprecation was paused. Clearly it is still a thing.

SMIL lets you do complex animations without CSS or JS by using the tag.

“Today, designers and developers can choose to animate the SVG with CSS, SMIL, or JavaScript. If they pick JavaScript, they can further choose among libraries such as GSAP, Snap.svg, SVG.js, and Velocity.js, just to name a few. And, of course, they can also pick the rough path and animate with raw JavaScript. For those avoiding coding, there are other great options, such as SVGator, Keyshape, Lottie, and SpiritApp.”

“- SMIL is now supported in all major browsers: [1]

Deep Dive Details

The overall frame is 602 by 602 with X and Y at 49 and clip content selected.


All Tracks Tracks in a Group

Group and all items show 15% pass Through.

path_0 is the Biggest Track is 600 by 600 and has X and Y at 1. No Fill. Radial Center Stroke of 1 with stop at 33% with black color and 100% with black color. The animation line is from center to bottom of the item. 0 for rotation.

path_1 is the top right chain link. It is 330.15W and 471H and X is 300.85 and Y is 1. It is 15% pass through. No Fill. Radial Center Stroke of 1 with stop at 33% with black color and 100% with black color. The animation line is 1 pixel in from center to bottom of the total frame, same as path_0. 0 for rotation. The center of the stroke touches the center of the bounding box stroke (If there was one).

path_2 is the bottom right of the chain link. Same as the others except X is 1 and Y is 130. W is 300.15 and H is 471.


All Vectors: Everything is in the top left corner of the overall frame/viewbox of 602 x 602. The center of an ellipse is in the exact top left corner of the viewbox. In the case of the lines the right most part is on the 0, 0 mark. All vectors have constraints of scale and not top left, (not sure if this does anything at all).

Individual Vectors all named “Vector” and from the top are sequnced line, circle, line, circle.

All ellipses denoted by circle graphic: All had a width and height of 2.15 pixels. 6 of the 7 ellipses had no stroke. the one that did have a stroke, the last one, had an inside solid black stroke with a width of 1. The X and Y were all 1.07 and some variation of positives and negatives. We also see the angle being added to the mix. They all had solid fills with no stroke. Ellipses 6 and 7 are black and I do not belive they were used.

1 1.07, -1.07 -90
2 -1.07, -1.07, 0
3 1.07, 1.07, 180
4 1.07, -1.07, -90
5 1.07, -1.07, -90
6 -1.07, -1.07, 0
7 -1.07, -1.07, 0 Has inside black stroke of 1

All Lines denoted by horizontal line graphic: All are 25.75 in Width and 25.78 in Height. The “line” part is the diagonal of a square. The bounding square sits like diamond. Mostly all of them have their right-most part of the line exactly on the top left corner of the viewbox.

The stroke is a center linear black stroke with a width of 1 and the gradient stops are at 0 and 1. There is no fill. The opacity/pass through is 100%.

1 -36.8, -.38, 45
2 -18.21, 18.21, -45
3 -18.23, -18.23, -135
4 -36.44, -.02, 45
5 -36.8, -0.38, 45
6 -18.21, -18.21, -45
7 -18.21, -18.21, -45

Although the angles for all lines may be different they all are at 9 o’clock if the 0, 0 mark of the viewbox was the center of a clock. The Gradient Line is the same.

Trying to recreate the triangle with the line I get the icon but can’t add height to the line?

Using the pen tool and drawing a straight line I still get the same graphics. I can get a square bounding box but the line is not on the diagonal of the square but on one of the sides.

Instead of a single line with a linear stroke gradient can’t you just have a rectangle with a linear fill gradient?


Seeing Exported SVG Code

Need to delete width and height on svg itself.

delete extra g and clip path if you used an extra artboard in Figma.

delete “rect” element if you used a white background in Figma.

stops only have offset and no other properties. There should be a stopColor and stopOpacity on both. Stop colors are added if you don’t use black as a color.

<stop offset="0.333333" stopColor="#FBFBFB" />
<stop offset="1" stopColor="white" stopOpacity="0" />

Gradients are already Linked Up with url and that’s great.

If the elements you are animating along the path are self closing you need to convert to having closing tag because we will add “animateMotion” tags inside.

<circle id="circle-16" r="1" fill="#56CCFF"/>

// becomes

<circle id="circle-16" r="1" fill="#56CCFF"></circle>

We have to add the “animateMotion” tags with enclosed “mpaths” ourselves.

<animateMotion dur="8s" begin="4" repeatCount="indefinite" rotate="auto">
  <mpath xlinkHref="#path_0" />
</animateMotion>

Although all the layers were named “Vector” they were sequenced in the code, “Vector2, Vector_3”, etc.

I think the layers get reversed in the code, pretty sure this is the case, tracks that were in the bottom on figma are now on the top in the code.

My Line looks pretty similar although all lines and ellipses are missing the transform=”translate and rotate” and the paths for the ellipse are now much more complex.

no fill rule or clip rule of even-odd on any of the “tracks”

fixing the gradient stops worked got a line with gradient moving.

Couldn’t really get radial gradient working but it was because the opacity on the track was set so low.


Viewbox dimensions changed. Due to no containing artboard?

My version did not work.

Check the clip mask and try to export again. This fixed it.

Tail did not come in? Needed to select the tail and hit enter to begin “edit mode” and then mode so the right edge of the line was exactly on 0, 0.

Also brought in a copy of a layer from the other project. They both appeared in the SVG.

It is working and I am pumped

The electron is clipped on the ends since it overflows the viewbox, simple fix.

tail 1 (mine) versus tail 2 (orig) looks differently and it is likely due to not having height and a bounding box whereas the original has width and height an bounding box wheareas mine only has height. Need to work on this or just use the original.

Curious how you would reverse path?

May not be so easy. I tried a keypoints/keytimes solution with no luck. But from looking at the original. You can have a path be a candy-cane-like track that can force a different direction.

Another thing that is interesting about that is on the main track that is a full chain link the “electron” would do the inside loop and then “jump” to the outside loop. For the other candy can parts of the loop this doesn’t happen.

Duplicating the items moving and creating more gradients from existing gradients is pretty easy from inside the code. I wonder about duplicating tracks with the transform and scale properties. Could you use CSS to target and transform a track and have the moving element still traverse it?

Need to mess around with some drawing and techniques. I see macaroni noodle zippy around in no time. Was able to render a legit custom SVG BG Animation using this technique, (custom paths, elements, etc.).

Map Functions to Render

Used map function and referenced variables in JSX, no issues in TS project either.

  {colors.map((color, index) => {
          return (
            <circle r="2" fill={color}>
              <animateMotion dur={dur} begin={0.1 + index * beginMultiplier} repeatCount="indefinite">
                <mpath xlinkHref="#F" />
              </animateMotion>
            </circle>
          )
        })}