vikrantbhurke

@vikrantbhurke·3 public vizzes

Sol Lewitt

This example creates a generative black-and-white pattern inspired by Sol LeWitt’s geometric art. It uses raw SVG elements created via the W3C DOM API, including a circular mask and 100 horizontal rectangles, to show alternating stripes visible only within a central circle. The code dynamically sets the SVG dimensions to match the browser window and positions the circle at the viewport center. No external libraries are used; everything is built with plain JavaScript and SVG’s `mask` and `rect` elements.

May 26, 2022

Loading thumbnail…

Fork of HTML Starter

This example displays a single blue circle with a black stroke centered within an SVG canvas. The circle is positioned at (430, 200) with a radius of 100, rendered on a 860×450 viewport using inline SVG markup in an HTML page. The visualization uses standard SVG elements and attributes directly in the markup, without additional JavaScript libraries or data sources. It demonstrates the fundamental structure of an SVG-based graphic embedded in HTML, serving as a minimal template for more complex visualizations.

May 25, 2022

Loading thumbnail…

Smiley Face

A single blue circle with a black outline, centered on a 960 by 500 SVG canvas, represents a smiley face. The code defines the circle’s center at the canvas midpoint and its radius as half the canvas height minus half the stroke width. The visualization is built with React and rendered using ReactDOM’s `render` method, which injects the SVG structure directly into a root div. The hard-coded dimensions and stroke styling are explicit in the JavaScript source.

May 23, 2022