See the Code - See it Full Page - See Details
Press anywhere to move the boxes to that point... with CSS Variables modifying the separate easings for both X and Y directions to create non-linear paths. Combined with calc in browsers that allow it in "unique" places to vary the easings per box. Each square is slightly smaller than the last... and each has a relational cubic-bezier multiplier that makes each box's easing slightly different BUT based on the same root easing. This creates the floating snake-like motion.
This Pen uses: HTML, CSS, JavaScript, and