ajie

@zwjaaa·2 public vizzes

Fork of Smiley Face Part II && III

This example shows a stylized smiley face constructed from modular React components, rendered as SVG. The face combines a yellow background circle, two eyes, and an arc-based mouth, all positioned relative to a central coordinate system. The implementation uses React 17 for component composition and d3’s `arc()` generator to create the mouth path. The `FaceContainer` wraps the SVG and applies a translation transform, while the app passes explicit dimensions and offsets to control the face’s layout.

Mar 7, 2022

Loading thumbnail…

Smiley Face Part I

A yellow circle with a black outline and two smaller black circles inside forms a basic smiley face. The example demonstrates static SVG rendering using inline `<circle>` elements within an `<svg>` canvas. The face is centered on a 960 by 500 pixel viewport, with the main circle's radius and stroke width set directly in the markup. The code does not use any JavaScript libraries or data binding, relying entirely on hardcoded SVG attributes for positioning and styling. The two eye circles are placed at fixed coordinates, while the mouth is absent, leaving the face incomplete.

Mar 7, 2022