100%

Fork of HTML Starter

✓ Published2🌍 Public

Last edited Jul 18, 2025

Created on Jul 18, 2025

This example displays four purple circles in a horizontal row, demonstrating a monochromatic color scheme from light lavender to deep violet. The page uses HTML and CSS to construct and style the circles, with each circle assigned a distinct background color via CSS classes. The circles are laid out using a flexbox container that centers them vertically and horizontally, with a gap between each. A JavaScript file logs a message to the console, confirming the page’s interactive setup.

AI-generated description

Purple Circles Demo

This simple web page displays four circles in different shades of purple.

The shades range from light purple to deep purple, demonstrating a monochromatic color scheme.

MIT Licensed

Similar vizzes

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

84% match

Loading thumbnail…

Fork of HTML Starter

This example shows a collection of circles in blue, orange, and purple scattered across a 600 by 400 pixel SVG canvas. The circles have different radii and positions, creating a simple abstract visual composition. The code uses raw SVG elements within an HTML page, placing each circle with explicit `cx`, `cy`, `r`, and `fill` attributes. No JavaScript libraries or data sources are involved; the visualization is static and defined entirely in the markup.

Ee.rossi100@campus.unimib.it

82% match

Loading thumbnail…

Fork of HTML Starter

This example shows three nested circles centered at the same point, each with a distinct solid color: green, yellow, and blue. The circles are drawn directly in an SVG element with a fixed width and height of 4000 pixels, using static `circle` elements with explicit `cx`, `cy`, and `r` attributes. The page relies on plain HTML and CSS for layout, with the `message` class defining font styling that is not used in the visible output. No JavaScript libraries or dynamic data are involved.

Ssantoshmitra-05

80% 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

80% match

Loading thumbnail…

Fork of HTML Starter

This example is a minimal HTML learning test that demonstrates basic SVG rendering primitives. It displays two circles—one green and one red with a blue stroke—positioned at different coordinates, enclosed by a purple rectangular outline without fill. The visualization uses raw SVG elements (`circle` and `rect`) defined directly in the HTML markup, with no JavaScript or external libraries driving the layout. The accompanying JavaScript file merely logs a console message, and the CSS file defines an unused message style, so all visible behavior stems from static SVG attributes like `cx`, `cy`, `r`, and `stroke-width`.

Llusinho716@gmail.com

79% match

Loading thumbnail…

Fork of HTML Starter

This example displays a grid of 100 circular blue elements that turn red on hover, demonstrating how CSS styling and JavaScript interact to create interactive visuals. The code uses vanilla JavaScript with the Document Object Model (DOM) API, specifically `document.createElement` and `document.body.append`, to generate the circles dynamically. Styling relies on CSS flexbox for layout, `border-radius` for round shapes, and the `:hover` pseudo-class to change background color. The visualization shows a simple, responsive pattern where each circle responds independently to user interaction, illustrating basic DOM manipulation and event-driven styling without external libraries.

YYiorgos Bagakis

79% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates three SVG circles arranged horizontally in red, black, and blue, styled with CSS for a large centered text message. The visualization uses plain SVG elements and CSS styling in an HTML page. The circles are drawn with specific cx, cy, and r attributes, showcasing basic geometric shapes rendered in the browser. The code relies on vanilla HTML, CSS, and JavaScript without any external libraries, serving as a minimal interactive template for building visualizations.

EEjenavi16

79% match

Loading thumbnail…

Fork of HTML Starter

This example shows three solid circles arranged in a row on a 980-by-200 SVG canvas, each colored red, green, and blue. The circles are positioned sequentially, starting at the left edge, with a 50-pixel radius and no additional styling. The static visualization is built entirely with raw SVG elements inside the HTML markup, using no JavaScript or CSS rules. It demonstrates a minimal SVG image without interaction, animation, or data binding, serving as a basic starting point for further customization.

TTorgeirskovholt

79% match