Gordon Tu

: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

Brain Pulse Animation - Recreate Blue Yard Studio's Brain Pulse Animation

Three.js, React.js

Created By 涂钰坤, aka, Gordon Tu

Number of Chinese Company Infrastructure in the US and Abroad.

Observable

Created By 涂钰坤, aka, Gordon Tu

Global Earthquakes - 3D Visualization with Three.js and Observable

Three.js, Svelte.js