Victor Barbosa Rocha

@Victorrrocha·2 public vizzes

Follow Mouse

This example shows a simple interactive face whose eyes follow the mouse cursor across an SVG canvas. The face is built from reusable React components—an outer circle, eyes, and an arc-based mouth—rendered as SVG primitives. As the user moves the mouse, React state updates the position of the black pupil circle via an `onMouseMove` handler. The code combines d3’s `arc` generator for the mouth with React’s `useState` and `useCallback` to manage the interactive tracking.

May 1, 2021

Loading thumbnail…

Hello HTML

This example displays a grid of 50 identical smiley faces, each rendered as a yellow circle with black stroke, two eyes, and an arc-shaped mouth. Built with React components, the face features are composed from reusable SVG elements including `FaceContainer`, `OutsideCircle`, `Eyes`, and `Mouth`. The mouth uses a D3 arc generator with specified inner and outer radii and angles. The code leverages React’s component structure and D3’s `range` function to generate the repeated faces across the viewport.

Apr 30, 2021