Fork of Fork of

100%

Fork of Fork of

✓ Published0🌍 Public

Last edited Jan 16, 2022

Created on Jan 16, 2022

Forked from Fork of

This example displays a grid of fifty small, green rounded squares that are added directly to the page body. The code uses plain HTML and CSS for styling, while a simple JavaScript `for` loop with `document.createElement` and `document.body.append` generates the squares. Each square is a fixed-size `div` element, and the layout wraps them using CSS `flex-wrap`. No external libraries or data sources are used; the visualization is purely a procedural arrangement of styled elements.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

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

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

80% match

Loading thumbnail…

Fork of HTML Starter

This example renders a static SVG grid of thin vertical and horizontal lines across the full browser window, creating a Cartesian coordinate system. The code uses raw DOM manipulation with `document.createElementNS` to append individual `rect` elements to an SVG, along with helper functions `grid`, `printPattern`, and `printDiag` that position blue filled cells. It demonstrates generating geometric shapes, including diagonal lines, by placing 10-pixel squares at calculated grid intersections. No external libraries are used; the visualization relies solely on vanilla JavaScript to build the SVG structure.

SShiwam Tiwari

80% match

Loading thumbnail…

Fork of HTML Starter

This example generates a grid of 100 thin vertical rectangles on an SVG canvas using JavaScript’s `document.createElementNS` API. Each rectangle is positioned at increasing x-coordinates with a fixed width and full height, creating a striped pattern across the 960-by-500 pixel viewport. The code uses native Document Object Model (DOM) methods to build the SVG element and its children, with no external libraries or data sources. It demonstrates fundamental SVG creation and attribute manipulation in a bare HTML page.

Sscxingji

80% match

Loading thumbnail…

Test HTML

A grid of 50 black rounded squares displays a minimalist visual pattern across the viewport. Each square is a plain HTML `div` element, styled with CSS properties including `background-color`, `width`, `height`, and `border-radius`. A JavaScript `for` loop programmatically creates and appends each square to the document body using `document.createElement` and `document.body.append`. The layout uses flexbox with `flex-wrap` to arrange the squares in rows. The page contains no external libraries, relying solely on native DOM manipulation and inline CSS.

MManuela Paganini

79% match

Loading thumbnail…

Fork of React Starter

This example shows a grid of 40 by 60 red squares arranged across an SVG canvas, with each square’s width and height varying according to the cosine of its row index, creating a wave-like pattern of alternating sizes. The code uses React to render the SVG elements, with ReactDOM mounting the App component into the page. D3’s `range` function generates the row and column coordinates, while custom `makeSquare` functions produce the rectangles. The visualization demonstrates how React and D3 can be combined to generate dynamic, data-driven SVG layouts.

DDavid Emmanuel Katz

79% match

Loading thumbnail…

Fork of Fork of Fork of Random square shapes with react July 4,2022 - 2

A grid of randomly sized and colored squares, each with a thin contrasting outline, fills the viewport in an overlapping, chaotic arrangement. The squares are generated from a derived formula that calculates their positions and dimensions, while their stroke widths and RGB color values are randomized. Built with React and D3 v7, the visualization uses SVG `rect` elements and applies a drop-shadow filter for depth. The data is synthetic, computed directly in the React component rather than loaded from an external source.

NNita

78% match