This example renders a classic smiley face as a reusable React component tree, composing a yellow background circle, two eyes, and an arc-based mouth centered on an SVG canvas. The React components (`BackgroundCircle`, `Eyes`, `Mouth`) receive numeric props for positioning and sizing, while the mouth’s curved path is generated using `d3.arc()` with explicit inner and outer radii and angular start/end values. The static visualization relies on SVG elements and React’s declarative rendering, with the overall face centered via an SVG `<g>` transform.