The cicada principle in animations

100%

The cicada principle in animations

✓ Published0🌍 Public

Last edited Dec 15, 2019

Created on Dec 15, 2019

A loading animation demonstrates the cicada principle by applying prime-number-based durations to multiple overlapping CSS keyframe animations. The code defines separate `@keyframes` rules for scaling, rotation, border-radius, color, and border-width, then combines them in a single `animation` shorthand property with durations like 1s, 0.7s, 1.1s, and 1.3s. The result is a visually complex, seemingly random looping effect on a simple box element, rendered purely through CSS and HTML without any JavaScript.

AI-generated description

Similar vizzes

Loading thumbnail…

simple loading indicator with css

This example demonstrates a simple loading indicator, a purely visual element that signals an ongoing process through a spinning animation. It shows a circular progress icon that rotates continuously to convey activity. The visualization is achieved using a single HTML `div` element with a CSS class, styled through the provided stylesheet. The core logic relies on the CSS `animation` property with a `@keyframes` rule named `spin`, which rotates the element from 0 to 360 degrees over a two-second linear infinite cycle. The loader’s design uses a bordered circle with a transparent center and a contrasting top border to create the spinning effect, while the container is positioned absolutely with a high z-index and partial opacity.

AAbhay-Joshi-Git

67% match

Loading thumbnail…

Intro to CSS Animations

This example demonstrates the flexibility of CSS animations and transitions for creating simple motion and interactive effects in web graphics. A static SVG hexagon is embedded as a base64 data URI, and its styling responds to user interaction—hovering causes the shape to scale up and rotate 45 degrees with a smooth two-tenths-second transition. The CSS also defines a slide keyframe animation that translates an element horizontally, though the active circles using this effect are commented out in the code. The example uses core CSS features including `@keyframes`, `transform` properties, and transition timing.

JJn1532

66% match

Loading thumbnail…

Border Animation

This example demonstrates a dynamic, organic border using CSS animations. A white, irregularly-shaped blob continuously morphs through different border-radius configurations, including a perfect circle at the midpoint, before shifting to a yellow hue. The animation is driven by the `borderrr` keyframes within the stylesheet. The page uses a minimal HTML structure with an SVG element and a `bundle.js` script, though the primary visual effect is achieved through pure CSS, not JavaScript or D3. The code references D3 v5 via CDN but the actual animation relies on CSS `@keyframes` and the `border-radius` property.

AAndrew-Kiwa

61% match

Loading thumbnail…

Page ROller

This example shows a looping CSS animation of four rotating lines that form a rolling square shape. The animation uses custom keyframes named `desno`, `desno2`, and `desno3` to rotate each line sequentially around different origins, with staggered opacity changes creating the illusion of a continuous page-turning effect. The code relies on CSS transforms, animation properties, and positioning, with the lines styled as rounded rectangles in a yellow-green palette on a green background. While the HTML includes an SVG element and D3.js, the visual effect is driven entirely by CSS.

AAndrew-Kiwa

61% match

Loading thumbnail…

Loader with dots

This example shows three circular dots arranged horizontally as a loading indicator, animating in a staggered scale sequence. The loader uses pure CSS transitions and keyframe animations (`@keyframes preloader`) to create the pulsing effect, with each dot’s animation delayed for a rhythmic loop. The markup consists of a `.loader` container with three `.loader__element` spans, styled via CSS custom properties (e.g., `--main-color`, `--point-color`) and rendered on an SVG page. No JavaScript libraries are used; D3 is loaded but unused in this static behavior.

AAndrew-Kiwa

61% match

Loading thumbnail…

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

61% match

Loading thumbnail…

squares-around-circles

The animation shows a grid of small circles, each surrounded by four square outlines that continuously expand and rotate. The squares appear to “breathe,” pushing outward and then resetting in a cyclical loop, creating a pulsing, geometric pattern across the screen. The code uses D3.js with SVG paths, leveraging the `transition` and `attrTween` methods for smooth movement. Each square’s position and orientation are calculated from its center point and a side number, updated via functions like `pushLinesOut` and `pointToPath`. The data is generated procedurally, with no external dataset.

11wheel

60% match

Loading thumbnail…

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

60% match