Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Example with RGBA

Public visualization

Viewing a saved revision (read-only)

8a7dda006bf143ce9660b66fe9be36db

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.