Ayush Tiwari

@ayushballia·2 public vizzes

Fork of Smiley

A grid of fifteen small smiley faces, each with randomly generated eye and mouth sizes, fills the screen. The faces are rendered as SVG circles with yellow backgrounds and black outlines, composed through reusable React components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. The `Mouth` component uses `d3.arc` to create a curved path, while the `App` component maps over a `d3.range` array to generate the varied faces.

Nov 3, 2022

Loading thumbnail…

Smiley Face part 1

A modular React component builds a smiley face from SVG primitives, showing a yellow circle background with black stroke, two eyes, and a partial mouth arc. The face is centered via a translated `<g>` group, with eye and mouth positions parameterized by offset and radius props. The code uses D3's `arc` generator to define the mouth path, while React manages component composition and SVG rendering through the `FaceContainer` wrapper.

Nov 3, 2022