{"version":"1.0","type":"rich","title":"2. Face Part II using React","description":"This example uses React to render a smiley face as an SVG graphic. The application calculates the circle positions for the face, eyes, and head using constants derived from the window height and a fixed width, dynamically sizing the SVG to fit the browser viewport. The code imports React and ReactDOM to define an `App` component that outputs SVG elements, including `circle` tags, with properties for center coordinates, radius, fill, and stroke. The head uses a yellow fill with a black stroke, while the eyes are solid black circles positioned symmetrically around the face’s center. The rendering is handled entirely through React’s declarative component model, with the `ReactDOM.render` method inserting the SVG into the page’s root element.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/9231b708f80f4a34adc4d07914cf7c18?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}