Skip to main content
SimilarExport ZIP
100%

Coloring a transparent image

✓ Published0🌍 Public
EEE2dev
Last edited Aug 26, 2019
Created on Aug 26, 2019

Three chess piece images demonstrate how SVG filters can colorize a transparent PNG. The example uses `feFlood` to generate a red fill and `feComposite` with the `in` operator to clip that fill to the image’s alpha channel, producing a solid red silhouette. A second filter additionally applies `feBlend` with `multiply` to preserve black details from the original, while the source image is a Wikimedia chess king loaded from a CDN. The code relies on pure SVG filter primitives and CSS `filter` references, with no JavaScript libraries.

AI-generated description

How to color a raster black and white image with a transparent outside. Based on https://stackoverflow.com/questions/57650474/how-to-apply-svg-filters-to-create-a-colored-svg-form-of-the-whole-silhouette/57656454

Built with blockbuilder.org

mit Licensed

Similar vizzes

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
63% match
Loading thumbnail…

Fun with &lt;text&gt;

This example demonstrates three different SVG techniques for adding a white outline to text so it remains legible over any background. The first uses two stacked `<text>` elements, the second relies on the `paint-order` attribute, and the third applies a `<filter>` with `feMorphology`, `feColorMatrix`, and `feMerge`. The map is interactive with d3.zoom for panning and zooming, and controls adjust font size, stroke width, rotation, and other text properties.

HHerst
62% match
Loading thumbnail…

Trying out some SVG

This example demonstrates two distinct SVG compositions. First, a simple hazard symbol—an orange square with two thick black diagonal lines—is drawn using primitive SVG elements within a fixed viewBox. Second, a larger, full-width SVG applies a linear gradient as a mask over a blue rectangle positioned atop a magenta one, creating a grayscale fade effect that reveals both colors. The code relies on native SVG tags including rect, line, linearGradient, and mask, with no external JavaScript libraries.

Ddmr
62% match
Loading thumbnail…

Fork of Fill & Stroke

This example demonstrates a set of SVG shapes drawn inside a red-bordered container, with a focus on how fill and stroke styles affect their appearance. The rendering uses raw SVG path elements within an HTML document, applying filters and coordinate transformations to produce the visual effects. The shapes are constructed programmatically with precise path data, showcasing the manipulation of SVG attributes in a static, non-interactive visualization. The code relies on native SVG APIs and inline styling rather than external JavaScript libraries.

Aadventuresenglish.info@gmail.com
62% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styles combine to create a visually layered composition. It shows circles and rectangles with varying fill colors, including a grouped set with a shared fill and stroke, alongside a line and a polyline path. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, along with CSS classes defined in `styles.css` to control stroke properties. Transforms apply scaling and translation, while the external stylesheet handles global body margins and overflow settings.

Kkaschifs
61% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a static composition of basic SVG shapes—circles, rectangles, lines, and a polyline path—stylized with CSS classes and inline attributes. The scene uses a transformed group to scale the entire drawing, while a nested translation positions a second group of shapes. Colors vary between explicit fills like red and green, and a shared fill applied via a group attribute, with stroke properties defined in styles.css for black lines and a custom line join. The page relies solely on native SVG markup and CSS, with no JavaScript libraries involved.

Ccharliemok
61% match
Loading thumbnail…

SVG image try!

This example shows three colored circles labeled with fruit names, where hovering over a circle displays a corresponding image and moving the mouse away hides it with a white rectangle overlay. The visualization uses D3.js v4 to bind fruit data to SVG circles and text labels, then attaches `mouseover` and `mouseout` events to trigger custom `redraw` and `eraseRedraw` functions. Images are appended as SVG `<image>` elements using `svg.append("svg:image")`, while the erasing effect is achieved by drawing a white `<rect>` over the displayed image, relying on D3’s selection and data-join methods for static rendering.

IIgathi
61% match
Loading thumbnail…

Fun with &lt;text&gt;

This demo shows three different SVG techniques for giving `<text>` elements a white outline so they remain readable on varied backgrounds: two stacked text elements with a thick stroke, one text element using the `paint-order` attribute, and a `<filter>` with `feMorphology`, `feColorMatrix`, and `feMerge` effects. A dark green backdrop provides contrast. The D3 v4 code includes zooming and panning via `d3.zoom`, and interactive controls adjust font size, stroke width, rotation, and other text properties. Users can set initial camera position and parameters through URL search parameters.

HHerst
60% match