Black Canva

100%

✓ Published0🌍 Public

Last edited Jul 27, 2020

Created on Jul 27, 2020

A black rounded rectangle fills the entire browser viewport. The visualization adapts to the screen size by querying the document body's dimensions and setting the SVG's width and height attributes accordingly. The code uses d3.select to target the SVG element, then appends a rect with a corner radius of 100 pixels. The SVG is rendered in the browser, with the script loading d3 v5 from the unpkg CDN. The rect's dimensions match the computed viewport size, creating a simple full-screen black canvas with softly rounded corners.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Black canvas

A full-screen black rectangle with rounded corners fills the browser viewport, rendered as an SVG element. The visualization demonstrates how to set up a minimal D3.js v5 environment within a React framework, using `d3.select` to target the SVG and dynamically sizing it to the document body’s client height and width. The code appends a single `rect` with a 40-pixel corner radius, showcasing basic SVG attribute manipulation without data or interaction. The stylesheet locks the body’s position to prevent scrolling, ensuring the canvas remains fixed.

Eevapavlinek

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

86% match

Loading thumbnail…

Black Canvas

Using D3 v5, this example fills the browser viewport with a single black SVG rectangle whose corners are rounded by an `rx` of 40. The rectangle’s dimensions are set from `document.body.clientWidth` and `clientHeight` via `select("svg").attr("width")` and `.attr("height")`. The visualization demonstrates a minimal, full-screen canvas with no interactive elements, relying solely on SVG attributes for sizing.

Ssploitfun

85% match

Loading thumbnail…

Black Canvas

The visualization displays only a large black rounded rectangle rendered across the full viewport, with no data marks or interactive elements. The code uses d3.select and d3.arc to manipulate the SVG canvas, setting its dimensions to the browser’s client height and width, then appending a `<rect>` element with corner radius 50. The fixed, full-screen body styling combined with the centered 13em font size suggests a minimalist, title-like presentation. The example demonstrates basic D3 SVG construction without any data source, relying solely on DOM geometry and styling.

EEngine194

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

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

80% match

Loading thumbnail…

Black Canvas

This example displays a black rectangle on an SVG canvas using the D3.js library. It creates an SVG element via `d3.select` and appends to it a rectangular shape with specified width and height attributes. The code sets the SVG canvas dimensions to 960 by 800 pixels, though the rectangle itself occupies a smaller 500 by 100 pixel area. The visualization is rendered as SVG, with the canvas initially having no default dimensions until explicitly assigned in the JavaScript. The data source is not provided, as the example focuses solely on basic SVG shape creation.

NNita

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

80% match