tt064988

@tt064988·3 public vizzes

Let's Make a Face Part I

Two layered SVG circles create the start of a face, with a semi-transparent purple circle and a thick green stroke overlapping a plain black circle. The example uses React 17 via a UMD production build to render static SVG elements directly in the markup. It demonstrates basic SVG circle positioning and fills, along with stroke width and opacity settings, without any interactive or animated behavior.

Nov 18, 2021

Loading thumbnail…

1.02 Smiley Face Part II

A dynamic smiley face fills the browser window, with its yellow circular head and black eyes re-centered to match the viewport size. Built with React and rendered as SVG, the component calculates the head radius, eye offsets, and stroke width from the window dimensions at runtime. The code uses ReactDOM to mount the SVG into the DOM, with all shape properties defined as constants and passed as JSX attributes. No smile or mouth is drawn in the current implementation.

Nov 13, 2021

Loading thumbnail…

1.01 Let's Make a Face Part I

A smiling face is drawn using basic SVG shapes: a large yellow circle with a black outline, two smaller black circles for eyes, and no mouth yet—leaving it incomplete. The rendering is implemented directly in an inline `<svg>` element with hardcoded coordinates and attributes, such as `cx`, `cy`, `r`, `fill`, and `stroke`. It uses no external JavaScript libraries, relying solely on static SVG markup within an HTML page that has its body margin set to zero and overflow hidden.

Nov 13, 2021