Lucia Cerchie

@Cerchie·8 public vizzes

sollewitt

A web-based reproduction of a Sol LeWitt art piece generates a dynamic pattern of overlapping black and white circles against a blue-to-red gradient background. The visualization uses raw JavaScript and the SVG DOM API to create and append circle elements directly, with no external libraries. Two loops position 100 circles each, offset by increments of 100 and 95 pixels horizontally and 50 pixels vertically, creating a structured, repeating grid. The piece highlights the contrast between simple geometric primitives and the visual complexity achieved through systematic placement and color layering.

Nov 26, 2022

Loading thumbnail…

Fork of sollewitt vertical variant

This visualization reproduces a Sol LeWitt-inspired vertical line composition, where a series of narrow rectangles fill the viewport. A circular mask restricts visibility, so only the lines inside a central circle are visible against the black background. The code builds an SVG scene using the browser’s native `document.createElementNS` API, generating each rectangle in a loop and applying the mask via a URL reference. No external libraries are used, and the layout adapts to the full window dimensions.

Nov 26, 2022

Loading thumbnail…

d3 exercise figma

A single blue, irregularly shaped blob sits centered on a white canvas within an SVG, its outline drawn with a thick black stroke. The shape is defined by a fixed path of cubic Bezier curves, rendered directly in the markup. This React example uses raw SVG elements with no D3.js or JavaScript functions, demonstrating how to create a static vector illustration using the `path` node. The code includes an empty viewBox and inline CSS styling for the text and body elements.

Nov 26, 2022

Loading thumbnail…

Fork of Fork of Fork of Fork of HTML Starter

This example displays a single black polyline with a drop shadow on a white background, rendered through an inline SVG. The path connects five coordinate points, creating a jagged, angular line across the 960×500 canvas. The code uses raw SVG elements—`path`, `rect`, and `filter` with `feDropShadow` effects—to achieve the visual result. No JavaScript libraries or data sources are involved; the styling comes from embedded CSS, and the graphic is entirely static.

Nov 26, 2022

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example displays a simple geometric composition of black rectangles arranged on a white SVG canvas, with the letter “A” positioned in the upper-left corner. The visualization renders static shapes using raw SVG elements defined directly in the HTML markup, including `<rect>`, `<path>`, and `<text>` tags. The code does not rely on any external libraries or frameworks, using only plain HTML, CSS for styling, and inline SVG for drawing. The layout suggests an abstract, minimal design rather than data-driven content.

Nov 26, 2022

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a series of black rectangles of varying heights and widths arranged on a white 960×500 SVG canvas, creating an abstract geometric composition. The rectangles are positioned at different coordinates, with some overlapping in their vertical extents. The visualization uses raw SVG elements defined directly in the HTML markup, including `<svg>`, `<rect>`, and inline styles for sizing and placement. No JavaScript libraries or data processing are involved; the rendering relies solely on static SVG attributes such as `x`, `y`, `width`, and `height` to define the layout.

Nov 26, 2022

Loading thumbnail…

Fork of HTML Starter

This example displays six black ellipses positioned against a white background on an SVG canvas. The shapes are hardcoded directly in the markup rather than generated programmatically. The visualization uses inline SVG elements rendered by the browser, with no external JavaScript libraries or data sources. The CSS rule styles a hidden message element, though the primary visual output consists solely of the static geometric arrangement.

Nov 26, 2022

Loading thumbnail…

SVG Fundamentala

This example demonstrates fundamental SVG shapes—rect, circle, line, and path—arranged on a 960×500 canvas, with basic styling via inline attributes like fill, stroke, and stroke-width. The code uses plain SVG elements directly in HTML, including a navy-bordered rectangle and a red circle, showing how element order determines paint order instead of CSS z-index. A path element illustrates multiline drawing with an L-shaped stroke, all rendered without any JavaScript libraries or frameworks, relying solely on static markup.

Oct 23, 2022