Small Face HTML CSS SVG REACT
This example builds a smiley face from reusable React components, including a yellow background circle, two eyes, and a mouth. The face is rendered as SVG within a 960×500 viewport, centered using a `<g>` element with a translate transform. The mouth is drawn using `d3.arc` to create a curved path with specified inner and outer radii. React 18 and D3 v7 are loaded via UMD scripts, and the components accept props like radius, offsets, and stroke width to control the face's dimensions. The `BackgroundCircle` uses a fixed yellow fill with a black stroke, while the overall layout is static.