Untitled

100%

✓ Published0🌍 Public

Last edited Jan 19, 2023

Created on Jan 19, 2023

Two overlapping rectangles outline the same group of text elements inside an SVG. The green rectangle shows the result of calling `getBBox()`, while the red rectangle shows `getBoundingClientRect()`, highlighting how these two DOM APIs differ in their coordinate systems. The background image is loaded via CSS from Unsplash. The visualization uses vanilla JavaScript to set rectangle attributes based on these API returns, with no external libraries.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example demonstrates how to dynamically size an SVG element based on the bounding box of a text label. The page creates a single horizontal line with a centered text annotation, then draws a rounded rectangle behind the text using the dimensions returned by `getBBox()`. The SVG’s width is updated to fit the text plus padding. The code relies on native DOM methods like `createElementNS` and DOM APIs such as `setAttribute` and `getBBox`, with no external visualization libraries.

AAdrian Tudorache

75% match

Loading thumbnail…

Untitled

This example shows a static SVG canvas containing a single blue rectangle with a thick black outline and a circle positioned near its upper-left corner. The HTML document defines the SVG element with explicit width and height attributes, then draws the shapes using basic SVG primitives. The rectangle uses incorrect attribute spellings ("heigth" and "stroke" instead of "height" and "stroke"), while the circle specifies its radius and center coordinates. The visualization demonstrates fundamental vector graphics rendering through raw SVG markup embedded directly in an HTML page without any external libraries or JavaScript.

CCK-Langat

74% match

Loading thumbnail…

SVG Example

This SVG example displays three overlapping semi-transparent rectangles in red, blue, and yellow against a dark navy background with large white text. The visualization demonstrates basic vector graphics capabilities using raw SVG elements including rect and text tags within an HTML document. The page imports D3.js via ES6 modules and uses select to update a message div, while external styling comes from Google Fonts and custom CSS. The rendering shows simple shape composition and color blending through opacity.

JJinlin

74% match

Loading thumbnail…

SVG Example

This example demonstrates basic SVG rendering with two overlapping rectangles—a red square and a semi-transparent blue square—positioned to show color blending. The visualization uses raw SVG elements defined directly in the HTML document, with explicit width and height attributes on the `<svg>` tag and fill colors applied via the `fill` property with RGBA values. The code also imports D3’s `select` function to update a separate message element, though the primary visual output relies solely on static SVG markup rather than data-driven generation.

JJinlin

74% match

Loading thumbnail…

Untitled

This example displays a static SVG scene containing a rotated green rectangle and a red circle, positioned inside a group that is translated and rotated relative to the canvas. The SVG is embedded directly in an HTML page and uses the D3.js v4 library, loaded via a script tag. Rendered with SVG, the graphics are defined declaratively, with the group transform applying rotation and translation to both shapes.

MMiha Tomšič

74% match

Loading thumbnail…

Untitled

This example shows two overlapping circles rendered as SVG elements on a blank HTML page. The first circle is positioned at coordinates (50, 50) with a radius of 50 and uses the default black fill, while the second circle is placed at (100, 50) with the same radius but a red fill, creating a simple visual comparison of offset shapes. The code directly embeds the SVG markup inside the HTML body without any JavaScript or CSS styling, relying solely on the browser’s native SVG rendering.

KKazuma Sadakane

74% match

Loading thumbnail…

SVG Example

This example demonstrates overlapping semi-transparent rectangles in a 500-by-500 SVG canvas, using CSS rgba values to create blended color regions. The visualization is rendered entirely with inline SVG elements, and the page includes a large styled message text via D3's `select` function. Index.js imports D3 and a local ES6 module to set the text content, while styles.css applies a dark background and Ubuntu font. The code shows basic SVG shapes without interaction or data binding, highlighting fundamental SVG rendering and module imports.

JJinlin

73% match

Loading thumbnail…

SVG Fundamentals

Four overlaid rounded rectangles demonstrate core SVG fundamentals within a D3.js v5 environment. The visualization shows two overlapping shapes with varying corner radii, positioned using both pixel and viewport-height units. One red and one green rectangle dominate the center, while a pair of small vertical bars in red and green sit offset to the right, each with distinct dimensions. The code explicitly defines the SVG canvas, `rect` elements, and fill attributes, while a separate script imports D3’s `select` function and a local module to display a text message.

CCreighton Chingarande

73% match