Sojeong Park

@sojeong2020·4 public vizzes

Fork of Smiley Face Part II

This example renders a responsive smiley face using React and SVG, with the face sized relative to the browser window’s dimensions. The code positions a yellow circle as the head, centered via the `centerX` and `centerY` calculations, and adds two black eye circles offset by `eyeOffsetX` and `eyeOffsetY`. The SVG is generated directly in JSX, with React 16.9 handling the DOM updates and the root element mounted via `ReactDOM.render`. No external data is used; all geometry is derived from the window’s innerHeight and innerWidth.

Nov 2, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a responsive smiley face rendered as a full-screen SVG. The face consists of a yellow circle head with a black stroke, two black eye circles, and is centered using calculated window dimensions. The code uses React with ReactDOM to render the SVG elements, and the component reads `window.innerWidth` and `window.innerHeight` to set the canvas size. A `<g>` transform translates the origin to the center, and circle coordinates are offset from that point to position the eyes.

Nov 2, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow smiley face with black outlines is drawn as three SVG circles: a large head and two smaller eyes. The page centers the face with fixed pixel coordinates and uses raw SVG elements—`<circle>` and XML attributes for position, radius, fill, and stroke—rather than a data-binding library like D3.js. The rendering approach is static SVG, with no interactivity or animation, and the layout deliberately notes margins for stroke width alignment.

Nov 2, 2021

Loading thumbnail…

Fork of Hello HTML

A yellow circle with a black outline and two smaller unfilled circles sits centered on a blank SVG canvas. The example demonstrates basic SVG shape rendering within an HTML page, using inline `<svg>` elements and `<circle>` tags. It references a YouTube video embed in its README but does not load external data or JavaScript libraries. The visualization is static, relying solely on native SVG attributes for positioning and styling, with no interactive behavior or animation.

Nov 2, 2021