Fork of Invisible Dots

100%

Fork of Invisible Dots

✓ Published0🌍 Public

Last edited May 18, 2021

Created on May 18, 2021

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.

AI-generated description

Do you see them?

MIT Licensed

Similar vizzes

Loading thumbnail…

Invisible Dots

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.

CCurran Kelleher

92% match

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

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

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

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

80% match

Loading thumbnail…

Fork of group of circles, more circles

This visualization presents a grid of 10,000 unfilled black circles arranged in a 100-by-100 array across the full browser window. The code builds the artwork using the SVG namespace with the `document.createElementNS` API, setting fixed `cx`, `cy`, and `r` attributes for each circle. It demonstrates a generative approach inspired by Sol LeWitt, creating a systematic, geometric pattern that fills the viewport without interaction or animation.

YYingkai Song

76% match

Loading thumbnail…

Fork of

This example displays a grid of small, green rounded squares that fill the browser window. The page uses plain JavaScript to create and append 50 div elements to the document body via a `for` loop, relying on the DOM API `document.createElement` and `document.body.append`. Each square has a fixed 84-pixel size and margin, positioned automatically with CSS flexbox wrapping. The visual result is a simple, uniform pattern of tiles without any interactive behavior or data-driven logic.

Kkhannoorb

75% match

Loading thumbnail…

Fork of D3 Implementation

This fork of a D3 implementation generates a grid-like pattern of horizontal and vertical bars across the full screen, masked by two overlapping circles to create an intersecting visual effect. The first mask reveals the bars only within a central white circle on a black background, while the second mask inverts this, hiding a circular section of the vertical strips. Built with D3 v7 and rendered as SVG, the code uses `d3.select`, `d3.range`, and chained `.join('rect')` operations to append and position 100 rectangles in each direction, dynamically sized to the browser window’s width and height.

Pprospirity

74% match