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

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

A palindrome date is displayed as a glowing digital clock using the LED Digital 7 web font, with the text “02•02•20•20” styled with layered CSS text-shadow effects in pink and blue. The entire container element rotates continuously through a 360-degree spin via CSS `@keyframes` animation, creating a looping motion effect over ten seconds. The page uses HTML and modular CSS files for layout, font import, neon styling, and animation, all controlled without JavaScript. The design centers the date on a dark background, emphasizing the typographic and animated presentation.

90% match

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`.

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.

64% 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.

ascii-animation

Two separate animations play side by side: a pre-rendered sequence of block characters cycles through slides showing the growth of urban versus rural population, while a second panel flips the characters of a Donald Trump ASCII portrait line by line to create a mirror effect. The population sequence loads its frames from a text file and swaps them every 500 milliseconds using `setInterval`, updating the text of a `pre` element with `d3.select`. The portrait animation reverses each line’s characters and swaps slash directions every 100 milliseconds, using D3’s `xhr` calls to fetch both text files.

11wheel

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

Fork of SVG Animation Playground

This example demonstrates an SVG animation inspired by the opening crawl of Star Wars, featuring two rotating images and a spinning headline that fade in and out with a 3D perspective effect. The animation uses CSS keyframes defined in a separate stylesheet, with properties like `transform`, `opacity`, and `translateZ` to create scale, rotation, and depth transitions over a 10-second infinite loop. The scene is composed of inline SVG images loaded from external gist URLs, styled with the `Lato` font, and set against a fixed background image. The container uses `perspective` and `transform-style: preserve-3d` to enable the three-dimensional motion.

JJonas Carvalho