Smile face II

100%

✓ Published0🌍 Public

Last edited Aug 31, 2021

Created on Aug 30, 2021

A smiley face is rendered as a single SVG circle that follows the mouse cursor across a 960-by-500 viewport. The circle’s center coordinates update on every mouse movement via React state and the `onMouseMove` event handler. The example uses React 16.9 and D3 v7’s `arc` import (though unused), with SVG rendering managed by ReactDOM. The circle starts at the center and tracks the pointer’s client coordinates in real time.

AI-generated description

A program that follows your mouse with a circle

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part III

This example uses React and D3 v7 to render a single SVG circle that follows the mouse cursor. The circle’s center coordinates are updated via React state on every mouse move event, using the `onMouseMove` handler. The code leverages D3’s `arc` module and React’s `useState` hook, with a fixed canvas size of 960 by 500 pixels. The result is an interactive smiley face that tracks pointer movement in real time.

MMagomed Shamaev

89% match

Loading thumbnail…

Smiley Face Part 2

A smiley face remains static and centered, while a single gray circle tracks the mouse movement across the SVG canvas. The React component uses `useState` and `useCallback` to update the circle's `cx` and `cy` attributes on every `mousemove` event, rendering via ReactDOM. The example demonstrates interactive SVG rendering with React and D3 v7, though it does not use D3-specific APIs beyond the imported library.

GGutManuel85

89% match

Loading thumbnail…

Smiley Face Part I

A yellow circle with a black outline and a black arc smile follows the mouse cursor across an SVG canvas. Built with React and D3 v7, the smile is generated using the `arc()` generator from D3, while React's `useState` and `useCallback` hook react to `onMouseMove` events. The circle renders as an SVG element at the cursor's current position.

Ddrc6587

89% match

Loading thumbnail…

Smiley Face Part 2

A stylized smiley face is drawn using SVG circles and an arc for the mouth, centered within a 960 by 500 viewport. The face is constructed with React components, where each visual element is defined by computed constants such as eye offset, radius, and stroke width. D3’s `arc` generator creates the mouth path with specified inner and outer radii and angular range. The code uses React 16.7, ReactDOM, and D3 v7, rendering declaratively with JSX.

JJohn Jeevasaeyan

88% match

Loading thumbnail…

Smiley Face Part II

A yellow smiley face follows the mouse cursor across a full-screen SVG canvas. As the pointer moves, the face's position updates in real time through React state and event handling. The implementation uses React 16.9 with the `useState` and `useCallback` hooks within an SVG `circle` element, responding to `onMouseMove` events to set the circle's `cx` and `cy` coordinates.

BBrian Musisi

88% match

Loading thumbnail…

Smiley Face Part 1

A single gray circle follows the mouse cursor across an SVG canvas, its position updating live as the pointer moves. The visualization demonstrates React state management with the `useState` and `useCallback` hooks, where mouse coordinates from the `onMouseMove` event drive the circle’s `cx` and `cy` attributes. Rendered via ReactDOM into a root div, the SVG uses D3 v6 for its helper functions, with a fixed 960×500 viewport and a 30-pixel radius. No external data is loaded; the interaction is purely event-driven.

MMark Mburu

88% match

Loading thumbnail…

Smiley Face Part II

A lone black circle follows the cursor across a blank, full-window SVG canvas. Built with React, the app tracks the pointer's coordinates through the `onMouseMove` event, stores them in state with `useState`, and re-renders a single `<circle>` element at the current position. The example uses React 16.9 and ReactDOM to update the SVG in real time, demonstrating a minimal interactive visualization driven by mouse input.

SSergio Razza

87% match

Loading thumbnail…

Smiley Face Part II

A single black circle follows the mouse cursor across a blank SVG canvas, responding to every movement with a one-to-one positional update. The React component tracks the pointer via the `onMouseMove` event and stores the coordinates in state using the `useState` hook, while `useCallback` optimizes the handler. ReactDOM renders the scene, and the circle's center is set directly to the cursor's clientX and clientY values, creating a simple, immediate interactive visualization.

LLicheng Zhang

87% match