Experimenting with Code
Welcome to the Lab! This is where I share my coding experiments. Dive into a collection of code snippets from my CodeSandbox and CodePen accounts.
Aurora Borealis
This HTML and CSS code snippet creates a realistic aurora borealis animation with a starry night sky. The HTML structure includes a container with layers for stars, and the aurora itself. The CSS uses background images, gradient effects, and keyframe animations to simulate twinkling stars, and the flowing, colorful lights of the aurora borealis. Inspired by the rare occurrence in May 2024, when the auroras, also known as northern lights or the aurora borealis, were visible throughout the San Francisco Bay Area and reported as far south as San Diego due to a solar storm.
Total Solar Eclipse
This HTML and CSS code snippet creates a total solar eclipse animation. The HTML defines a div structure for the sun and moon within a centered container. The CSS uses radial gradients to style the sun, a solid color for the moon, and keyframe animations to move the moon across the sun, simulating an eclipse effect. This snippet was inspired by the recent total solar eclipse that happened on April 8, 2024, which moved across North America, passing over Mexico, the United States, and Canada.