Stargazing for developers: A beautiful twinkling night sky with shooting stars
summary
Builds a twinkling night sky using SVG circles, two CSS animations (scale and opacity) and JavaScript helpers named createStar, createShootingStar and createConstellation; uses CSS Variables to randomize colors, positions and timing and applies negative animation delays so stars start mid‑cycle. Mentions exact counts: 9,096 naked‑eye stars, up to 6 shooting stars normally and ~200/hour during a meteor shower. Reveals constellations by animating stroke‑dashoffset with path length read via getTotalLength; works in the browser but large numbers of animated SVGs hit performance, so WebGL is suggested.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 1:00About me
- 2:33Chapter 1 Betelgeuse
- 4:15Chapter 2 Hot Gas Ball
- 5:29Chapter 3 Temperature as Color
- 8:26How many stars
- 9:38Star count
- 11:06Stars can twinkle
- 15:51Burning rocks
- 20:23Multiple shooting stars
- 22:33Shooting stars and constellations
- 23:58Orion
- 26:11Constellations
- 38:06Summary
- 38:59Questions
related talks
27mCSS Variables A New Hope
32mStunning visuals with Maths and...no JavaScript?
28m"Shooting Stars! Livecode a Game in Less Than 30 Mins"
28mCSS Animation - Beyond Transitions
40mAn Animated Poem built with CSS Drawings & Animations (CodePen Show & Tell)
59mThe web design cheat code: Using SVG to bridge CSS’ gaps
52mCSS and SVG — The Dynamic Duo!
43mThe Internet of Shapes