Fiona0229

@Fiona0229·3 public vizzes

Fork of Sol LeWitt Reproduction

This fork of a Sol LeWitt reproduction uses the D3.js library’s `selection.append` and `.join` methods to draw a grid of horizontal rectangles onto an SVG canvas. The rectangles are individually masked using the `url(#circle-mask)` attribute, creating a circular cutout effect over the uniform pattern. The code defines a mask with a black background and white circle to reveal only the central area of the bars. Rendered as an SVG, it builds the artwork procedurally with 100 marks, each 10 pixels high, spaced vertically, with the window’s dimensions driving the canvas size. The project’s data source is the cited Sol LeWitt original.

May 23, 2022

Loading thumbnail…

Sol LeWitt Reproduction

This example generates a graphical composition inspired by Sol LeWitt’s wall drawings. An empty SVG canvas of 960 by 500 pixels is set up, and the page uses a simple HTML structure with a JavaScript console message. The visualization relies on the SVG API for its rendering, as defined in the `index.html` file, and uses the framework React, although no drawing logic is visibly implemented in the provided code. It is a minimal starter that references a React starter template for further development.

May 22, 2022

Loading thumbnail…

SVG fundamentals

This example demonstrates the fundamental building blocks of SVG graphics as rendered directly in a web browser. A solid blue circle is positioned at coordinates (100, 50) with a radius of 50, while a navy line stretches from the origin to point (100, 100), with a stroke width of 10 pixels. The visualization uses raw SVG markup within an HTML document, specifying a 960 by 500 pixel canvas. The code employs the `<circle>` and `<line>` elements, along with attributes like `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` to define shapes and their visual properties.

May 21, 2022