这是去年作者尝试用 CSS 重现Rach Smith 的 P5.js 动画的经历。动画看似简单易实现，但实际操作有难度，手动更新每个盒子的位置和方向较棘手。

• 最初通过在keyframes中追踪单个盒子位置，利用不同的animation-delay值让其他盒子均匀间隔并立即开始动画，如.box类的样式。
• 几天后发现更简单方法，使用offset-path属性，通过inset()函数创建正方形路径，让盒子沿其移动，如.box类的另一种样式。
• 介绍了线性缩放，即根据盒子索引等比例分配animation-delay值，浏览器已支持tree counting functions，可替换为native sibling-index()和sibling-count()函数，linear scaling有多种用途，如创建不透明度或颜色范围，css-doodle中的@iI()函数能更简洁实现相同结果。
• 用css-doodle重写代码更简单，@t可替代animation和keyframes，如offset-distance: @t(/100%, +@iI(*100%));，还给出完整动画代码及相关注意事项，如inset()函数支持round关键字可产生微妙翻转效果。
• 最近发现offset-path接受polygon()等形状函数，css-doodle的@shape函数可轻松生成多边形，通过改变offset-distance比例可产生拖尾效果，还给出多个自定义形状的例子，性能虽不如 canvas 但仍有趣。
• 还重现了@beesandbombs的螺旋动画，先创建不同边数的多边形置于背景，调整r值使其边长相同，反转多边形绘制顺序，最后添加小点点并通过offset-distance创建相同偏移路径并动画，给出相关代码。整个过程充满乐趣，又解决一个难题。