✨Effect Lab
Read the full guide完整技术长文 Fake 3D on a flat canvas在平面画布上伪造 3D
🧬

DNA Helix DNA 螺旋

Two strands of dots orbiting a shared axis half a turn apart, with rungs every fourth step. 两股点阵绕同一根轴转,相位差半圈,每隔四步连一根横档。

Canvas 2DDouble helixPhase offset
Live demo实时演示

Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。

How it works原理拆解

Each of the 40 steps has an angle of t + i*0.3, so the helix winds once every ~21 steps. The second strand uses the same angle plus π, which guarantees the two are always exactly opposite. A crossbar is only drawn when i%4 === 0, keeping the base-pair look sparse instead of a ladder. 40 个台阶每个的角度是 t + i*0.3,大约每 21 步绕完一圈。第二条链用的是同一个角度加 π,这样两股保证永远正对。只有当 i%4 === 0 时才画横档,碱基对才不会密成一把梯子。

What to change可以改的地方

  • 1Reduce the 0.3 per-step twist for a longer, looser coil.
  • 2Draw the crossbars with a gradient to fake depth as the strands rotate.
  • 1每步 0.3 的扭转量调小,螺旋会更长更松。
  • 2横档用渐变画,链旋转时就有前后深度。

Source code源码

Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。

dna.html