Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Example with RGBA

Public visualization

SVG Example with RGBA

0 stars0🌍 Public
CCurran Kelleher
Last edited Jan 30, 2021
Created on Jan 30, 2021
Forked from HTML Starter

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.

AI-generated description

RGBA colors can specify opacity (alpha).

For example rgba(0, 255, 0, 0.5) means "make it green, with an opacity of 0.5 (50% transparent)".

<iframe height="250" width="100%" src="https://vizhub.com/curran/b1b33371dd3745298ffc77f4880ff6e8?mode=snippet&file=index.html#L21" title="SVG Example with RGBA" frameborder="0" ></iframe>

From Intro to D3.

Comments

Sign in to join the discussion.

MIT Licensed