dbarU

@dbarU·2 public vizzes

Fork of Smiley Face Part V

This example shows a smiling face constructed from modular React components, with a yellow circular background, two eyes, and an arched mouth drawn using d3’s `arc` generator. The SVG is rendered through React, with each part—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—defined in separate ES6 modules and composed in `index.js`. Coordinates and sizes like eye offset and mouth radius are passed as props, while the `FaceContainer` wraps children in a translated group. The code uses React fragments to group the eyes without extra DOM elements.

Nov 7, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a React-rendered SVG smiley face, centered and sized to the browser window. The face consists of a yellow circle with a black stroke, two black eye circles, and a mouth drawn as an arc. The mouth is generated using D3’s `arc` function to compute the path for an SVG `<path>`. The implementation separates components (`BackgroundCircle`, `Eyes`, and `Mouth`) in React, with fixed offsets and radii such as `eyeOffsetX`, `eyeRadius`, and `mouthRadius` to position features. The dimensions and center are derived from `window.innerWidth` and `window.innerHeight`, and the SVG scales to fill the viewport.

Nov 7, 2021