matrice-one

@matrice-one·6 public vizzes

Fork of HTML Starter

This example shows an SVG mask revealing a pattern of 100 horizontal stripes inside an ellipse. The code creates the mask with an ellipse element, then appends rectangles with a `mask` attribute referencing that ellipse. It uses vanilla JavaScript DOM manipulation, `document.createElementNS` for SVG namespacing, and `window.innerWidth/innerHeight` to size the scene.

Oct 3, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece using raw SVG. A circular mask reveals a set of horizontal, evenly spaced rectangles that span the full width of the viewport, creating a striped pattern confined to a central circle. The code constructs the SVG dynamically via the `document.createElementNS` API, setting the mask’s circle radius to 200 pixels and drawing 100 rectangles at 20-pixel intervals with 10-pixel heights. No external libraries are used; the rendering relies entirely on native browser SVG elements and attributes.

Oct 3, 2022

Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a sparse network of points and connecting lines rendered in a fixed SVG canvas. Nine grey circles are linked by straight black line segments, suggesting a simple graph or construction. The layout is static, and each circle and line is hand-coded as an SVG element in the markup. The implementation uses raw SVG tags within an HTML page, with no JavaScript, CSS styling beyond the page title, or external libraries. The shapes are drawn with explicit coordinates and styles, and the canvas size is fixed at 599 by 525 pixels.

Sep 28, 2022

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal web page that displays the text “Hello HTML!” centered on a white background. It demonstrates the fundamental building blocks of a web-based visualization or webpage using standard HTML elements, CSS for styling, and JavaScript. The page structure is defined in an `index.html` file, with visual styling applied through a CSS class rule. While the code does not fetch or process any data, it serves as a bare-bones template for adding interactive elements or graphics using technologies like the canvas API or D3.js.

Sep 28, 2022

Loading thumbnail…

Fork of HTML Starter

This example shows a simple SVG composition of three concentric circles in red, orange, and green, accompanied by a black line and a blue quadratic Bézier path. The circles and line are drawn directly with SVG elements, while the path uses SVG’s `d` attribute with `Q` and `T` commands. The rendering is static, using plain HTML and inline SVG within an 800 by 500 viewport. No JavaScript libraries are used; the illustration relies solely on fundamental SVG shape and path syntax.

Sep 26, 2022

Loading thumbnail…

SVG Fund

This example displays a static SVG graphic titled “SVG Fund” with a large yellow rectangle and two circles, one black and one red, drawn directly on an HTML page. The code uses raw SVG elements, including `<rect>` and `<circle>`, within a fixed 950×900 viewport, styled through inline attributes. While the README references CSS and JavaScript, this specific implementation shows no interactivity or data binding, relying instead on hardcoded coordinates and colors to compose the minimal visual. The rendering approach is purely declarative, with no external libraries like D3 or React visible in the included markup.

Sep 25, 2022