Ejercicio clase 3

100%

Ejercicio clase 3

✓ Published0🌍 Public

Last edited Sep 2, 2025

Created on Sep 2, 2025

An abstract, generative composition uses two SVG masks to reveal intersecting rectangular grids. The first mask, defined with a `<rect>`, limits a series of horizontal strips to a central vertical band, while the second mask combines a white background with a black `<rect>` to define a complementary area for vertical strips. The resulting visual, created with 100 elements per axis, produces a woven or striped pattern using only white and black. The code demonstrates dynamic SVG creation and mask application without any external libraries.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt dos mascaras

This example generates a dynamic, Sol LeWitt-inspired abstract composition using an SVG mask API. Two masks invert visibility: the first reveals a circle of horizontal stripes, while the second displays vertical stripes within a donut-shaped region. The code uses pure JavaScript and the Document Object Model (DOM) to create SVG elements, including `<mask>`, `<circle>`, and `<rect>` tags, without any external libraries. Rendering relies on the viewport’s width and height to size the artwork, which appears as an interplay of masked rectangular stripes.

SSergio

80% match

Loading thumbnail…

Fork of Chapter 3 - D3 - uso clases

This example creates an abstract Sol LeWitt-inspired drawing using SVG masks. It renders a grid of alternating horizontal and vertical rectangles that are partially revealed through two circular masks, producing an interplay of visible and hidden stripes. The code uses D3's `select`, `range`, and `join` API to generate the rectangles and construct the masks. The visualization is built with a Vue-based D3 version (v3), rendering to SVG, with the masks defined as `mask` elements containing `rect` and `circle` shapes.

SSergio

80% match

Loading thumbnail…

Fork of Fork of Chapter 3 - D3 - uso de group

This example generates a Sol Lewitt-inspired geometric composition using D3 v6 and SVG. It draws 100 horizontal and vertical rectangles across the full viewport, then applies two complementary circle masks to cut out circular voids and reveal the grid within. The code uses D3 selections, `range`, and `join` to create the rect elements, while `append('mask')` constructs custom mask definitions that alternate black and white fills to control visibility.

SSergio

78% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamentals of SVG masks and animation by creating a dynamic geometric composition. The code generates 50 horizontal black rectangles with a circular mask, layered over 50 vertical color-scaled rectangles with a second mask, producing an intersecting grid pattern. A JavaScript `animate` element continuously adjusts the height of the colored rectangles from half the screen height to full height over a 2-second cycle. The visualization uses raw SVG element creation via `document.createElementNS` and a hardcoded 10-color palette, with masks defined as circle and rect shapes.

JJignesh Mistry

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

76% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates SVG masking by layering a grid of horizontal and vertical rectangles over a circular cutout. The rectangles are created dynamically using the DOM API `document.createElementNS` with the SVG namespace. Two complementary masks, `circle-mask` and `circle-mask-2`, alternate between white and black fills to control visibility, producing a striped pattern inside the circle while keeping the surrounding area solid. The code relies on raw SVG manipulation rather than a visualization library, with only the `d3-selection` API imported but not actively used.

AAitorGD

75% match

Loading thumbnail…

SVG and Javascript

This example demonstrates how SVG masks can dynamically composite shapes to create an intricate visual pattern. Two circular masks—one black and one white—are layered with alternating sets of thin rectangular stripes, generating a crosshatched grid that reveals or hides sections of the canvas. The code uses raw JavaScript DOM manipulation with `document.createElementNS` to build SVG elements dynamically, computing positions based on `window.innerWidth` and `window.innerHeight`. No external libraries are employed; the rendering relies entirely on native SVG mask and rectangle elements.

GGiacomo Rossoni

75% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG masking with intersecting grid lines. Horizontal and vertical rectangles form a crosshatch pattern across a 960×500 canvas. Two circular masks reveal different portions: the first shows the grid inside a centered circle, while the second displays the grid outside it, creating complementary visual regions. The code uses D3 v6 selection methods like `select`, `append`, `selectAll`, and `join` to generate 100 rects in each direction. React handles page setup, while SVG `mask` elements with black and white fill shapes define the visibility areas.

AAditya Joshi

75% match