Satyam Sundaram

@satyam-01-byte·4 public vizzes

Fork of Mouse Follower

A circle follows the mouse cursor across an SVG canvas, changing its fill color to a random RGB value on every mouse movement. The React application tracks mouse coordinates via the `onMouseMove` event handler, updating state with `useState` and `useCallback` from React 16.9.0. The SVG element is rendered through ReactDOM, with the circle's position and color properties bound directly to the current mouse position and a randomly generated color string. This creates an interactive visualization where the circle's appearance changes continuously as the user moves the pointer.

May 12, 2021

Loading thumbnail…

Fork of Smiley Face w/ React

This React-based visualization displays an array of randomized smiley faces, generated using SVG primitives and D3.js. Each face consists of a yellow circle, two eyes with white highlights, a mouth arc created with D3's `arc()` generator, and a pair of white rectangles for teeth, all uniquely parameterized by random values for size and position. The gallery showcases React components composing individual SVG elements, with the `Emoji` component importing sub-parts like `Face`, `Eye`, `Mouth`, and `Teeth`, while rendering 18 instances via a `range()` map.

May 12, 2021

Loading thumbnail…

Smiley Face w/ React

A grid of 18 randomly generated smiley faces demonstrates how React components can be composed with D3-generated SVG paths. Each face uses reusable React components for the face, eyes, mouth, and teeth, with randomized properties like eye radius, mouth width, and teeth position. The mouth is drawn using `d3.arc()` to create a variable-width smile path, while all other shapes are plain SVG elements. The example combines React's component model with D3's arc generator to produce varied, data-driven visual output.

May 12, 2021

Loading thumbnail…

Basic Smiley Face

A yellow circle with a black outline forms a smiley face against a plain background. Two smaller black circles serve as the eyes, positioned symmetrically on the upper half of the face. The example uses raw SVG elements—specifically `<circle>` tags—to construct the shapes, with coordinates and radii calculated relative to the 960×500 viewport. No additional JavaScript libraries are involved; the rendering relies entirely on static SVG markup embedded directly in the HTML document.

May 12, 2021