Skip to main content
SimilarExport ZIP
100%

Curran's Face a Là Sol LeWitt - Getting it Right

✓ Published1🌍 Public
FFelipe Maion
Last edited Mar 24, 2021
Created on Mar 24, 2021

An interactive game challenges players to time a screen freeze so that only black-and-white patterns are visible, referencing Sol LeWitt's art. The animation cycles through colorful horizontal and vertical stripe groups masked by a face-shaped SVG path. Using the SVG Mask API and `createElementNS`, the code builds layered `<rect>` elements and toggles their visibility via `getComputedStyle` and `setInterval`. A score increments on correct timing, and the timer accelerates after each success, increasing difficulty.

AI-generated description

Simple game based on the Exercise of Curran's Course 2021 Get it Right in Black and White

So, the goal of the game is to stop the screen only on ALL Black&White patterns.

ToDo: Implement lives.

Refs: Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Curran's Face a Là Sol LeWitt - Getting it Right B&W Game

The game displays a face made of Sol LeWitt-inspired patterns that flicker between black-and-white and colored states. Players click to freeze the animation when all patterns are monochrome; correct guesses increase score and speed, while mistakes cost lives. The game uses the SVG DOM API to create elements, with `createSVGElement` and mouse event listeners controlling the interaction and timing.

FFelipe Maion
92% 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
86% match
Loading thumbnail…

Fork of Curran's Face a Là Sol LeWitt - Getting it Right &B&W Game

This animated game challenges players to stop the screen when all Sol LeWitt-inspired patterns appear in black and white. The visualization uses SVG elements created via `document.createElementNS` with the `http://www.w3.org/2000/svg` namespace, rendering at full window size. Patterns consist of complex path data that flicker at varying speeds; clicking the screen checks whether all patterns are grayscale. Correct guesses increment the score and halve the timer, while wrong guesses reduce lives (displayed as icons). The game resets automatically after losing all lives, with CSS transitions controlling visibility changes.

Zzaioris
86% match
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
84% 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
83% match
Loading thumbnail…

Curran's Face a La Sol LeWitt Reproduction 'Switchart' Randomized

This visualization reproduces a Sol LeWitt-style portrait of Curran using an SVG mask that reveals the face through randomized shape switching. The code constructs an SVG canvas with a mask containing a black rectangle and a complex path defining the face, while CSS transitions animate the mask’s transform properties. A separate stylesheet defines transitions for `#curran-white-mask` and `#curran-black-mask`, though these elements are not created in the script shown. The rendering relies entirely on raw SVG DOM manipulation via `createElementNS`, with no external libraries, and the randomized effect appears tied to the mask’s animated scaling or positioning.

FFelipe Maion
82% match
Loading thumbnail…

Curran's Face a La Sol LeWitt Reproduction 2

This generative artwork renders a facial portrait constructed from a Sol LeWitt-inspired SVG path. It uses JavaScript and the DOM API to create a full-screen SVG and applies a mask to reveal the path. The piece uses a `mask` element to define visibility for the image, and its styling is handled by CSS for a specific animation class.

FFelipe Maion
81% 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
81% match