hello 👋

About me

Georgios Kaleadis
Learned programming with Flash 4 (1998)
Frontend Developer (Satellytes)
Was Teaching Coding to Kids
I love experimenting with technology

Stargazing for developers

A twinkling night sky with shooting stars powered by SVG, CSS & JS

Journey to the stars

4 chapters

I) Anatomy of a Star
II) Night Sky
III) Shooting Stars
IV) Constellations

✨FACT✨

🎭 Idea: *How to build it*

Coding

SVG Markup
CSS Animations
CSS Variables
Vanilla Javascript

Chapter 01

Anatomy of a star

What is a star ?

A bright ball of gas with a nuclear fusion producing a lot of heat.

First Star Fact!

✨Hot Gas Ball✨

🎭 Idea: Create a SVG circle

How do we implement it?

What's the color of a star ?

Sun 5500°C

Betelgeuse 3200°C

Red = Hot ?

30.000°C

Eta Carinae

New Star Fact!

✨Temperature is color✨

🎭Idea: Different fill colors

How large is a star ?

New Star Fact!

✨Stars have different sizes✨

🎭 Idea: Circles with different radii

Back to earth

Chapter 02

Starry Night

How many stars are in the universe?

More stars than the earth has sand grains ✨

1,000,000,000,000,000,000,000,000!
(one quadrillion)

How many stars can we see in the night sky?

9096 (4548)

in a pitch black night

Worse with light pollution

New Star Fact!

✨Star Count✨

🎭Idea: Create a lot of stars.

createSky({count: 250});

Twinkling

Astronomical Scintillation

New Star Fact!

✨Stars can twinkle✨

🎭 Idea: CSS animations for scale & opacity

Chapter 03

Shooting Stars

What are shooting stars?

pebble sized

up to 260.000 km/h

plus air friction =

New Star Fact!

✨Flying Burning Rock✨

🎭 Idea: Create a moving circle with fading

                    
                      @keyframes shootingStarOrbit {
                        0% { transform: translate(100px, 0) rotate(0); }
                        100% { transform: translate(100px, 0) rotate(180deg); }
                      }

            
              .shooting-star {
                animation: shootingStarOrbit 2s linear infinite;
              }
              @keyframes shootingStarOrbit {
                0% {
                  transform: rotate(0) translate(100px, 0);
                }
                100% {
                  transform: rotate(180deg) translate(100px, 0);
                }
              }

translate(100px, 0) ➡ radius
rotate(0), rotate(180) ➡ start/end angle
CSS Variables and keyframes are friends 👫

            
              @keyframes shootingStarOrbit {
                100% {
                  transform:
                    rotate(180deg)
                    translate(var(--shooting-orbit-radius, 100px), 0);
                }
              }

            
              // Provide values through JS
              shootingStar.style.setProperty(
                '--shooting-orbit-radius', value + 'px');

            
              @keyframes shootingStarOrbit {
                0% { transform:
                  rotate(var(--shooting-orbit-angle-start, 0deg)) /*translate..*/ }
                100% { transform:
                  rotate(var(--shooting-orbit-angle, 180deg)) /* translate.. */ }
              }
            
            
              shootingStar.style
                .setProperty('--shooting-orbit-angle-start', value + 'deg');
              shootingStar.style
                .setProperty('--shooting-orbit-angle', value + 'deg');

            
              createShootingStar({
                x: 100, y: 100, radius: 100,
                angleStart: -90, angle: -180
              });

            
              createShootingStar({
                x: 100, y: 100, radius: 100,
                angleStart: -90, angle: -180
              });

How many shooting stars?

4-6 per hour

Meteor Shower

Up to 200 shooting stars per hour

New Star Fact!

✨Meteor Shower✨

🎭Idea: Create multiple randomly shooting stars

                
                  .shooting-star {
                    visibility: hidden;
                  }
                

                
                  .shooting-star.is-shooting {
                    visibility: visible;
                    animation: shootingStarOrbit ...
                  }
                
                
                  setInterval(() => shootNext(), 4000);

                  function shootNext() {
                    const shootingStar = nextStar();
                    shootingStar.classList.add('is-shooting');

                    lastStar.classList.remove('is-shooting');
                    lastStar = shootingStar;
                  }

Chapter 04

Constellations

Pareidolia

Human tendency to see patterns & faces in random data.

Stars are random data

Star Fact!

✨Imaginary Images✨

🎭 Idea: SVG circles connected with lines

Our building block

                
                  const points = [ {x: 0, y: 0}, {x: 100, y: 0}];

                
                  createDots(points);

                
                  createLine(points);

Complex Lines

                
                    const lineHotpink = [0, 3, 1, 2];

                    // returns [{x:0. y:0}, {x:0. y:50}, ...]
                    const hotpinkPoints = indicesToPoints(lineHotpink, points);
                    createLine(hotpinkPoints);

                    function indicesToPoints(indices, sourceList) {
                      return indices.map(index => sourceList[index]);
                    }

                  
                    const COORDINATES = [
                      { x: 161, y: 352 },
                      { x: 57, y: 365 },
                      { x: 80, y: 273 },
                      // ...
                    ];

                    const LINES = [
                      [7, 6, 5, 4, 3, 2, 7],
                      [5, 12],
                      [12, 14, 13],
                      [12, 15, 16, 17],
                      // ...
                    ]

                  
                    createConstellation(COORDINATES, LINES);

                  
                    function createConstellation(points, multipleIndicesList) {
                      createDots(points);
                      // createStars(points)

                      multipleIndicesList.forEach(indices => {
                        const linePoints = indicesToPoint(indices, points);
                        createLine(linePoints);
                      })
                    }

Bonus Fact!

✨Appearing Constellation✨

🎭 Idea: Animated SVG Paths

Technique by Jake Archibald (2013)

Dash Array with an animated Dash Offset

Dash Array

Dash Offset

Jake Archibald Magic 🧙‍♂️

CSS Animate Path

            
                .red-path {
                  --path-length: 100;
                  animation: revealPathAnimation 5s infinite backwards;
                }

Conclusion

            
            createStar({size: 10, color: 'red', x: 0, y: 0});

            
              .twinkle-little-star {
                animation:
                  starPulse 5s infinite alternate,
                  starGlowing 2s infinite alternate;

                animation-delay: var(--animation-twinkle-delay, 0);
              }

            
                createShootingStar({
                  x: 100, y: 100, radius: 100,
                  angleStart: -90, angle: -180
                });

              
                createConstellation(points, linePoints);