Skip to main content
Log in
S

Sanuantoo7@gmail.com

@sanuantoo·6 public vizzes

Loading thumbnail…

Fork of Smiley Face Part II

A large yellow smiley face fills the entire browser window, rendered as an SVG that scales with viewport dimensions. The face includes two black eyes and a yellow circular head with a thick black outline, though no mouth is drawn. The visualization uses React 16.9 to manage the SVG structure, with all geometry computed from `window.innerWidth` and `window.innerHeight` to center the face. The code defines positions for the eyes and head using variables like `centerX`, `centerY`, `eyeOffsetX`, and `eyeRadius`, and renders the shapes as `<circle>` elements within a translated SVG group.

Dec 23, 2025
Loading thumbnail…

Fork of Smiley Face Part II

A large yellow smiley face is drawn in SVG, centered and scaled to fit the browser window dynamically. The face consists of a circular head with a black outline, two solid black eyes positioned symmetrically, and a mouth implied but not rendered in this snippet. The visualization uses React to manage the SVG structure, with computed dimensions from `window.innerWidth` and `window.innerHeight` to set the canvas size and center coordinates. Positions for the head, eyes, and stroke width are defined as constants, and the face is wrapped in a translated `<g>` group for easier coordinate handling.

Dec 23, 2025
Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face is drawn as a scalable vector graphic (SVG) that fills the browser window. The face consists of a large yellow circle with a black stroke, two black eye circles, and no mouth. The code uses React and ReactDOM to render the SVG dynamically, calculating the center and radius based on the current window dimensions. The underlying data source is the static SVG markup commented out in the HTML file, which the React version programmatically recreates.

Dec 17, 2025
Loading thumbnail…

Fork of Smiley Face Part II

A large yellow smiley face is drawn in SVG, centered and scaled to fit the browser window dynamically. The face consists of a circular head with a black outline, two solid black eyes positioned symmetrically, and a mouth implied but not rendered in this snippet. The visualization uses React to manage the SVG structure, with computed dimensions from `window.innerWidth` and `window.innerHeight` to set the canvas size and center coordinates. Positions for the head, eyes, and stroke width are defined as constants, and the face is wrapped in a translated `<g>` group for easier coordinate handling.

Dec 17, 2025
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a minimalist smiling face built from three SVG circles: a large yellow head with a black outline and two smaller black eyes. The face is centered on a 960 by 500 canvas, with the head positioned at the middle and the eyes offset symmetrically on either side. The code uses plain SVG elements—`circle` tags with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—rather than any JavaScript library or data binding. The rendering approach is direct static markup, with no interaction or animation, relying solely on SVG’s native vector drawing capabilities.

Dec 17, 2025
Loading thumbnail…

Fork of Hello HTML

A smiling face rendered as three SVG circles—two black eyes and a larger yellow head with a black outline—appears in a fixed 960×500 viewport. The example shows how static SVG markup can be embedded directly within an HTML document, with React 18 loaded via UMD script tags but not actually used for rendering the shapes. A console.log statement in the HTML head and in index.js demonstrates basic script execution alongside the declarative SVG, while the circle elements use explicit `cx`, `cy`, `r`, and fill attributes to define geometry and color.

Dec 17, 2025