susujjjj

@susujjjj·4 public vizzes

Smiley Face Part II

A React-driven SVG renders a yellow smiley face that adapts to the browser window’s height. The face, centered with dynamic radii for the head and fixed offsets for the eyes, uses a `<g>` transform to position all elements relative to its center. The code constructs the circles via React’s `ReactDOM.render` and relies on SVG primitives, with the head’s radius computed from `window.innerHeight` and a stroke width of 20. The page also includes a static fallback SVG with a fixed 960x500 viewport.

Dec 29, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example uses React and ReactDOM to render a scalable SVG smiley face that fills the entire browser window. The face is constructed from three circles—a yellow head with a black outline and two black eyes—positioned relative to the window’s center. The SVG dimensions and all element coordinates are computed dynamically from `window.innerWidth` and `window.innerHeight`, with the mouth commented out in the HTML. The drawing is generated live in the browser, with no external data source.

Dec 29, 2021

Loading thumbnail…

Fork of Hello HTML

This example displays a static web page rendering the text “Hellog JdddddSX” as a heading. It uses the React and ReactDOM libraries, loaded from remote UMD builds, to create and mount a simple component into a root HTML element. The page’s body has no margins and hidden overflow, and the core rendering logic is contained in a separate JavaScript bundle file, with the primary document serving only as a minimal host.

Apr 19, 2021

Loading thumbnail…

smiley face part 1

A yellow circle with a black outline and two smaller black circles for eyes forms the beginnings of a smiley face, rendered as static SVG elements directly in an HTML file. The page loads React 17 and ReactDOM, though the displayed SVG is hardcoded in the markup rather than generated through React components. The `bundle.js` script referenced in the body contains a simple React app that only renders an unrelated "hello jsx" heading, leaving the face as the sole visual output.

Apr 11, 2021