It is possible with divs, shapes or svgs to curve an item to follow the curve of the path.
It's just an example, but imagine the rectangles curving on the edges, right now it's just had turn 90deg from one frame to another
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>frame</title><style>
main {
width: 100vw;height: 100vh;position: absolute;
}
div {
display: none;position: absolute;will-change: offset-distance;width: 200px;
height: 40px;background: hsl(313,100%,50%);offset-anchor: top;
offset-rotate: auto;offset-path: path('M 0 0 L 600 0 L 600 400 L 0 400 L 0 0');
}
div:nth-of-type(4n+2) {background: hsl(343,100%,50%)}
div:nth-of-type(4n+3) {background: hsl(13,100%,50%)}
div:nth-of-type(4n+4) {background: rgb(37, 16, 226)}
body {margin: 0;padding: 0;}
svg, aside { display: none;}
div { display: block; }
* {box-sizing: border-box;}
</style>
</head> <body> <main><div></div> <div></div> <div></div> <div></div> <div></div><div></div> </main>
<script>
var rateRange = document.getElementById('playback-rate');
var shapers = [].slice.call(document.querySelectorAll('div'));
var DURATION = 200000;
var animations = [];
shapers.forEach(function(s, i) {
var animation = s.animate([
{offsetDistance: 0},
{offsetDistance: '100%'}
], {
duration: DURATION,
delay: -i / shapers.length * DURATION,
iterations: Infinity
});
animations.push(animation);
});
</script>
</body>
</html>