VBarn

@VBarn·2 public vizzes

Mouse follower

A smiling face rendered as an SVG follows the mouse cursor across the canvas. The example combines React's `useState` and `useCallback` with D3.js to manage interactive state and coordinate updates. As the user moves the mouse, the application updates the position of the face's center, which is drawn using D3-driven SVG elements like circles for the head, eyes, and mouth. The underlying HTML hides page overflow for a full-screen, immersive interaction.

Oct 12, 2021

Loading thumbnail…

Smiley face part 5

A grid of 32 randomized smiley faces is rendered, each with a yellow circular background, two eyes, and a wavy mouth composed of alternating up-and-down arc segments. The faces vary in stroke width, eye position, and eye radius due to random values passed as props. Built with React and D3 v7, the visualization uses D3’s `arc` generator to create the mouth paths, while React components structure the SVG output. All faces are generated from a single `range(32)` array and rendered side by side, with the `SwiggleFace` component composing the head, eyes, and mouth layers.

Oct 9, 2021