shera1020

@shera1020·2 public vizzes

Fork of Smiley Face Part 2

This example shows a responsive smiley face rendered as an SVG, with a yellow circular head, two black eyes, and a curved mouth. The visualization adapts to the browser window size by computing its dimensions from `window.innerWidth` and `window.innerHeight`. The code uses React to create the SVG elements and calls `d3.arc()` from D3 v6 to generate the mouth path. The face is centered using an SVG `<g>` transform, and all shapes are positioned relative to that center point.

Mar 2, 2021

Loading thumbnail…

Smiley Face part 1

A static SVG smiley face renders a yellow circle with black outline, two smaller unfilled circles for eyes, and no mouth yet. Built with React and ReactDOM, the example mounts an empty `App` component into the DOM root while the SVG elements are hardcoded directly in the HTML file. The visualization introduces basic SVG shape attributes such as `cx`, `cy`, `r`, `fill`, and `stroke` within a 960-by-500 viewport, serving as a foundation for a future interactive face.

Mar 1, 2021