利用贝塞尔曲线进行图形绘制 HTML+CSS+JAVASCRIPT

今天看到一个视频是使用贝塞尔曲线进行图形绘制，觉得很好玩，自己仿照写了一个简易版的，没有进行手机端适配，有兴趣的同学可以自行优化，好了废话不多说，下面上代码

动画模块

此模块主要是用来制定贝塞尔曲线的运动轨迹，其中主要是@property自定义css变量，@property CSS是Houdini API 的一部分，它能让开发者显式地定义他们的 CSS 自定义属性, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承，其次就是 cubic-bezier他是我们用来描绘贝塞尔曲线的属性。我们通过不断利用动画调整自定义属性中的数值与x，y，r之间的间隔时长，来达到绘制不同图标的要求

@property --x{
   
    syntax: '';
    initial-value: 0px;
    inherits: false;
}
@property --y{
   
    syntax: '';
    initial-value: 0px;
    inherits: false;
}
@property --r{
   
    syntax: '';
    initial-value: 0deg;
    inherits: false;
}
@property --r2{
   
    syntax: '';
    initial-value: 0deg;
    inherits: false;
}
.ball{
   
    z-index: 1000;
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: red;
}
.wirelessLoop{
   
    transform: translate(var(--x),var(--y));
    animation: x 2s, y 1s;
    animation-timing-function: cubic-bezier(0.5, -800, 0.5, 800