usmcmikestu

@usmcmikestu·3 public vizzes

Fork of Mouse Follower

A React component renders an SVG circle that tracks the mouse cursor across a 960-by-500 canvas. The app uses React’s `useState` and `useCallback` hooks to capture `clientX` and `clientY` coordinates from the SVG’s `onMouseMove` event, updating the circle’s `cx` and `cy` attributes in real time. The visualization demonstrates declarative state-driven rendering with React and ReactDOM, using no external data source beyond user input.

Mar 17, 2021

Loading thumbnail…

Smiley experiment

This example shows a static smiley face composed of a yellow circle with two black eyes and a curved line for a mouth, rendered as SVG in a React component. The face’s features are positioned using absolute coordinates relative to the SVG canvas center. The code uses React’s `useState` and `ReactDOM` for mounting, while the `BackgroundCircle` component handles the base circle. Although a mouse-move handler is defined, it only logs coordinates to the console and does not alter the visualization.

Mar 9, 2021

Loading thumbnail…

Fork of Hello HTML

A grid of smiling faces rendered with React and SVG, generated by composing reusable components for the background, eyes, and mouth. The code uses D3’s `arc` function to draw the mouth’s curved path and `range` to create 18 identical face instances. React manages the component tree, while D3 provides the geometric helpers for the SVG shapes.

Mar 8, 2021