pkiaei (@pantea95), VizHub

Tweak a face!

A yellow smiley face is drawn as an SVG circle with two black eyes and a half-moon mouth, all centered on a 960×500 canvas. The face is built with React 16.13.1 and D3 v6, using `d3.arc` to generate the mouth path and JSX transforms for positioning. Eye and mouth radii, offsets, and stroke widths are constants, while the mouth arc is defined with angles from π/2 to 3π/2. The SVG is rendered via `ReactDOM.render` with a fixed viewport and hidden overflow.

Sep 2, 2020

Loading thumbnail…

Make a face part II

A yellow smiley face rendered in SVG, with two black eyes and an arc-shaped mouth, is drawn as a series of layered geometric shapes. The face is built using React components, with each facial feature positioned relative to the center of the canvas. D3’s `arc` function generates the mouth path, while the circle elements for the head and eyes use explicit pixel coordinates. The code applies a stroke width to the outer face circle and translates the entire group to the center using an SVG `g` transform.

Sep 2, 2020

Loading thumbnail…

Smiley Face Part II

A smiley face rendered as a full-screen SVG graphic using React. The face is centered and dynamically sized to the browser window, with yellow circular head, black stroke, two eyes, and a mouth defined by geometric properties like eye offset and radius. The code leverages React and ReactDOM to render SVG elements, with all dimensions computed from `window.innerWidth` and `window.innerHeight`.

Sep 2, 2020

Loading thumbnail…

Smiley Face Part II

A smiley face rendered as a full-screen SVG graphic using React. The face is centered and dynamically sized to the browser window, with yellow circular head, black stroke, two eyes, and a mouth defined by geometric properties like eye offset and radius. The code leverages React and ReactDOM to render SVG elements, with all dimensions computed from `window.innerWidth` and `window.innerHeight`.

Sep 2, 2020