Imitation of Beijing health treasure animation

Imitation of Beijing health treasure animation

Beijing health treasure has an animation, a circle of small balls, rolling clockwise along the square, and the color is gradient, like the picture below

The following key information was extracted:

1. The ball rolls continuously clockwise along the rectangle, and the distance between the balls is uniform
2. When the ball is at the right angle of the rectangle, it will roll along the right angle, and the transition is smooth
3. The color of the ball has some gradients and changes with the position of the ball. The upper left corner is always dark, and the lower right is always light.

border implementation

I wanted to imitate this animation. The first thing I thought of was to use a border. I wanted to use a dotted border to achieve it. I found a similar one.

source code

Main logic:

1. Set the border to be dotted
2. make 4 borders
3. Use animation to move the 4 borders in different directions to simulate continuous scrolling

After careful observation, I found a more serious problem. There is a problem with the transition of the 4 right angles, and there is no way to fix it. Take the upper right corner as an example, the two scrolling borders cannot be perfectly integrated. The ball from left to right and from Top to bottom balls will meet, not the same as the desired left->bottom roll

background scroll

Later, I found another scroll, this time using the background for continuous scrolling, as shown below:

1. background defines the direction and color of the 4 edges
2. background-repeat defines scrolling only along the edges
3. background-size defines the length and width of the sides
4. background-position defines the starting point of the edge
5. Finally, animate the 4 backgrounds and make them scroll

source code

This gap is large, even the small ball can't be completed, give up

scroll SVG

This is a cow, and it looks almost like this:

source code

1. First prepare a svg image that will scroll by yourself
2. Find a way to splice the sides of the small svg to the big rectangle

Since the svg scrolls by itself, the scrolling of the corners is very natural and smooth, but later I found that it could not be done:

1. How to make a rolling ball svg
2. If the same small SVG is made into a big one, the gradient color of the small ball can't be fixed.

SVG animation

source code

Interesting plan:

1. Put a rectangle inside the svg
2. The rectangle's border is set to a dashed line (stroke-dasharray)
3. The gap of the dotted line is set as a semi-circle (round)
4. Use css to control the offset to make the border scroll

Current issues are:

1. Make a gradient ball
2. The right angle needs to be optimized, and the small balls will overlap in the upper left corner.

perfect rolling ball

Next, I removed the rounded corners (rx), and there was a problem. In the upper left corner, the small ball would merge and flicker. After many experiments, I found that my side length and stroke-dasharray need to be well matched to perfectly fit the small ball. The siege is exactly one circle, so that there will be no gathering and flickering at the junction of the head and tail (upper left corner), as shown below:

The color of the ball has also found a way to use linearGradient:

Finally, add CSS animation to achieve continuous scrolling:

source code

I am not familiar with SVG, there is a better way, welcome to discuss