SalahAnwer-dev

@SalahAnwer-dev·4 public vizzes

Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece uses SVG to render a grid of horizontal and vertical black bars over a full-screen canvas. Two circular masks, defined via SVG `<mask>` elements, create a central circular window: the first mask reveals a white circle, while the second inverts it with a black circle, producing a layered visual effect. The code uses `d3.select`, `d3.range`, and data joins (`append` and `join`) to generate 100 rect elements in each direction, with the masks controlling visibility.

Jun 5, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This is a generative art piece that reproduces a Sol LeWitt wall drawing using JavaScript and the Document Object Model (DOM) to create SVG elements. It shows a grid of horizontal and vertical lines, with a central circular region where the line pattern is inverted. The code uses a combination of SVG masks with white and black circles to control which sets of lines are visible in the center versus the rest of the canvas. The lines are drawn as rectangular strips, with spacing and stroke width derived from the browser window's dimensions.

Jun 3, 2023

Loading thumbnail…

Fork of Fill & Stroke

Three pairs of shapes—a rectangle, circle, and chevron-like path—demonstrate the contrast between default SVG fill behavior and explicit stroke styling. The first set renders with only black fill, while the second set adds a thick black stroke and white fill. The page uses raw SVG elements (`rect`, `circle`, `path`) directly in the HTML, with no external libraries. All shapes are drawn using basic geometric coordinates and path data on a 960×500 canvas, illustrating fundamental SVG rendering properties.

Jun 2, 2023

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates basic SVG shape creation with overlapping circles, a line, and two path elements rendered on a 960x500 canvas. The code uses raw SVG markup with inline attributes to draw red and green circles at the same coordinates, a navy diagonal line, and paths with custom coordinates. One path creates a horizontal bar shape while another draws a red angular figure with a black stroke. The page includes a hidden YouTube video embed and uses CSS to remove body margins, resulting in a clean, unobstructed display of the vector graphics.

Jun 2, 2023