Smiley Face Part 1
This example shows a single yellow circle with a black outline and one small black circle positioned inside it, representing the start of a smiley face. The larger circle is centered in an SVG viewport, with the smaller circle placed as an eye using fixed pixel offsets. The visualization is built with React components and rendered as SVG, using JSX to define the circles and their attributes such as `cx`, `cy`, `r`, and `stroke-width`. The code employs `ReactDOM.render` to mount the component into a root element.