SVG Example

100%

✓ Published1🌍 Public

Last edited Aug 7, 2019

Created on Aug 6, 2019

This example demonstrates basic SVG shapes arranged to show color blending through overlapping rectangles. The visualization uses three semi-transparent rectangles in red, blue, and yellow, which combine to create secondary colors where they intersect. The markup is hand-written SVG directly in the HTML file, with dimensions fixed at 500 by 500 pixels. The code also imports D3’s `select` function to update text content in the page, showcasing how D3 can complement pure SVG rendering.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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

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

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

85% match

Loading thumbnail…

SVG Example with RGBA

This example demonstrates how SVG shapes can use RGBA colors to achieve opacity. Two rectangles are drawn on an SVG canvas using the `rect` element, with the first filled in solid red via `rgb(255, 0, 0)`. The second rectangle, partially overlapping the first, uses `rgba(0, 255, 0, 0.5)` to render green with 50% transparency, creating a blended color where the shapes intersect. The code uses a `<g>` element with a `transform` attribute for positioning, and the SVG is embedded directly in HTML.

CCurran Kelleher

80% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to create a static, colorful composition. It shows a blank 960x500 SVG canvas with a pink background, rendered as a single empty graphic. The visualization uses d3.select to target the SVG element and applies a background color via the style method, while an external stylesheet sets the page margin and overflow. The code relies on D3 v5 and SVG, with a linked bundle.js file that contains the selection logic.

EElvira

79% match

Loading thumbnail…

Example

This example demonstrates a static composition of basic geometric shapes rendered as SVG, including green, blue, and red circles, a black-bordered rectangle, a thick navy line, and a single path. The visualization uses raw SVG elements defined directly in the HTML, without any JavaScript libraries or data-binding frameworks. CSS applies a 3000-millisecond transition to the rectangles’ stroke properties, though no animated changes are triggered dynamically. The layout is fixed within a 960-by-500 viewport, with a large margin around the canvas, emphasizing the simple arrangement of shapes over data-driven content.

Ssz2036

79% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, showing layered circles and a styled rectangle within a 960-by-500 viewport. It uses plain SVG markup with inline attributes to control fill colors, strokes, and dimensions, including overlapping red and green circles and a yellow rectangle with a thick navy border. The visualization highlights basic vector graphics rendering in the browser without relying on any JavaScript libraries, serving as a static illustration of SVG’s core drawing capabilities.

DDhruva654

79% match

Loading thumbnail…

SVG Shapes Dude

A simple, static SVG composition displays overlapping geometric shapes: a large red-stroked blue circle, two yellow rectangles, a red diagonal line, and a white triangular path with rounded joins. The visualization relies entirely on raw SVG elements—circle, rect, line, and path—with stroke and fill attributes set directly in the markup. The embedded CSS file only styles a text class and is unused for the shapes. No JavaScript or data is involved; the rendering approach is purely declarative SVG within an HTML page.

Aarontha

79% match