Dennis Kozevnikoff

@denniskozevnikoff·2 public vizzes

mouse follower

A smiley face follows the mouse cursor across the screen, rendered as SVG circles on a hidden-background canvas. Using React hooks (`useState`, `useCallback`) for state management and D3 v5 for event handling, the component tracks pointer coordinates and updates the face’s position accordingly. D3’s mouse interaction API reads the cursor location relative to the container, while React’s state-driven re-rendering animates the yellow circle face, eyes, and smile in real time.

Apr 19, 2023

Loading thumbnail…

smiley face

This example shows a yellow smiley face rendered five times in a row, each with identical parameters for its circular head, eyes, and mouth. The face is built from reusable React components, including a background circle, eyes, and a mouth, all composed within a scalable SVG container. The mouth uses the d3 `arc` API to generate a curved path, while the head and eyes are simple SVG circles with computed offsets. The entire composition is positioned and scaled using React and rendered through ReactDOM.

Apr 6, 2023