Skip to main content
SimilarExport ZIP
100%

Invisible Dots

✓ Published2🌍 Public
CCurran Kelleher
Last edited Feb 29, 2020
Created on Dec 23, 2019
Forked from HTML Starter

A grid of 50 black rounded squares fills the browser window, each one a styled `<div>` created dynamically by a `for` loop that calls `document.createElement` and appends it to the body. The squares appear as a uniform, static pattern, yet the title suggests the presence of invisible dots. No external libraries or data sources are used; the visualization relies solely on raw HTML, CSS (flexbox layout with fixed `84px` dimensions and `margin` spacing), and vanilla JavaScript to construct the display.

AI-generated description

Do you see them?

MIT Licensed

Similar vizzes

Loading thumbnail…

Invisible dots

Fifty identical black rounded squares fill a browser window, each rendered as a plain `<div>` with no visible content, creating a uniform grid of "invisible dots" against the white page. The example uses a simple `for` loop in vanilla JavaScript to append each element to the document body, with CSS flexbox controlling the wrap layout. The code intentionally corrupts the loop syntax with malformed `i < 50` conditions, revealing an authoring error that prevents execution. No external libraries or data sources are used; the visualization relies solely on raw DOM manipulation and static styling.

Ggragors123@gmail.com
93% match
Loading thumbnail…

Fork of Invisible Dots

A dense grid of fifty black, rounded squares fills the browser window, each occupying a static 84-by-84-pixel cell. The code generates these squares with plain JavaScript in a loop, appending them to the document body via `document.createElement` and `append`. No data or interaction is present; the visualization is purely a minimalist geometric pattern created through standard DOM manipulation and CSS styling, with no external libraries or rendering APIs involved.

Llimenzi
92% match
Loading thumbnail…

Invisible Dots

Black rounded squares tile a dark canvas in a dense, uniform grid. The visualization emphasizes the interplay of negative space and repetition, as the 84-pixel elements with soft corners create a rhythmic pattern across the viewport. Each square appears identical, making any subtle variations in lightness or shape imperceptible to the eye, reinforcing the title’s notion of invisibility. Built with vanilla JavaScript, the page dynamically appends 50 `div` elements to the body, styled entirely through embedded CSS. No external libraries are used; the effect relies purely on the DOM’s `createElement` method and flexbox wrapping to arrange the components.

Ppnsvk
90% match
Loading thumbnail…

Invisible dots

Fifty black, rounded squares form a silent grid on a white background, each one a uniform tile with no visible variation. The piece demonstrates a simple HTML and JavaScript loop that creates the elements using `document.createElement` and `document.body.append`, with styling applied via CSS properties for size, margin, and border-radius. There is no interaction, animation, or data binding, only the static repetition of identical shapes. The title suggests an absence or a hidden pattern, but the code does not implement any such behavior, leaving the visual composition purely as a minimal exercise in layout generation.

Ggragors123@gmail.com
89% match
Loading thumbnail…

Invisible Dots

Invisible Dots arranges 50 empty div elements in a vertical stack, each one generated by a JavaScript for loop and appended to the document body. A single small inline SVG containing a black square rect sits above them, rendered without any visible fill or stroke. The piece uses raw HTML, CSS, and JavaScript—no external libraries—to explore the contrast between an explicit graphical mark and the implicit structure of unstyled block elements. The minimal styling leaves the SVG’s default black fill as the only visual output.

Ggragors123@gmail.com
84% match
Loading thumbnail…

Polka dot

A single web page uses only CSS to create a repeating polka-dot pattern across a maroon background. The page defines a radial-gradient with two layered positions, setting tan circular dots at 20% size with transparent surroundings, tiled at a 30-pixel grid and offset by 15 pixels to form the staggered dot matrix. No JavaScript runs beyond a commented-out alert, and no external data is loaded, so the visualization is purely a static CSS background experiment from a Gist. The split view shows the CSS source alongside a live preview, with the HTML body left empty.

335degrees
74% match
Loading thumbnail…

Untitled

This example displays a grid of 50 rounded black squares arranged in a flexible, wrapping layout on a white background. It demonstrates basic DOM manipulation and styling using vanilla JavaScript and CSS. The code creates each square with `document.createElement('div')` and appends it to the body within a loop, while CSS flexbox handles the responsive positioning and border-radius for the rounded corners. The page serves as a simple exercise in programmatic element generation and layout.

KKevin Corpeny
73% match
Loading thumbnail…

500 glowing dots

Five hundred glowing dots scatter across a dark, square SVG canvas. Each dot consists of a larger outer circle filled with a cyan radial gradient and a smaller, brighter white inner circle created using SVG `radialGradient` definitions. A plain `for` loop generates the dots at random positions within a fixed boundary, using D3 v4 to append `circle` elements and apply CSS classes for styling. The result is a dense, luminous field of varied-sized orbs against a near-black background.

PPatrick Wojda
73% match