Richikata

@Richikata·3 public vizzes

Mouse Follower

A circle follows the mouse cursor across a full-screen SVG canvas. The visualization tracks pointer movement through React state, updating the circle's `cx` and `cy` attributes on every `onMouseMove` event. Built with React and ReactDOM, it renders a single `<circle>` element with a radius of 30 pixels, initially positioned at the center of the viewport. The example demonstrates a simple, responsive interaction loop where user input directly drives SVG geometry.

Jul 3, 2021

Loading thumbnail…

Generation Multiple Smiley Face

A grid of 18 smiley faces fills the viewport, each randomly generated with variations in eye position, eye radius, and mouth size. The example shows how React components compose reusable SVG shapes, with separate `BackgroundCircle`, `Eyes`, and `Mouth` parts assembled by the `Face` component. Using React’s `map` and D3’s `range` utility, the code iterates 18 times, passing randomized values for facial features. D3’s `arc` generator creates the curved mouth path, while SVG positioning and transforms place each face within its own 160×160 viewport.

Jul 2, 2021

Loading thumbnail…

Circle With Background Image

A yellow circle with a facial expression rendered as a smiley face sits atop a full-screen background image, which is tiled into the SVG via a `<pattern>` and `<image>` element. The React component uses `window.innerWidth` and `window.innerHeight` to size the viewport, and positions the face at the center. SVG circle elements create the head, eyes, and mouth, with stroke and fill attributes defining the visual style. The implementation relies on React's `ReactDOM.render` to mount the SVG tree, using only native SVG and React APIs without external charting libraries.

Jul 2, 2021