SVG Example

100%

✓ Published0🌍 Public

Last edited Aug 9, 2019

Created on Aug 9, 2019

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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

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

85% match

Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG shapes—a circle, a rectangle, a line, and a path—rendered within an 800 by 450 canvas. CSS styles define interactive transitions, changing the rectangle’s fill and stroke on hover over three seconds. The page also loads D3 via UNPKG, imports the `select` function, and uses it to set text content, alongside local ES6 module imports for a message.

Rrimi-299

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

79% match

Loading thumbnail…

SVG

This example demonstrates basic SVG rendering primitives within an HTML page, composing geometric shapes inside a 960 by 500 canvas. The visualization shows how circles, rectangles, lines, and paths are positioned and styled, with one group translated and separately stroked. It relies on the raw SVG API (no external libraries), using attributes like `transform`, `stroke`, `fill`, and path data (`d`) to control appearance and layout, with CSS setting the overall page margins and overflow.

YYash G

79% match

Loading thumbnail…

SVG Demo

This example demonstrates basic Scalable Vector Graphics (SVG) shapes, including circles, rectangles, lines, and paths, rendered directly in an HTML page. The visualization uses inline SVG elements within an `index.html` file, with styling applied via an external `styles.css` stylesheet. The SVG canvas is scaled and translated using SVG transform attributes, while CSS classes like `.lines` and `.c3` control stroke colors, widths, and fill properties for grouped elements. The code highlights how SVG’s native coordinate system and CSS cascading rules combine to define a static, vector-based graphic.

GGabrz

78% match