Preng Biba

@prengsen·2 public vizzes

Fork of Fork of Hello HTML

The visualization renders a yellow face with black eyes and an arc-shaped mouth, composed entirely of reusable React components that assemble an SVG scene. It uses React to structure and render the graphic, with the D3.js `arc` API generating the mouth path. Parameters like eye offset, radius, and stroke width are passed as props to control the face’s proportions, while the `FaceContainer` handles the SVG viewport and a translate transform to center the elements at the given coordinates.

Jul 1, 2022

Loading thumbnail…

Fork of Hello HTML

The example renders a "smiley face" in SVG by pairing React with D3. It constructs a yellow circle for the head, black circles for the eyes, and a D3 arc path for the mouth, all positioned using coordinate offsets. The React component returns an SVG element, with circle and path elements generated via JSX, and uses the `arc()` generator from `d3` to compute the mouth’s path data. All geometry is derived from fixed constants, and the visualization is drawn at a size of 960 by 500 pixels.

Jun 30, 2022