CSS Mask test

100%

✓ Published0🌍 Public

Last edited Mar 9, 2017

Created on Mar 9, 2017

This example demonstrates CSS masking by using a sprite sheet of glyph icons as a mask image, with separate icon classes that shift the mask position to reveal different shapes. The code defines `.maskicon` and `.maskicon-alpha` classes that apply the `-webkit-mask-image` property with a Bootstrap halflings sprite, coloring the masked areas green or semi-transparent black, while a parallel `.icon` class shows the traditional background-position sprite technique. The example directly compares the two approaches, highlighting how CSS masks can recolor icons without altering the source image. It relies solely on CSS styling and the Bootstrap sprite asset, with no JavaScript libraries involved.

AI-generated description

Playing with CSS masking sprites.

forked from <a href='http://bl.ocks.org/nmu/'>nmu</a>'s block: <a href='http://bl.ocks.org/nmu/7997037'>CSS Sprite Mask</a>

mit Licensed

Similar vizzes

Loading thumbnail…

CSS Mask test

This example demonstrates how CSS masking can display icons from a sprite sheet in different colors and levels of transparency. It uses the `-webkit-mask-image` property with the Bootstrap glyphicons halflings sprite as the mask source, applying solid green and semi-transparent black background colors to the masked elements. The code also includes a traditional CSS sprite technique using `background-image` and `background-position` to show the same icons unmasked, allowing for a side-by-side comparison of the two rendering approaches.

TThanaporn-sk

97% match

Loading thumbnail…

Gist 1057445

This example demonstrates a CSS sprite-based icon system where two distinct states—overview and demographics—are rendered as background images with active-state variations, using offset positioning to switch between icons. The code relies on Compass’s sprite helpers and a Sass `@each` loop to generate the `.icons-overview` and `.icons-demographics` classes, while manually specifying `background-position` values (e.g., `20px -70px` and `20px 12px`) to align the correct sprite icons. The active states toggle background positions via pseudo-classes like `:active` and custom classes such as `.overview_active`. The implementation uses the `icons-sprite` mixin from Compass, with the sprite file referenced from an external asset path. No data or interactive behavior is present; it purely showcases static UI icon styling.

CCaged

68% match

Loading thumbnail…

mask experiments

This example demonstrates the interplay of two complementary SVG masks. It first shows a set of horizontal stripes visible only within a circular window, then displays vertical stripes that are hidden inside the circle while remaining visible outside it. The piece creates a stark geometric contrast between the two masked regions. The visualization is generated entirely with the SVG `mask` element and basic `rect` and `circle` primitives, using white and black fills to define luminosity. The code dynamically constructs one hundred stripes for each orientation, with the masks applied via URL references to `#circle-mask` and `#circle-mask-2`.

Sscheenmi@gmail.com

66% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates how SVG masks can create a circular window onto layered geometric patterns. Using the native SVG DOM API, the code constructs fifty horizontal and fifty vertical rectangles, each with vibrant default colors, and applies two different masks to control their visibility. The first mask, built from a black rectangle and white circle, reveals only the horizontal bars inside the circle, while the second mask, with inverted colors, shows the vertical bars outside the circle’s edge. The result is a clean, mask-driven interplay of striped shapes across the full browser viewport.

Aalexis.delacotte@gmail.com

65% match

Loading thumbnail…

Full MaskTest 1

This example demonstrates a mask-based visual effect that combines two sets of overlapping SVG rectangles, creating a crosshatch pattern of thin horizontal and vertical lines. The full viewport is covered by 100 horizontal and 100 vertical strips, each partially revealed through circular mask regions defined using D3’s `symbol` API. Two masks are layered: the first shows a white circle against a black background, while the second inverts the circle’s role, allowing the rectangles to appear only outside the central circular area. The rendering uses D3 version 6.6.1 with SVG output.

Zzhansihua

64% match

Loading thumbnail…

JS practice

This example demonstrates how SVG masks can combine two complementary cutout patterns. It renders a full-screen SVG canvas where a grid of vertical and horizontal rectangles is layered, with each set masked by a distinct circular hole centered in the viewport. The code uses the raw SVG DOM API via `document.createElementNS` to build masks, rectangles, and the masking circles, setting attributes like `mask` and `fill` directly. No JavaScript libraries are used; the result is a visible intersection of the two mask shapes across the rectangle layers.

CCameron Wehr

64% match

Loading thumbnail…

MaskTest

This example demonstrates how SVG masks can create intersecting geometric patterns. Two sets of thin, full-length rectangles—horizontal and vertical—are drawn across the entire viewport using d3.range and d3.selectAll. Each set applies a different circular mask: one reveals a white circle against a black background, while the other inverts the mask, hiding the circle. The result is a crosshatched grid with a central circular region where the two masked layers visibly interact. The code uses D3 v6 selections and the SVG `<mask>` element.

Zzhansihua

64% match

Loading thumbnail…

svg mask

This example demonstrates the visual effect of SVG masks by layering horizontal and vertical stripes over a full-viewport canvas. It creates two circular masks, one with a white circle on a black background and the other with a black circle on a white background, then applies them to alternating sets of 50 thin rectangles. The code builds the entire scene programmatically using the Document Object Model (DOM) methods such as `createElementNS` and `setAttribute`, without any external libraries, and renders everything directly in SVG.

Sserebryanaya.n@gmail.com

64% match