Document

100%

✓ Published0🌍 Public

Last edited Oct 22, 2023

Created on Oct 21, 2023

This example displays a solid black rectangle that fills the entire SVG viewport. The visualization is rendered using the SVG API, creating a `rect` element with a specified width, height, and fill color. The code dynamically generates SVG elements via JavaScript's `createElement` method, appending them to the body. It uses no external libraries or data sources, instead presenting a static, minimal visual output.

AI-generated description

Test 1

MIT Licensed

Similar vizzes

Loading thumbnail…

Document

This example displays a single red SVG rectangle that fills the entire 960 by 500 pixel viewport. Using D3 v6, the code selects the SVG element and applies the background color directly through its style property. The visualization demonstrates the simplest possible rendering approach, where a static shape is styled without any data binding or interactive behavior. The HTML page loads the D3 library from a CDN and runs the JavaScript which modifies the SVG element.

GGal Thelander

79% match

Loading thumbnail…

Blank Canvas

This example displays a black full-screen rectangle with rounded corners on a blank SVG canvas. It uses D3 v5’s `select` method to attach to the SVG element, sets its dimensions to match the browser viewport, and appends a `rect` with an `rx` of 40 pixels. The visualization demonstrates minimal SVG rendering with a simple, static geometric shape, relying on inline JavaScript and CSS to fill the entire screen.

HHasideluxe

76% match

Loading thumbnail…

Black Canvas

A black rectangle fills the entire browser viewport. The example is a minimal demonstration of a full-screen SVG canvas. The code sets the SVG's `width` and `height` attributes to the dimensions of the document's client area, then appends a single `rect` element with a rounded corner radius of 40 pixels. It relies on D3 v5's `select` function to fetch the SVG element and chain attribute modifications, resulting in a clean, static visual that highlights the root SVG element on a fixed, overflow-hidden body.

EEdoardoRegini

76% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates two SVG rectangles: a solid black square at the origin and a green-outlined square with no fill. The page uses hand-coded SVG elements within an HTML document, styled minimally with CSS. It serves as a bare-bones introduction to the SVG shape API, showing how width, height, x and y coordinates, fill, and stroke attributes control rendering. The code relies solely on native browser SVG support, with no JavaScript libraries or data sources involved.

Ssadiik0023

76% match

Loading thumbnail…

Black canvas

A full-screen black rectangle fills the browser viewport, rendered as an SVG `<rect>` element. The example demonstrates a minimal setup where the page is fixed to the viewport dimensions and the rectangle is sized to match the window’s client height and width using D3’s `select` and `attr` methods. The code uses D3 v5 to append the rectangle to the SVG, with no additional data or interaction. The rectangle’s fill color is not specified, leaving the default black appearance from the page background.

AAaron Goebel

75% match

Loading thumbnail…

SVG starter

This example displays a single empty SVG canvas with a small black square in the upper-left corner, created entirely through JavaScript. The code uses the Document API’s `createElementNS` method to construct the SVG namespace elements and `setAttribute` to set the canvas dimensions (960 by 500) and the rectangle’s size (100 by 100). The SVG is appended directly to the page body, with no external data source or interaction, demonstrating the lowest-level programmatic approach to SVG generation without any helper libraries.

HHamim Rahman

75% match

Loading thumbnail…

Blank Canvas!

A black rounded rectangle fills the entire browser window, creating a stark, minimalist blank canvas. The visualization uses D3 v5’s `select` method to target the SVG element, then sets its width and height to match the viewport dimensions. It appends a single `rect` with rounded corners (`rx`) and a black fill via CSS. The code dynamically reads `document.body.clientWidth` and `clientHeight` to size the graphic responsively, demonstrating a simple SVG rendering approach with no data or interaction.

AAbhijeet Panda

75% match

Loading thumbnail…

Blank canvas

This blank canvas demonstrates an empty SVG viewport that fills the browser window. The visualization shows a single rounded rectangle covering the entire display area, creating a blank slate. The code uses D3 v5's `select` method to target the SVG element and chain attribute setters for width and height. It retrieves the viewport dimensions from `document.body.clientHeight` and `document.body.clientWidth`, then appends the rectangle with rounded corners via the `rx` attribute, all rendered as vector graphics.

JJacob van Lingen

75% match