Rectangles

100%

✓ Published1🌍 Public

Last edited Aug 5, 2022

Created on Aug 5, 2022

Forked from Circles

This example centers a single green rectangle on a gray SVG canvas, sized to half the viewport’s width and height. A pink page background and red SVG border frame the composition. The code uses vanilla JavaScript to query the SVG element via `document.querySelector`, reads its `clientWidth` and `clientHeight`, then sets the rectangle’s `x`, `y`, `width`, and `height` attributes dynamically. CSS styles the body and a `.center` class, while the rectangle receives its fill, yellow stroke, and stroke width through `setAttribute` calls.

AI-generated description

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

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including circles, rectangles, and lines, arranged on a 960 by 500 canvas. It shows how basic attributes like position, radius, fill color, stroke, and stroke-width control the appearance of each element, with a blue outer rectangle framing the composition. The code uses plain SVG markup within an HTML page, relying on CSS and JavaScript as listed in the accompanying README. A red diagonal line and a yellow rectangle with a thick navy border illustrate varying styling options.

Aaasiasattar

79% match

Loading thumbnail…

Rectangles coordinates when translated

Five semi-transparent squares arranged around a common center demonstrate how SVG translation affects a rectangle’s coordinate system. A red, green, blue, and yellow square sit at the cardinal offsets from the origin, while a magenta square is centered at half the rectangle’s width and height. Using React with D3 v5, the `<g>` element’s `transform` attribute shifts all children via `translate(480,250)`. The code defines reusable `MyRect` components, passing explicit `xPos` and `yPos` props, and renders them into an SVG with a light gray background.

NNita

77% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates how to draw nested rectangles in an SVG canvas. The code uses raw SVG elements, specifically `<rect>` tags, to create a blue inner rectangle inside a light blue outer rectangle, both with rounded corners. The rectangles are styled using inline `fill` attributes and positioned via `x` and `y` coordinates. The HTML page includes minimal CSS and JavaScript structure, with the SVG markup written directly in the body. The visualization relies on the SVG rendering approach without any additional JavaScript libraries.

Bbarryhillier

77% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shapes—circles and a rectangle—positioned within a 960-by-500 viewport using fixed coordinates. The circles use blue, red, black, and green fills, while the rectangle employs an orange fill with a navy stroke and a stroke-width of 1. Rendering is achieved directly through inline SVG markup in an HTML file, with no JavaScript libraries or external dependencies. It serves as a minimal introduction to SVG fundamentals, showing how shape attributes like cx, cy, r, x, y, width, height, and fill control appearance and placement.

EElla Kim

77% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—three circles and a rectangle—arranged on a canvas to show basic positioning, sizing, and styling. The circles use different fill colors, while the rectangle combines a pink fill, navy stroke, and a stroke width of two pixels. The code defines the SVG element directly in HTML with inline CSS setting the width to 800 pixels and height to 500 pixels. No external libraries like D3 are used; instead, it relies purely on native SVG markup and CSS properties.

MmyN3RD

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

77% match

Loading thumbnail…

SVG fundamentals

This example demonstrates the fundamental building blocks of SVG by constructing a single rectangle using raw DOM manipulation. The code programmatically creates an SVG element and a rect child node via the `document.createElementNS` API, setting explicit width and height attributes of 960 by 500 pixels for the canvas and 100 by 100 for the shape. It shows how to manually build SVG graphics without any visualization library, relying solely on native browser methods and CSS styling for the page layout. The rectangle is appended directly to the body, illustrating the basic SVG creation workflow.

Sslyfer-cell

76% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental shapes available in SVG, including circles, rectangles, and lines, each with configurable position, size, and styling attributes. The visualization uses raw SVG markup embedded directly in an HTML page, illustrating how to set fill colors, stroke colors, and stroke widths. The code shows a blue-bordered rectangle spanning most of the canvas, with a series of colored circles across the top, a large yellow rectangle with a navy border in the middle, and a diagonal navy line, providing a static but clear reference for basic SVG drawing within a React-based framework context.

Jjoaosimuai

76% match