Thomas Flood

@thomaspeterflood·3 public vizzes

Fork of Smiley Face Part III

A smiling face built with React and D3 renders as an SVG, featuring a gradient-filled head, three eyes, and a curved mouth arc. The face uses D3’s `arc()` generator to draw the mouth path, while React manages the component structure and applies two linearGradient definitions for the fill. The code sets fixed geometric constants for eye offset, radius, and mouth dimensions, with the head centered on a 960×500 canvas.

Sep 11, 2024

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a smiley face rendered in SVG that scales to fill the browser window. The face is composed of a yellow circle with a black outline, two solid black eyes, and a nose, all positioned relative to the center of the viewport. The code uses React to create the SVG elements and ReactDOM to mount the component into the page. Key geometric values like eye offset, eye radius, and mouth radius are defined as constants, with the face’s radius based on the window height.

Sep 10, 2024

Loading thumbnail…

Fork of Hello HTML

A minimal HTML page renders a single yellow SVG circle with a black outline, centered on a 960 by 500 canvas. The graphic is created entirely with inline SVG elements, including a `<circle>` with explicit `cx`, `cy`, and `r` attributes, alongside a CSS rule that hides page scrolling. The page uses no JavaScript or external libraries, instead relying on plain HTML and presentational SVG attributes to define the static visualization. The example demonstrates the simplest possible SVG rendering approach within an HTML document.

Sep 10, 2024