Arvind Chauhan

@arvind520·4 public vizzes

Fork of Smiley Face Part II

A yellow smiley face fills the browser window, with its head sized to the viewport height, black stroke outline, and two black eyes positioned symmetrically. The face is drawn using React and ReactDOM, rendering an SVG with circles. The code computes center, eye, and mouth coordinates based on the window dimensions, with the face's radius relative to the window height and a stroke width of 20.

Nov 10, 2023

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple, static smiley face created with basic SVG shapes. The code draws a large yellow circle with a black stroke for the head, and two smaller black circles for the eyes, all placed within an SVG element. It does not use any JavaScript libraries, relying instead on the D3.js version 3's underlying SVG support, but the data visualization is purely declarative HTML. The entire composition is centered on an 960x500 canvas, with explicit coordinates for the head and eye positions.

Nov 10, 2023

Loading thumbnail…

SVG Fundamental

This example shows a minimal SVG canvas with a single red-bordered frame and one unstyled circle element. The SVG is created directly in HTML markup with a width of 940 pixels and a height of 450 pixels. The circle has a radius of 100 but no position attributes, so it defaults to the top-left corner of the viewport. The code demonstrates basic SVG structure and inline styling using raw HTML, without any JavaScript libraries or data-binding frameworks.

Nov 10, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes rendered directly in a web page, including a circle, a red diagonal line, and a black polyline path. The visualization uses native SVG elements (`<circle>`, `<line>`, `<path>`) within an embedded `<svg>` container that has a yellow border. It shows how basic geometric primitives can be composed on a 600x450 coordinate system, with the path connecting three points via an M (move-to) and L (line-to) command. No external libraries or data sources are used; the rendering relies entirely on the browser's built-in SVG support from the HTML markup.

Nov 9, 2023