:doodle { @grid: 16 / 100vmin 80vmin; perspective: 90vmin; perspective-origin: 0% -140%; transform: scale(1.8); } :container { transform-style: preserve-3d; animation: camera 20s ease-in-out infinite; animation-direction: alternate-reverse; } --ds: @r(4s, 12s, .1); --size: @r(1, 9); /* Thanks to mootari for the tip */ --z: calc(@i() * .0001px + var(--size) * .1px); animation: move var(--ds) linear infinite, opacity var(--ds) linear infinite; animation-delay: calc((@row() - @size-row()) * var(--ds) / @size-row() - @r(@size()) * .1s); :after { content: ''; @size: calc(var(--size) * 10%); background: @p(#00b8a9, #f8f3d4, #f6416c, #ffde7d); } position: absolute; left: calc(@col() * 100% / @size-row()); @size: calc(100% / @size-row()); @keyframes move { 0% { transform: translate3d(0, 0, calc(var(--z) - 15vmin)) rotateX(180deg) scaleY(.01); } 10% { transform: translate3d(0, calc(10% * @size-row()), var(--z)) rotateX(0) scaleY(.8); } 90% { transform: translate3d(0, calc(90% * @size-row()), var(--z)) scale(1); } 100% { transform: translate3d(0, calc(100% * @size-row()), calc(var(--z) + 5vmin)) scale(.5); } } @keyframes opacity { 0%, 100% { opacity: 0; } 10%, 90% { opacity: .9; } } @keyframes camera { from { transform: rotateX(-45deg) rotate(140deg) translateY(-10%); } to { transform: rotateX(-45deg) rotate(220deg) translateY(-10%); } }

Hi, I'm Gordon Tu. I make

 charts maps code creatively
on the web,
and I also write blog posts
US Road System - 3D Visualization with Three.js and GLSL
US Road System - 3D Visualization with Three.js and GLSL

Three

D3

Created By 涂钰坤, aka, Gordon Tu
Election Map - 3D Visualization with Three.js and GLSL
Election Map - 3D Visualization with Three.js and GLSL

Three.js, React.js

Created By 涂钰坤, aka, Gordon Tu
Brain Pulse Animation - Recreate Blue Yard Studio's Brain Pulse Animation
Brain Pulse Animation - Recreate Blue Yard Studio's Brain Pulse Animation

Three.js, React.js

Created By 涂钰坤, aka, Gordon Tu
Global Earthquakes - 3D Visualization with Three.js and Observable
Global Earthquakes - 3D Visualization with Three.js and Observable

Three.js, Svelte.js

Created By 涂钰坤, aka, Gordon Tu
Spike Planet
Spike Planet

Three.js, React.js

Created By 涂钰坤, aka, Gordon Tu
Stitching Heart, Blooming Flowers
Stitching Heart, Blooming Flowers

Three.js, React.js

Created By 涂钰坤, aka, Gordon Tu
Flow Field 2D
Flow Field 2D

Observable

Created By 涂钰坤, aka, Gordon Tu
Star Candy Ball
Star Candy Ball

Observable

Created By 涂钰坤, aka, Gordon Tu
Kois
Kois

Canvas

Created By 涂钰坤, aka, Gordon Tu
Covid Monitoring Dashboard - China
Covid Monitoring Dashboard - China

Svelte

D3

R

Created By 涂钰坤, aka, Gordon Tu
GLSL SDF Practice Collection
GLSL SDF Practice Collection

GLSL

Created By 涂钰坤, aka, Gordon Tu
Sichuan Basin Elevation
Sichuan Basin Elevation

Observable

Created By 涂钰坤, aka, Gordon Tu
CSS Doodle Chinese Pattern
CSS Doodle Chinese Pattern

CSS

Created By 涂钰坤, aka, Gordon Tu
Canvas Lightning
Canvas Lightning

GLSL

Created By 涂钰坤, aka, Gordon Tu
Unfold a Chinese Lattern
Unfold a Chinese Lattern

Observable

Created By 涂钰坤, aka, Gordon Tu
Rough Fried Eggs
Rough Fried Eggs

Observable

Created By 涂钰坤, aka, Gordon Tu
Lili Pads
Lili Pads

Observable

Created By 涂钰坤, aka, Gordon Tu
Sunset Blob
Sunset Blob

Observable

Created By 涂钰坤, aka, Gordon Tu
Rotating 3D Cubes
Rotating 3D Cubes

Observable

Created By 涂钰坤, aka, Gordon Tu
Rough Squares
Rough Squares

Observable

Created By 涂钰坤, aka, Gordon Tu
Two Dragons of China
Two Dragons of China

QGIS

Created By 涂钰坤, aka, Gordon Tu
The elevation of Jiangxi Province
The elevation of Jiangxi Province

QGIS

Created By 涂钰坤, aka, Gordon Tu
China Elevation
China Elevation

QGIS

Adobe Illustrator

Created By 涂钰坤, aka, Gordon Tu