SVGs inside DIVs

100%

SVGs inside DIVs

✓ Published0🌍 Public

Last edited Jul 14, 2020

Created on Jul 14, 2020

This example demonstrates a split-pane layout with two resizable regions, one styled with a red background and the other green, created using a flexbox container and the `body` element fixed to the viewport. The left pane contains an SVG element, which uses a `<rect>` with a gray fill and dimensions of 500 by 900 pixels, and is scrollable via `overflow: auto`. The right pane is initially empty, and D3 v5 is loaded but not yet used for any drawing. The page structure is defined by `index.html` with `styles.css` providing the layout, while no JavaScript beyond the included script tags is visible.

AI-generated description

An example showing how to set up a split pane with two SVGs.

MIT Licensed

Similar vizzes

Loading thumbnail…

Document

This example displays a single red SVG rectangle that fills the entire 960 by 500 pixel viewport. Using D3 v6, the code selects the SVG element and applies the background color directly through its style property. The visualization demonstrates the simplest possible rendering approach, where a static shape is styled without any data binding or interactive behavior. The HTML page loads the D3 library from a CDN and runs the JavaScript which modifies the SVG element.

GGal Thelander

75% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates foundational techniques for creating vector graphics using native SVG elements embedded in HTML. The page displays a grid of alternating blue and red rectangles, overlaid with white, blue, and red circles, and a large red stroked circle, all constructed with explicit SVG tags. The code uses CSS to define a transition effect on rectangle elements, which animates their properties, and a hover rule that is invalidly written with an equals sign instead of a colon. The rendering is fully client-side through the SVG specification, with no external JavaScript libraries involved.

Dd-schwabe

74% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a minimalist SVG visualization with a solid red background, created using D3 v5 to select the SVG element and apply inline styling. The page loads D3 from a CDN and runs a bundled script that changes the SVG’s background color to red. The accompanying CSS resets the body margin and hides overflow, ensuring the red rectangle fills the viewport without scrollbars. The visualization relies on D3’s `select` API and native SVG rendering, with no additional data or interactive elements.

CChia-KaiYang

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

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

73% match

Loading thumbnail…

SVG Injection

This example demonstrates injecting HTML and SVG elements into a webpage using D3.js version 6. The code uses `d3.select` to target a div, appends a styled header, and creates an SVG canvas with a series of colorful circles. Each circle’s position, radius, and fill color are sequentially modified within a loop to produce a gradient-like visual effect. The example relies on D3’s `append` and `attr` methods, along with inline CSS styling, to render the final composition.

SSreenivasulu

72% match

Loading thumbnail…

Welcome to D3JS

Three separate headings frame a red SVG square. Built with the D3.js v5 library, the visualization uses `d3.select` to target the SVG element and applies a red background via `svg.style`. The page combines vanilla HTML, an external stylesheet that resets margins, and JavaScript that also logs the D3 object to the console. This React-hosted example demonstrates D3’s DOM selection and styling methods within a minimal document structure.

DDextor

72% match