Fork of Fork sol assignment

100%

Fork of Fork sol assignment

✓ Published0🌍 Public

Last edited Nov 25, 2023

Created on Nov 25, 2023

This example uses raw SVG and JavaScript to create an animated, mask-based optical illusion. It shows a single, complex blob-shaped path that is duplicated and used as a mask to alternately reveal and hide a grid of horizontal and vertical lines. The two mask layers, defined with inline CSS `@keyframes` animations, rotate the blob path in opposite directions, creating a dynamic interplay of shapes and lines. The visualization is rendered entirely in the browser using the Document Object Model (DOM) to construct SVG elements, with no external data sources or libraries.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork sol assignment

This example renders a heart-shaped cutout through a grid of horizontal and vertical lines using raw JavaScript and SVG. The code creates two masks: the first punches the heart shape out of the background, revealing a set of overlapping horizontal rectangles behind it. The second mask highlights the same heart shape in front of the vertical lines, creating a layered, intersecting pattern. Both heart paths rotate 360 degrees in alternating directions via CSS keyframe animations.

KKerim

84% match

Loading thumbnail…

Fork of Fork of SVG Creation

This example generates a geometric animation using raw SVG polygons, constructing 60 quadrilateral shapes that shrink and shift diagonally across the viewport. Each polygon’s vertices are calculated from a moving center point, with size and position modified by index-based formulas. The code uses the DOM `document.createElementNS` API to append SVG elements directly—no D3 library is imported—and applies a rainbow stroke color via HSL values that increment per shape. The page fills the entire browser window with a black background, rendering the hollow outlines without fill.

CChartat aGlance

81% match

Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt drawing using only raw SVG and JavaScript, with no external libraries. It displays a grid of alternating horizontal and vertical lines that remain visible only within two intersecting circular masks, creating a dynamic visual interplay between the line directions. The code builds the SVG dynamically by appending a set of horizontal rectangles masked by a black/white circle, and vertical rectangles masked by an inverse circle, both centered on the screen. The rendering relies on native SVG mask elements and DOM manipulation in plain JavaScript.

MMaras13

81% match

Loading thumbnail…

Fork of Fork of Sol Lewwit 3

This interactive SVG artwork creates a grid of vertical and horizontal lines, with a circular void in the center formed by masking. The visualization uses SVG masks (`circle-mask` and `circle-mask2`) to show vertical lines inside a white circle and horizontal lines outside it, resulting in a dynamic, layered composition. Built with vanilla JavaScript using `document.createElementNS`, it generates 100 rectangles per axis, with the central circle positioned at the viewport center. The design adapts to the browser window size, demonstrating a creative use of SVG masking for generative art.

PPeiyang Li

80% match

Loading thumbnail…

Fork of Fork

An intricate geometric grid emerges as overlapping vertical and horizontal stripes alternate visibility through two SVG masks. Rendered with D3 v6 in React, the visualization layers 100 thin rectangles in each direction, with each mask containing all five D3 symbol shapes repeated across the canvas. The first mask reveals stripes through filled symbols, while the inverted second mask hides them, creating a woven optical effect where symbol outlines define the pattern. The result is a dynamic, mask-driven interplay of shapes and lines.

AAitorGD

80% match

Loading thumbnail…

Vertical Fork of Fork of SVG Fundamentals - Sol LeWitt repro follow-along

This example reproduces a Sol LeWitt art piece using dynamically generated SVG. The visualization displays a grid of horizontal and vertical lines, with a central circular region where the lines are masked and inverted. The code creates an SVG canvas and uses two masks—a circle mask and an inverse mask—to selectively reveal the line patterns. Horizontal rectangles are drawn with a circle mask applied, while vertical rectangles use the inverse mask, creating an alternating visual effect. The rendering is purely code-driven, with no external data source, and relies on the Document Object Model (DOM) API for SVG element creation.

MMichael Gomersall

80% match

Loading thumbnail…

Fork of Fork of Episode 3: Sol LeWitt in Vanilla JavaScript version 2

This example generates a colorful, generative art piece inspired by Sol LeWitt, built entirely with vanilla JavaScript and the SVG API. It renders a full-screen grid of randomly colored vertical rectangles, then overlays a large white circle in the center. A second grid of horizontal rectangles is clipped to that same circular shape using an SVG `<mask>`, creating a layered, intersecting pattern. All shapes are created dynamically via `document.createElementNS`, with colors assigned through randomized RGB values.

MMaras13

79% match

Loading thumbnail…

Fork test

This example displays a set of static geometric shapes composed of paths and rectangles rendered as SVG. The visualization uses plain HTML, CSS, and JavaScript, with CSS transitions applied to rectangles that change color and stroke width on hover. The layout shows a large outlined container with smaller filled blocks in orange, green, gray, and blue, using SVG elements like `<path>` and `<rect>` directly in the markup. It demonstrates basic SVG styling and interactivity without any external data or charting libraries.

Zzaioris

79% match