grassfluffy02

@grassfluffy02·5 public vizzes

LeWitt with D3

Inspired by Sol LeWitt’s geometric wall drawings, this SVG visualization uses D3 to layer horizontal and vertical striped rectangles over each other. Two masks—one inverted—reveal and hide sections of the grid using D3’s `symbol` shapes (such as circles and crosses) as cutouts. Built with React and D3 v6, the code generates 200 stripes per direction and positions symbols across the canvas to create intersecting patterns.

Nov 6, 2023

Loading thumbnail…

LeWitt animate

This example animates a grid of vertical lines, each moving upward at a random speed to create a lively, generative pattern. It renders SVG rectangles directly with JavaScript, setting each line’s fill to a bright green (#00FF66). The animation uses the Web Animations API via `element.animate`, applying an infinite, randomized `translateY` keyframe over a duration of up to 3000 milliseconds. A circular mask highlights the central region, while the page size adapts to the browser window, showing a minimal HTML/CSS approach without external libraries.

Nov 5, 2023

Loading thumbnail…

LeWitt Reproduction vertical

This example reproduces a Sol LeWitt-inspired drawing by generating a grid of horizontal and vertical stripes that intersect across the full browser window. Two SVG masks create a central circular aperture: the first mask reveals the horizontal stripes inside the circle, while the second reveals vertical stripes outside it, producing a clean compositional contrast. The page builds the SVG programmatically using vanilla JavaScript and the DOM API, with no external libraries. The code sets element dimensions from `window.innerWidth` and `window.innerHeight`, ensuring the artwork adapts to the viewport.

Nov 5, 2023

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.

Nov 5, 2023

Loading thumbnail…

Dataviz_project

This visualization demonstrates a monthly calendar layout using a CSS Grid-based chart. The page displays a grid with twelve month labels from January to December, arranged within a bordered chart container. Built with plain HTML and CSS, it uses grid-template-columns to structure the row layout and a fixed margin body styling. The project appears to be a static, minimal example of grid-based data layout rather than an interactive visualization, with no JavaScript or React functionality visible in the provided files.

Nov 4, 2023