Test with Path

100%

Test with Path

✓ Published0🌍 Public

Last edited Mar 23, 2021

Created on Mar 23, 2021

Forked from Curran's Face a Là Sol LeWitt - Click TimerOnOff

A generative animation reproduces a Sol LeWitt-inspired face using a single SVG path that defines both a mask and the trajectory of a moving ball. The path, generated by the `svgdata()` function, contains a complex curve that is applied as a mask to two layered background grids of colored rectangles. A red circle follows the same path via an SVG `animateMotion` element, while the visibility of four background groups randomly toggles to create shifting color patterns. The animation runs indefinitely, cycling through a palette of nine colors.

AI-generated description

A reproduction of a Curran's Face a Là Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Curran's Face a La Sol LeWitt - Bouncing

Curran's Face a La Sol LeWitt renders a geometric face as an SVG path, which is animated through a series of bouncing color-grid backgrounds. The face path is defined by a large string of cubic Bézier commands (`svgdata()`), scaled and positioned via `transform`. It is used as a mask for two layered groups of colored rectangles, with alternating visibility toggled every 1000ms. The animation uses raw DOM manipulation via `document.createElementNS` and CSS transition properties, with no external libraries.

FFelipe Maion

75% match

Loading thumbnail…

Curran's a La Sol LeWitt Reproduction

This interactive SVG reproduction of Sol LeWitt’s “Face à La” uses a hand-drawn SVG path of a face as a mask over the full viewport. The mask’s fill starts black and likely reveals colored or animated content beneath, with CSS transitions on the mask’s transform for smooth movement. The code uses raw DOM APIs like `createElementNS` and `setAttribute` to build the SVG structure, with inline path data defining the face’s contours. Styling comes from an external stylesheet, and the example demonstrates generative geometric art through procedural SVG manipulation.

FFelipe Maion

73% match

Loading thumbnail…

Animation of Sol LeWitt

This example creates an abstract, animated SVG composition inspired by Sol LeWitt. It uses a full-window SVG canvas and draws a complex, irregular shape defined by an SVG path. The path is used in two separate mask elements, each controlling the visibility of a set of horizontal and vertical lines. By using these masks, the geometric line pattern is revealed only within the shape's boundaries, creating a dynamic interplay between form and structure. The code directly manipulates the SVG DOM through JavaScript and the `createElementNS` API.

CCora

72% match

Loading thumbnail…

Curran's Face a La Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired face using a single SVG path that is revealed through an animated mask. The drawing, defined by a complex series of cubic and quadratic Bézier curves, is clipped by a black mask rectangle that grows to expose the face. The visualization relies on raw SVG elements created via the Document Object Model API, with CSS transitions controlling the mask’s expansion. No external libraries are used; the rendering approach is purely native SVG.

FFelipe Maion

72% match

Loading thumbnail…

Let's Make A Face Path Animation

This example displays a cheerful yellow smiley face with black outlines, including two eyes and an arc-shaped mouth drawn using D3’s `arc()` generator. A small teal ellipse, animated via SVG `<animateMotion>` with an `<mpath>` referencing a custom curve path, travels continuously around the face. The visualization is rendered in React, using a static SVG canvas with D3 v7 to compute the mouth’s path coordinates, while the animation loops indefinitely via the `repeatCount` and `dur` attributes.

Bboreilly26

71% match

Loading thumbnail…

Curran's Face a Là Sol LeWitt - Click TimerOnOff

A generative SVG portrait of a face emerges through layered, animated masks that reveal and conceal alternating stripe patterns. The piece draws on Sol LeWitt’s aesthetic by combining vertical and horizontal color bands with a hand-drawn path, the face repeated as both white and black masks. JavaScript builds the SVG structure, cycling through nine colors and toggling visibility of four background groups on a timer, while CSS transitions apply to the masks. The code uses `svgdata()`, DOM creation via `createElementNS`, and inline styles for randomization, yielding a flickering, patterned rendering with an abstract, geometric quality.

FFelipe Maion

71% match

Loading thumbnail…

SVG Fundamental - Sol Lewitt

This example generates an abstract, animated composition inspired by Sol LeWitt, built entirely with raw SVG and JavaScript. It creates two circular masks, each containing a circle whose radius animates over 15 seconds, and applies them to groups of rectangles that rotate continuously. The code uses the SVG `circle`, `rect`, `mask`, `animate`, and `animateTransform` elements to cycle colors between black and white and rotate the shapes 360 degrees. No external libraries are used; the visualization directly manipulates the DOM via `document.createElementNS` to construct the scene dynamically.

BBart van Pelt

70% match

Loading thumbnail…

Random Sol LeWitt Reproduction

This example reproduces a Sol LeWitt drawing as an interactive SVG visualization. The artwork appears as a black-and-white geometric composition centered on the screen, with the shape defined by an intricate SVG path. The code creates an SVG element sized to the browser window, applies a circular mask, and draws the path using SVG’s native `path` element and `d` attribute. The rendering is purely random in placement, with no external data source or additional libraries beyond standard DOM manipulation and SVG APIs.

FFelipe Maion

70% match