Damien Bafile

@damien-bafile·3 public vizzes

Fork of Fork of Smiley Face Part III

A React-rendered SVG smiley face that fills the browser viewport, with the face centered and scaled relative to the window dimensions. The example uses React 16.9 and D3 v7, specifically the `arc` generator to define a mouth path from an inner radius of 0 to an outer radius of 100, spanning 0 to π/2 radians. The face consists of a yellow circle with a black stroke, two eye circles offset by fixed pixel distances, and the D3-generated mouth arc. The code computes the head radius from the window height and applies the stroke width internally, with all geometry positioned via a translated SVG group.

Sep 25, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a yellow smiley face across the full browser window using React and SVG. It centers the face dynamically by calculating the viewport's width and height, drawing a large yellow circle with a black stroke, two black eyes, and leaving the mouth unimplemented. The code uses React 16.9.0 with ReactDOM to create the SVG elements imperatively, relying on window.innerWidth and innerHeight for responsive sizing. The static SVG structure is defined through JSX with explicit circle attributes for position and radius.

Sep 25, 2021

Loading thumbnail…

Smilly face P1

A static yellow smiley face rendered as raw SVG circles, with a head and two eyes drawn on a 960x500 canvas. The example demonstrates direct SVG markup in an HTML file, alongside a separate React app that mounts a simple "Hello JSK" heading via `ReactDOM.render`. Although React and ReactDOM are loaded, the face itself is not generated by React—it is plain SVG embedded in the document. The code shows a minimal setup for combining declarative React components with hand-written SVG shapes.

Sep 25, 2021