• Y AnimationPlayground
研究工作台
  • 实验总览
  • D3
  • Lottie
  • Rive
    • 运行时评估
    • Diamond Grid
示例库
  • 示例总览
  • SVG 示例
  • Three.js 示例
  • 代码视频示例
项目
  • 版本记录
GitHubX (Twitter)

Diamond Grid

斜向菱形网格被点亮事件逐一照亮,光沿网格线向外传播;Canvas 2D 即时模式逐帧绘制,不是 Shader。

返回 Canvas 运行时评估

Diamond Grid

Canvas 2D来源待补

64 秒一个循环 · 离屏与后台暂停

参数

网格

种子
换一组
网格间距
%

种子决定网格偏移、点亮位置和整个循环的顺序;间距按画面短边取比例,限制在 65–124 px。

点亮

事件数
速度
×

事件均匀铺在 64 秒循环里,每三个中有一个会在前一个的同一行或同一列上几格处接力点亮。事件越多,同时亮着的越多。

外观

背景

深色背景用加色混合,光线叠加会更亮;浅色背景用普通混合。系统减少动态效果时停在第 27 秒的静帧。

来源与实现

Canvas 2D 即时绘制,不是 Shader;作者与许可待补。