Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Zzaioris
Last edited Dec 3, 2022
Created on Dec 3, 2022

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.

AI-generated description
<center><strong> The Game “Get It Right In Black and White”. </strong></center>

Simple game based on the Exercise from 3rd class of Curran's Course 2021:<strong> Get it Right in Black and White</strong>

The goal of the game is to stop the screen only when ALL patterns are Black&White.

There are few patterns (all related to Sol LeWitt) flicking randomly, and you need to stop the flicking of the screen when ALL the patterns are Black / White, only. When you score, speed increases exponentially. If you got it wrong one life is gone.

When game finishes, it restarts automatically.

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
89% match
Loading thumbnail…

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

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.

FFelipe Maion
86% match
Loading thumbnail…

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

This interactive animation presents an abstract portrait inspired by Sol LeWitt's geometric art, constructed from overlapping colored rectangles. A mask and its inverse, both formed from SVG path data of a face, constrain two independent sets of colored bars. Clicking toggles a timer that randomly changes the visibility of four background groups, creating shifting compositions. The piece uses raw JavaScript and the SVG API, with CSS transitions animating the visibility changes of the grouped rectangles.

Zzaioris
77% match
Loading thumbnail…

Fork of Curran's Face a La Sol LeWitt Reproduction 'Switchart' Randomized Spinner

A fork of Curran’s Face a La Sol LeWitt reproduction, this visualization presents a randomized spinner that animates a black-and-white Sol LeWitt-inspired face path. The SVG path is drawn using raw SVG API calls, with a mask and CSS transitions controlling visibility and movement. The piece uses `document.createElementNS` to build the SVG structure, while CSS rules and transforms create the spinning effect. It showcases generative, geometric line art in a minimalist, browser-based rendering.

FFelipe Maion
75% 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
74% match
Loading thumbnail…

Fork of Curran lesson - Sol LeWitt Reproduction

This interactive SVG reproduction of a Sol LeWitt drawing uses a generative approach to create two overlapping circular patterns. It renders a grid of thin horizontal and vertical rectangles, with a circular mask cutting out the center of the horizontal set and an inverse mask revealing the center of the vertical set. The code builds the SVG entirely through the DOM API, setting up two masks—one with a black rectangle and white circle, the other with the inverse—and then appending 100 rects for each orientation. The result is a dynamic, browser-resizing geometric composition that mirrors LeWitt’s conceptual art style.

Aastrologyhesitant
74% match
Loading thumbnail…

Fork of Curran's Face a La Sol LeWitt Reproduction 'Switchart'

This piece reproduces Curran’s “Face a La Sol LeWitt” artwork as an interactive SVG. The page uses a dynamically created SVG with a mask applied to a detailed path that traces the face’s outline, with tiny geometric shapes forming facial features. The CSS defines transitions on mask elements for potential animation. The visualization is entirely code-generated from path data, with no external data source, using raw SVG and DOM manipulation.

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