Mateus Marodim

@mateusmarodim·2 public vizzes

Fork of Smiley Face Part III

This example shows a modular, component-based smiley face built with React and rendered as SVG. The face’s features are separated into reusable components—FaceBackground, Eyes, and Mouth—each accepting props for size, position, and styling. The mouth uses D3’s `arc` generator to create a curved path, while the face background is a simple circle with a yellow fill and black stroke. The app assembles these components in `index.js`, passing fixed dimensions and coordinates to create a single centered face on a 960×500 canvas.

Oct 8, 2021

Loading thumbnail…

HTML Smiley Face

A minimal SVG smiley face is drawn directly in the HTML markup, consisting of a yellow circle with two black eye circles, using static coordinates and styling. The example demonstrates a React setup where `index.js` imports React and ReactDOM, logs `ReactDOM` to the console, and renders a simple "Hello JSX" component into the `#root` div, though the visible face itself does not use React for its drawing. The page loads React 17 from a CDN and includes a fixed 960x500 SVG canvas.

Oct 5, 2021