02•02•20•20 - CSS Animation for a very special day

02•02•20•20 - CSS Animation for a very special - whirlygig - day

A whirlygig animation celebrates the palindrome date 02-02-2020, displaying the date as “02•02•20•20” in a neon-glowing LED digital font. The text is split into two arms that rotate, flip horizontally, and pulse in opacity using CSS `@keyframes` animations (`arm1`, `arm2`, `rotation`, `cycle`). The container itself spins via a separate `rotation` animation, while CSS `text-shadow` creates the neon effect. The page uses a modular file structure with separate CSS files for fonts, animations, and neon styling.

90% match

CSS-Animation Sunrise Hello HTML

A single HTML page uses CSS animations to depict a sunrise over the sea, with the text "Hello" and "HTML" scaling and rising as the background shifts from dark navy to sky blue and the text color changes from red to yellow. The example relies entirely on standard HTML and CSS, including the `@keyframes` rule and the `animation-name` and `animation-duration` properties applied to the `body` and `message` elements. No JavaScript libraries or data sources are involved; it is a self-contained demonstration of pure CSS-based visual effects.

67% match

MrW's VizHub Experience 2020

A self-referential digital clock animates through the year 2020, using a blinking LED-style font to symbolize the passage of time in MrW's VizHub learning journey. The display shows the VizHub logo and a link to the author's site, rendered as static SVG elements. The clock's time updates via JavaScript within a React-based environment, with styling driven by CSS custom properties and a web font loaded from an external CDN.

66% match

MrW's VizHub Experience 2020 (BACKUP)

This backup page displays a stylized digital clock for 2020, using a glowing “LED Digital 7” font and a minimal layout. The text (the year “2020”) and a VizHub logo are centered on screen, with CSS flexbox handling alignment. The page loads the font via an `@import` URL, and uses inline SVG for the logo. The HTML and CSS files provide the structure and styling, while no external JavaScript is used for interactions or animation.

css animation

This example demonstrates a CSS-based animation of a string of holiday lights, created entirely with D3.js and vanilla JavaScript. It shows a row of glowing, diamond-shaped bulbs alternating between blue and orange, with each color pulsing on and off in a staggered rhythm. Clicking any bulb removes it by fading it to black, using D3’s `transition` and `style` methods to animate opacity and disable the CSS keyframe animation. The page generates 75 bulbs via a `for` loop, while D3 selects all elements to bind click handlers. The rendering relies on CSS `@keyframes` for the pulse effect and D3 v4 for interactivity.

DDarioCel

CSS Neon Gallery (inc. first attempt MrW Logo)

This gallery displays a series of neon-style text effects, rendered using custom CSS `text-shadow` properties on a dark background. The presentation includes a set of greetings, demonstrating varied color and glow treatments. The fourth plaque is a stylized logo, constructed from three text characters, each individually styled with CSS transforms and colored shadows. The layout is built with a custom HTML `<neon>` tag and a CSS container that uses flexbox to center the content. The styling is defined in a separate stylesheet, `neon.css`, and the structure in `index.html`.

Retro Clock

A retro-styled animated clock displays a series of date-time strings, each formatted as "08h15 01.07.2022". The visualization cycles through these markers every second, showing how characters rotate in and out of a rectangular frame using a D3 mask. Built with D3 v7, the SVG text elements transition vertically via `transition.attr()` to simulate a mechanical flip-clock effect. The string data is hardcoded in the script, and the clock aligns to the right within the canvas layout.

Sscheenmi@gmail.com