Sam Malloc

@emu-007·2 public vizzes

Fork of Smiley Face Part VI

A grid of randomized smiley faces, each rendered as a self-contained SVG face, demonstrates component reuse and declarative composition in React with D3. The code defines reusable React components for the face background, eyes, and mouth, with the mouth using the `d3.arc` API to generate a smile path. Six faces are generated via `d3.range`, with random values for stroke width, eye offset, eye radius, and mouth dimensions passed as props. The React components render SVG elements within a container that translates the coordinate system, showing how D3 shape generators integrate with React's component model.

Apr 17, 2021

Loading thumbnail…

svg_stuff

This example shows a yellow circle centered on an SVG canvas with two smaller unfilled circles, creating a simple smiley-face composition. Built with React 17 and rendered directly through SVG markup, the graphic uses circle elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The body is styled with zero margin and hidden overflow, while the `<svg>` is sized at 960 by 500 pixels. The illustration demonstrates basic vector shape construction within an HTML page.

Mar 14, 2021