The Almighty Rabbit Hole

on YouTube ↗45m

" summary

Live-codes a sunflower SVG exported from Illustrator and shows the actual files, the find/replace to turn IDs into classes, and layer grouping used for animation. Builds the animation with GreenSock (TweenMax/TimelineMax), animates the stalk by setting its attribute y2 from y1, brings the face in by animating the circle’s radius, and staggers petals and seeds with an SVG origin and stagger delays. Uses a custom scrub timeline tool (GitHub) to tune offsets, eases (elastic), and overall timescale; it works end-to-end.

AI-written summary · about

" chapters (9)

1. 0:00Introduction
2. 0:55What I do
3. 15:40Stalk
4. 22:10Offsets
5. 26:35Animation
6. 27:00Stagger Animation
7. 30:10Petal Group Animation
8. 31:35Seed Group Animation
9. 39:35Flower Group Animation

" related talks

• 41m2D and 3D Animation Using JavaScript Greensock & SplineChris Gannon · Pixel Pioneers 2025
• 47mSVGs beyond mere shapesNadieh Bremer · Frontend United 2019
• 12mAlgorithmically Generated Visual DesignsMichael Wehar · Conf42 JavaScript 2022
• 30mCreating Beautiful LED Art with JavaScriptBryan Hughes · JSConf US 2019
• 25m"Code As A Canvas: Exploring Creative Coding With JavaScript"Shri Khalpada · Frontrunners 2025
• 43mMathematics of AnimationVarun Vachhar · FITC Toronto 2017
• 01h 00mFlip Switch: Live Code Session - SuperchargedPaul Lewis, Surma Surma · Polymer Summit 2016
• 18mSVG Animation with snap.svgJulia Smith · NEJS Conf 2015