Foair

@Foair·3 public vizzes

Mouse Follower

A React SVG visualization displays a single circle that follows the mouse cursor across a 960 by 500 canvas. The circle's center coordinates update in real time to match the pointer's clientX and clientY position, which are logged to the console. Using React's useState and useCallback hooks, the app renders a responsive circle with a 20-pixel radius. The visualization relies on React and ReactDOM for state management and SVG rendering, with no data source or external libraries beyond the React framework.

May 1, 2022

Loading thumbnail…

Smiley faces

A dozen orange smiley faces appear in a grid, each rendered as an SVG circle with a dashed stroke, two black eyes, and a curved mouth. The React app uses a `ConfigContext` to pass shared visual parameters, while the mouth shape is drawn with a D3 arc path. Random `stroke-dasharray` values give each face its own distinct outline.

Apr 30, 2022

Loading thumbnail…

Smiley face

A single SVG smiley face is drawn with an orange circle, two black eyes, and a mouth. The face is centered on a 960 by 500 canvas. The shape is constructed using React elements for the circles and a D3 `arc` generator to define the mouth path, which is styled with a thick stroke. The entire graphic is rendered within an SVG viewport, with dimensions and positions calculated in JavaScript.

Apr 30, 2022