Maddie Black

@maddieblack·3 public vizzes

Fork of Smiley Face Part II

A smiley face built from basic SVG shapes centers itself in the browser viewport, with a yellow head, black outline, and two solid eyes, all inside a React component. Below the eyes, a mouth is drawn as an arcusing D3's `arc` generator, which computes a path between configured inner and outer radii and angles. The entire face is rendered as SVG, with dimensions and positions derived from `window.innerWidth` and `window.innerHeight`, and the code uses ReactDOM to mount the component into a `div#root`.

May 14, 2021

Loading thumbnail…

Smiley Face Part II

This example renders a yellow smiley face that fills the browser window using React components for the SVG elements and D3’s `arc()` generator to create the mouth. The face is centered with the `transform` attribute, while circles define the head and eyes, and a path receives the generated mouth arc. The code sets the circle and stroke dimensions based on the viewport height and width, with the mouth arc spanning from 90° to 270° using an inner and outer radius. The smiley face is drawn entirely in SVG, with no external data source.

May 14, 2021

Loading thumbnail…

Fork of Hello HTML

A simple, static SVG drawing depicts a large yellow circle with a black outline, containing two smaller unfilled circles positioned to suggest a face. The page uses raw HTML and inline CSS to remove default margins and hide overflow, with the entire graphic defined inside an `<svg>` element. The circle positions are set with explicit `cx` and `cy` coordinates, and the rendering relies entirely on standard SVG shapes, not on any JavaScript or data-driven library. The code is a minimal example of hand-coded vector graphics within a webpage.

May 14, 2021