Skip to main content
SimilarExport ZIP
100%

Blank Canvas

✓ Published1🌍 Public
HHasideluxe
Last edited Jul 28, 2020
Created on Jul 28, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Blank Canvas

This example renders a full-screen black canvas with a single rounded rectangle drawn across the entire viewport. The visualization uses D3.js to select the SVG element and dynamically set its width and height based on the browser window’s client dimensions. The rectangle is appended with a corner radius of 40 pixels, while CSS fixes the body and disables scrolling. The page relies on D3’s `select` and `attr` methods, producing a minimal, static composition that highlights empty space.

Ddanrhymes
94% match
Loading thumbnail…

Blank Canvas

A blank, rounded rectangle fills the entire browser window. The visualization is a minimal SVG canvas that demonstrates the use of D3 v5's `select` method to resize an SVG element to the full width and height of the viewport. The code appends a single `rect` element with a 40-pixel corner radius, relying on the document's client dimensions. No data or interaction is present; the example focuses solely on the fundamental setup of an SVG drawing space.

VVito
93% match
Loading thumbnail…

Blank Canvas

A blank SVG canvas fills the browser window with a single rounded rectangle. The visualization demonstrates minimal setup using D3 v5, where the `select` method targets the SVG element and sets its dimensions to match the viewport. A rect with a 40-pixel corner radius is appended to create the sole visual element. The example relies on the document body's client dimensions to size the canvas, with CSS constraining the page layout to prevent scrolling.

AAndreas Loew
93% match
Loading thumbnail…

Blank Canvas

A blank, full-screen SVG rectangle with rounded corners serves as the canvas. The example demonstrates a minimal setup using D3 v5, where the `select` function targets the SVG and sets its dimensions to match the viewport. It appends a single `rect` element with a rounded corner radius, filling the entire space. The code highlights basic SVG rendering and dynamic sizing based on the browser window.

SSimon Pettersson
93% match
Loading thumbnail…

Blank Canvas

A full-window, rounded rectangle fills the browser viewport as a blank canvas, rendered as a static SVG shape. The visualization demonstrates a minimalist setup using D3 v5’s `select` to target the SVG element and set its width and height attributes based on the document’s client dimensions. A single `rect` is appended with a large corner radius (`rx` of 40), and CSS fixes the body to eliminate scrolling. No data or interactive behavior is present; the piece simply showcases a clean, borderless visual starting point.

Fforeverworld1879
93% match
Loading thumbnail…

Blank Canvas

A blank, rounded rectangle fills the entire browser viewport, serving as a minimal canvas with no data or marks rendered. The SVG element is dynamically sized to match the window dimensions using the D3v5 `select` API, and a single `rect` is appended with a 40-pixel corner radius. The complete visual result is a simple, frameless field, demonstrating basic SVG construction with D3’s selection and attribute-chaining methods against a fixed-position, full-screen body.

Vvaynexie
93% match
Loading thumbnail…

Blank Canvas

A full-screen SVG canvas displays only a rounded rectangle drawn with D3's `select` and `append`. The rectangle fills the viewport dimensions, which are read from `document.body.clientWidth` and `clientHeight`. The visualization uses a minimal blank state with no explicit data source; the code sets the SVG's width and height attributes and applies a 40-pixel corner radius via `attr('rx', 40)`. No additional interactions or updates occur, leaving a static, empty composition.

Ddanielchamone
93% match
Loading thumbnail…

Blank Canvas

This example presents a minimalist, full-screen blank canvas rendered as a rounded rectangle. The visualization simply sizes an SVG element to the browser window's dimensions and fills it with a single rounded rectangle, offering no data or interaction. The code uses D3 v6's `select` function to target the SVG element and its attribute chaining to set width, height, and corner radius. The rendering approach relies on the SVG `rect` element, with dimensions derived directly from the document body's client width and height.

HHe Jianfeng
93% match