Spring

100%

✓ Published0🌍 Public

Last edited Aug 12, 2012

Created on Aug 12, 2012

Seven concentric rings made of overlapping rounded shapes sit centered in a dark frame, rendered as a pure CSS composition. Each ring is a `<span>` element nested inside a parent `.spring` container, with no JavaScript or external data. The code uses only HTML and CSS, relying on nested spans and the `.spring` class to create the layered, spring-like visual through styling defined in `index.css`. The result is a static, decorative pattern that mimics a coiled spring or flower-like structure.

AI-generated description

Similar vizzes

Loading thumbnail…

Flowers

A generative flower-like pattern emerges from a hundred spiraling structures, each composed of a pair of crossed ellipses, a radial-gradient circle, and a drop-shadow filter. The React application maps each index to a position along a logarithmic spiral, then assigns randomized radii to the ellipses, creating organic variation. Rendered as SVG, the composition layers the elliptical pairs beneath the gradient-filled circles, producing a dense, colorful bloom against a dark green-to-black background.

NNita

64% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a static SVG composition of overlapping circles and a line, arranged in a simple geometric pattern. The graphic shows concentric rings in green, yellow, blue, and red at the left, a black circle with grey and yellow inner circles on the right, and a horizontal red line across the top. The code uses raw SVG elements—`circle` and `line`—with inline attributes for positioning, sizing, and colors, all rendered directly within an HTML document without any JavaScript libraries.

Ssantoshmitra-05

64% match

Loading thumbnail…

Fork of HTML Starter Jan Bronkhorst

This example shows a simple static composition of three circles arranged on a yellow background, drawn as SVG elements. The largest circle, centered with a black stroke, acts as a face, while two smaller black circles serve as eyes. The code uses plain SVG tags (`circle`) styled with attributes like `fill`, `stroke`, and `stroke-width`, all embedded directly in the HTML. The page resets body margins and hides overflow via CSS, with no interactive behavior or external JavaScript libraries involved.

JJan Bronkhorst

64% match

Loading thumbnail…

Fork of Hello HTML

This example shows a simple static composition of three circles arranged as a face-like pattern on a yellow background. The visualization is a minimal demonstration of inline SVG markup, using basic `<circle>` elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes within an HTML document. The code relies solely on the native SVG API and standard HTML structure, with no external JavaScript libraries or data sources. The page’s body applies a CSS reset to remove margins and enable edge-to-edge rendering of the wide graphics.

JJemika Negara

63% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays four solid-colored circles arranged in a diamond pattern around a central point within an SVG canvas. The visualization uses raw SVG markup with inline circle elements, each defined by cx, cy, and r attributes alongside hex color fills. The page embeds the SVG inside a flex-container for centering and includes a stylesheet for subtle border styling. An accompanying JavaScript file only logs a message to the console, confirming the static nature of the graphic. The code relies solely on native SVG and HTML, with no additional data sources or libraries.

CCurran Kelleher

63% match

Loading thumbnail…

Fork of HTML Starter

This example shows a static nested bullseye pattern made of six concentric circles centered at the same point. The circles decrease in radius from 100 to 50 pixels, each filled with a distinct color—red, green, blue, yellow, purple, and orange—and outlined with a black stroke. The visualization is rendered as SVG within an HTML page, using pure SVG circle elements with fixed `cx` and `cy` attributes. The page also includes a separate JavaScript file that only logs to the console, and a CSS file with an unused class selector.

BBar Shopen

63% match

Loading thumbnail…

Circles07

A dark, animated field of 1,197 colored circles swirls around the center of the screen. The circles, rendered as an SVG group, continuously move in a complex, rotating pattern, with their hue cycling through the full color spectrum based on their index. Using D3.js, the animation calculates each circle’s position through trigonometric functions that vary with time and a per-circle offset, producing a dense, hypnotic, flower-like motion. The code directly sets element attributes and uses a custom update loop via `tributary.run`, with opacity and radius controlled for a layered, glowing effect.

Aandybak

62% match

Loading thumbnail…

Fork of Fork of Double Harmonic Black and white

A web document displays a black-and-white composition of fifteen circles, all centered on a large, static canvas and rendered with an SVG. The circles are overlaid at the same center point, each with a fixed radius, creating a layered, harmonic pattern inspired by a double pendulum. The code uses d3.select to append an SVG element, d3.range to generate the data, and d3.enter to create the circle elements, with dimensions based on window.innerWidth and window.innerHeight.

Xxani

62% match