Jackson Gordon

@jcgordon10·2 public vizzes

Mouse Follower

A React component tracks the mouse position and renders a single circle that follows the cursor across an SVG canvas. The application uses React’s `useState` and `useCallback` hooks to store and update the mouse coordinates, which are passed as `cx` and `cy` attributes to the SVG circle element. The circle starts centered on a 960 by 500 pixel viewport and moves smoothly in response to `onMouseMove` events. The example demonstrates a simple interactive pattern with React and SVG without any external data sources.

Oct 11, 2021

Loading thumbnail…

Fork of Hello HTML

This gallery example displays a grid of 72 randomly generated cartoon faces, each with a yellow circular head, white eyes with black pupils, and a curved mouth. The faces are rendered as React components using SVG primitives, with each face’s features varying in position, size, and offset based on random values. The code leverages the `d3.arc` API to construct the mouth path, while React maps over an array from `d3.range` to instantiate each face. The visualization demonstrates how randomized parameters can create diverse, expressive compositions within a fixed layout.

Oct 8, 2021