This example demonstrates a modular React component approach to rendering a smiley face using SVG. The `Face` component composes separate `BackgroundCircle`, `Eyes`, and `Mouth` sub-components, with the mouth drawn using D3’s `arc` generator with specified inner and outer radii and start/end angles. The face is positioned within an SVG container via a `<g>` transform, and all visual properties—such as eye offset, radius, and stroke width—are passed as props from the top-level `App` component. React renders the SVG declaratively, while D3 handles the geometric path calculation.