Black canvas

100%

✓ Published2🌍 Public

Last edited Apr 8, 2020

Created on Apr 8, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

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

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

90% match

Loading thumbnail…

Blank Canvas

A blank SVG canvas fills the browser viewport, rendered as a single rounded rectangle that adapts to the window’s dimensions. The example demonstrates a minimal setup for D3 v5 with React, using `select` from `d3` to target the `<svg>` element and setting its `width` and `height` attributes based on `document.body.clientWidth` and `document.body.clientHeight`. The code appends a `rect` with a 40-pixel corner radius via SVG’s `rx` attribute, while the stylesheet fixes the body to prevent scrolling. It serves as a starting point for building more complex visualizations.

GGino Dzin

87% match

Loading thumbnail…

Black Canva

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.

Lloicvdk

87% match

Loading thumbnail…

blank canvas

A blank SVG canvas fills the browser viewport, with a single rounded rectangle drawn to match the full window dimensions. The example demonstrates the minimal setup for a D3.js visualization within a React framework, using d3.select to target the SVG element and append a rect with computed clientWidth and clientHeight. The rect’s rounded corners are set via the rx attribute, while the body’s fixed positioning and hidden overflow ensure the canvas remains static and edge-to-edge.

Ssingularity6033

87% match

Loading thumbnail…

Blanck Canvas with D3.js

A full-screen SVG canvas is rendered with a rounded rectangle filling the entire viewport, creating a blank drawing surface for custom D3.js visualizations. The example demonstrates a minimal setup where the canvas dimensions are set dynamically from `document.body.clientWidth` and `document.body.clientHeight`, and the `select` API from D3 v5 is used to target the SVG element and append the rectangle. The code is structured for React integration with an external `bundle.js` file, and the rendering is purely vector-based using SVG attributes like `width`, `height`, and `rx` for corner rounding.

Ssiddharth171

86% match