HTML+CSS实现旋转太极图动态效果

如果对代码有疑惑，可以看我的个人视频
https://www.bilibili.com/video/BV1vV411r75p/
效果

静止太极图

动态太极图
动态太极图代码

        body {
            background: silver;
            height: 2000px;
        }
        
        #canvas {
            position: absolute;
            top: 20%;
            left: 50%;
            margin-left: -250px;
            animation: rotate1 .1s linear infinite; 
        }
        
        @keyframes rotate1 {
            100% {
                transform: rotate(360deg);
            }
        }

 <div>
        <!-- canvas画布 -->
        <!-- IE9 -->
        <canvas id="canvas" width="500" height="500"></canvas>
    </div>

 let ctx = document.getElementById("canvas").getContext("2d");
        // 创建context对象
        // 左大半圆
        ctx.beginPath();
        // 起始路径
        ctx.fillStyle = "red";
        // 填充颜色
        ctx.arc(250, 250, 200, Math.PI / 2, Math.PI * 1.5, false);
        // 创建弧/曲线
        //arc(x,y,r,起始角，结束角，顺时针) 
        ctx.closePath();
        // 从当前点返回起始路径
        ctx.fill();
        // 填充绘图
        // 右大半圆
        ctx.beginPath();
        ctx.fillStyle = "#000";
        ctx.arc(250, 250, 200, Math.PI / 2, Math.PI * 1.5, true);
        ctx.closePath();
        ctx.fill();
        // 右小半圆
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.arc(250, 150, 100, Math.PI / 2, Math.PI * 1.5, true);
        ctx.closePath();
        ctx.fill();
        // 左小半圆
        ctx.beginPath();
        ctx.fillStyle = "#000";
        ctx.arc(250, 350, 100, Math.PI / 2, Math.PI * 1.5, false);
        ctx.closePath();
        ctx.fill();
        // 上小圆
        ctx.beginPath();
        ctx.fillStyle = "#000";
        ctx.arc(250, 150, 25, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
        // 下小圆
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.arc(250, 350, 25, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();