SVG Example

100%

✓ Published0🌍 Public

Last edited Aug 8, 2019

Created on Aug 7, 2019

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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

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

89% match

Loading thumbnail…

SVG Example

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.

Aa-ydobon

89% match

Loading thumbnail…

SVG with HTML

This example demonstrates a static SVG scene composed of basic geometric shapes—a magenta circle, a red rectangle, a thick black line, and a triangular path—drawn directly in the HTML markup with fixed coordinates and styling. The page also includes a JavaScript module that imports D3’s `select` function to update the text of a `#message` div, while a separate CSS file sets a cyan background and hides overflow. The rendering relies entirely on SVG elements defined in the source, with no data binding or interaction.

SSushant Kunkekar

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

80% 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…

svg3

This example demonstrates fundamental SVG shape construction using raw SVG elements within an HTML document. The page displays overlapping red and green circles, a navy diagonal line, a custom path forming a horizontal capsule shape, and a black polyline path with a right-angle turn. The SVG canvas is set to 960 by 500 pixels with hidden page overflow. The code uses literal SVG tags such as `<circle>`, `<line>`, and `<path>`, with explicit coordinate and styling attributes, including fill colors, stroke colors, and stroke widths. A commented-out rectangle shows an alternative shape configuration without rendering it.

Yyesyesnono01@yahoo.com

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

79% match