cmyers009

@cmyers009·2 public vizzes

Fork of Smiley Face Part III

A smiley face rendered as SVG responds to mouse movement, with a circle tracking the cursor across a screen-sized canvas. Eight yellow rectangles with black borders form the face’s background pattern, while the moving circle serves as a dynamic feature. The code combines React state management via `useState` and `useCallback` with D3 v5, using `Array.from` to generate the rectangles and inline SVG elements for rendering. React handles updates on `onMouseMove`, while D3 is imported but not directly used for drawing.

Sep 13, 2022

Loading thumbnail…

Smiley face pt 1

A yellow smiley face is rendered as a static SVG. The face consists of a circular background, two eyes, and a mouth, all positioned within an SVG canvas. The code uses React components to structure the drawing, with D3's `arc` API generating the mouth's path. Dimensions and positions for the face features are defined as variables in the main `App` component. The SVG is centered on the canvas, with the background circle radius calculated from the canvas height.

Sep 8, 2022