Jonghwa Lee

@bellfire92·4 public vizzes

Smiley Face Part II

This example renders a full-screen smiley face using React and D3.js, with the face centered on the viewport. It shows a yellow circular head with black stroke, two dark eyes positioned symmetrically, and a smiling mouth arc composed in SVG. The mouth is drawn using `d3.arc()` with specified inner and outer radii and angular range, while all other shapes use SVG `<circle>` elements. Position and dimensions derive from `window.innerWidth` and `window.innerHeight`, with constants controlling eye offset, radius, and stroke width. React renders the SVG tree via `ReactDOM.render`.

Sep 14, 2023

Loading thumbnail…

Fork of Smiley Face Part II

A full-screen smiley face is drawn with React and SVG, its large yellow circular head centered and scaled to the viewport height. The code uses JSX to render `<circle>` elements for the face, eyes, and head, with positions and radii computed from `window.innerWidth` and `window.innerHeight`. D3 v7 is loaded but not used in the visible logic, while React 16.9 handles the component rendering. The head and eyes are positioned via a `<g>` transform, and the static, responsive composition demonstrates basic geometric SVG drawing without interaction.

Sep 14, 2023

Loading thumbnail…

Fork of Fork of Hello HTML

A minimal SVG smiley face is drawn on an HTML page. The face consists of three circles: a large yellow circle with a black stroke for the head, and two smaller unfilled circles for the eyes. The page uses an inline SVG element with explicit `cx`, `cy`, and `r` coordinates, styled purely through HTML and CSS. The body has no margins and hidden overflow, so the 960×500 SVG renders without scrollbars. No JavaScript or external libraries are used, only standard SVG markup within an HTML document.

Aug 14, 2023

Loading thumbnail…

Fork of Hello HTML

A circle with a yellow fill and black stroke dominates the screen, accompanied by two smaller unfilled circles positioned inside its bounds. The page renders entirely as static SVG markup within an HTML document, using no JavaScript libraries or interactive frameworks. The example demonstrates a bare-bones SVG approach, with the `<svg>` element and its `<circle>` children defining all visual properties directly. The layout is fixed at 960 by 500 pixels, with the main circle centered and the smaller circles offset asymmetrically.

Aug 14, 2023