So LeWitt Reproduction

100%

So LeWitt Reproduction

✓ Published0🌍 Public

Last edited Aug 19, 2022

Created on Aug 19, 2022

This visualization reproduces a minimalist So LeWitt drawing using React and D3 v7. It shows a single black circle that follows the mouse cursor across an SVG canvas, with the circle’s position driven by React state updates from a `mousemove` event handler. The code uses React’s `useState` and `useCallback` hooks to manage pointer coordinates, and renders the circle as an SVG element within a 960×500 viewport. The yellow background circle and static black outlines visible in the commented code suggest an intentional homage to LeWitt’s geometric wall drawings, but the active behavior focuses solely on the interactive dot.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using the D3.js library in a React framework, rendered as scalable vector graphics. The code creates an SVG canvas that fills the browser window and applies circular masks to horizontal and vertical striped rectangles, producing an overlapping grid pattern. The implementation uses D3’s `select` method to build the SVG element and appends shapes programmatically, though the mask and rectangle logic is commented out, leaving only the blank SVG. The visualization adopts LeWitt’s geometric, rule-based aesthetic.

TTheo-0201

81% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWITT wall drawing as an interactive SVG visualization. The page renders a 960-by-500 SVG canvas and uses plain CSS and JavaScript, with React as the framework, to generate geometric shapes. The drawing consists of vertical and horizontal lines in a grid pattern, executed in black and white. The code includes a minimal HTML wrapper and a script that logs to the console, but the core geometry is defined through the SVG elements. The rendering relies on React’s component structure and SVG’s native shape primitives to compose the artwork.

BBenLeathers

80% match

Loading thumbnail…

Sol Lewitt Reproduction with D3

This visualization reproduces a Sol Lewitt wall drawing using D3.js in a React application, rendered as SVG. It displays a grid of horizontal and vertical thin rectangles that are masked to reveal a circular window at the center, creating an overlapping pattern reminiscent of Lewitt’s geometric art. The code uses `d3.select` and `d3.range` to generate 100 rects in each direction, while SVG `mask` elements with circle shapes control visibility. The example demonstrates data-driven SVG generation and masking techniques without external data sources.

PPhan Nguyen

80% match

Loading thumbnail…

LeWitt Reproduction vertical

This example reproduces a Sol LeWitt-inspired drawing as a vertical field of narrow, evenly spaced rectangles rendered in SVG. The visualization fills the entire browser window, with each rectangle positioned incrementally along the horizontal axis using a loop that creates 100 elements. The code uses native DOM manipulation via `document.createElementNS` and `svg.setAttribute` to construct the scene, without relying on external libraries. The page dynamically sizes the artwork to the viewport through `window.innerWidth` and `window.innerHeight`, and includes commented-out mask and circle code that is not active in the final render.

Ggrassfluffy02

80% match

Loading thumbnail…

Movable circle

A yellow circle follows the mouse as it moves across an SVG canvas in this interactive React visualization. The component tracks pointer coordinates through a `onMouseMove` event handler and stores them in state to reposition the circle in real time. Built with React 16.9 and D3 v5, it uses React's `useState` hook to manage the mouse position and renders the circle via SVG elements, demonstrating a simple yet effective integration of React's declarative rendering with D3's utility functions.

RRobFlob

79% match

Loading thumbnail…

Hello HTML

A simple interactive SVG circle follows the mouse pointer across a 960-by-500 blank canvas, updating its position in real time. The visualization uses React 17 with the `useState` hook to manage the circle’s coordinates, which are updated on every `mousemove` event on the SVG element. The circle’s center is set via the `cx` and `cy` attributes, while D3 v5 is loaded but not directly used in the rendering logic. The example demonstrates state-driven updates in a React-rendered SVG without any external data source.

CChristian

79% match

Loading thumbnail…

Circle movement

A yellow circle with a black outline follows the mouse cursor across an SVG canvas. The circle's position is updated in real time using React state and a mouse move event handler. The visualization uses React's `useState` and `useCallback` hooks alongside D3's `range` utility, with an SVG `<circle>` rendered directly. The code includes reusable components for a face, but the active example only displays the moving circle.

Lltostes

79% match

Loading thumbnail…

Full So LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style drawing using D3.js. It renders a full-screen SVG with two sets of evenly spaced horizontal and vertical lines, creating a grid. Two masks are applied to the line groups, each utilizing a circle symbol generated by D3’s `symbol` API with a large radius, effectively cutting circular holes in the grid pattern. The code uses D3’s `select`, `range`, and `symbol` functions, with the second mask inverting the circle’s fill to create a complementary visual effect.

Mmax-31

79% match