~/talk

Stunning visuals with Maths and...no JavaScript?

Talkat Full Frontal 2013 · on Friday, 2013-11-08· [css, creative-coding]
slides:none on file

Recreates mathy visuals using only HTML and CSS (with Sass for generation), claiming no JavaScript is involved and showing when CSS wins and when it gets ugly or laggy. Builds a donut-like torus of dots using chained transforms to place 80 circles and layered rotations, produces a sinusoidal bar wave via stacked linear-gradients and keyframe loops, generates the spinning Tail Spin disc with 40 discs from radial gradients, and assembles/morphs exploding polyhedra (12‑ and 20‑face variants) — all demonstrably working though some radial gradients perform poorly.

AI-written summary · about

  1. 0:00Introduction to CSS 3D
  2. 2:27Building a CSS Torus
  3. 6:44Transform Style Property
  4. 9:21Torus Animation Techniques
  5. 13:16Creating Animated Waves
  6. 17:51Wave Animation with Sass
  7. 20:22Radial Gradient Animations
  8. 26:313D Shape Manipulation
  9. 30:35Advanced CSS Effects
~/search
type to search 6,249 conferences, 138,987 speakers and 185,172 talks
~/help
cmdctrl k
search every conference, speaker and series
/
focus the filter search
h
home
c
conferences
s
speakers
e
series
t
light / dark — the status bar button does the same
?
this help
esc
close this, then clear every filter — or just the search, while you are typing in it

Ignored while you are typing. Pages without a filter rail have no search to focus.