tukaz make a face

100%

tukaz make a face

✓ Published1🌍 Public

Last edited May 31, 2022

Created on May 28, 2022

A yellow, black-stroked face with two eyes and an arched mouth follows the mouse while the button is pressed, dragging across the screen. The face is composed of SVG primitives rendered through React components, using D3’s `arc` generator to shape the mouth and `range` to construct a sequence of faces. Mouse events (`onMouseDown`, `onMouseUp`, `onMouseMove`) toggle a pressed state and update the face’s absolute position, demonstrating interactive event handling in a hybrid React/D3 workflow.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of tukaz make a face 2

This example shows a single cartoon face rendered with SVG that can be dragged around the screen by pressing and holding the mouse button. The face is built from React components for the head, eyes, and mouth, using D3's `arc` generator to draw the mouth shape. The app tracks mouse movement via React state and event handlers, repositioning the face container absolutely within the page whenever the mouse moves while pressed. With a viewport height of 500 pixels, the face follows the cursor freely, demonstrating a simple interactive drag interaction in a React and D3 hybrid setup.

LLucas Fiorini

83% match

Loading thumbnail…

Face moves with mouse

A yellow smiley face drawn with SVG elements follows the cursor as it moves across the screen. The mouse position is tracked via React's `useState` and `useCallback` hooks in response to an `onMouseMove` event on the root `<svg>`. The face is composed of reusable React components (`BackgroundCircle`, `Eyes`, `Mouth`, `Nose`) using `d3.arc` for the mouth path. The rendering is entirely SVG-based, with the face's geometry parameterized by props passed from the parent `App` component.

Aashokganpathi

81% match

Loading thumbnail…

Mouse follower

A smiling face follows the mouse cursor across a yellow circular background, with eyes and mouth that scale and shift based on randomized dimensions. Built with React components and D3 v5, the example renders SVG shapes including a circular background, offset eyes, and an arc-based mouth using the `d3.arc()` API. The face’s position updates dynamically in response to mouse movement, with component props controlling dimensions like eye offset, radius, and mouth width to create varied expressions.

RRoberto

81% match

Loading thumbnail…

Mouse face

A stylized mouse face is drawn as a simple SVG composition: a large yellow circle forms the head, two black circles serve as eyes, and a thick black stroke defines the outline. The example demonstrates drawing primitive shapes with React and D3.js v7, explicitly setting coordinates and radii as constants. It uses React’s `ReactDOM.render` to mount the SVG element and employs basic SVG `<circle>` elements without any data binding or dynamic behavior.

114Hazel

80% match

Loading thumbnail…

Mouse

A yellow circle with black stroke and a simple mouth follows the mouse cursor in this interactive SVG sketch. The face is composed from reusable React components—BackgroundCircle, Eyes, and Mouth—within a FaceContainer that translates the coordinate system to the cursor position. React's `useState` and `useCallback` handle mouse movement events on the SVG element, while D3's `arc` API constructs the mouth path. The code demonstrates a declarative, component-based approach to building interactive data visualizations with React and D3.

Ww.fukuyama@gmail.com

80% match

Loading thumbnail…

Fork of Let's Make a Face Adjusted mouse

This example shows a yellow smiley face drawn with SVG primitives: a circular head, two eyes, and an arc-based mouth. The React application uses D3 v7 functions like `d3.arc` for the mouth path and `d3.line` to generate a zigzag line for the hair. It demonstrates combining React components with D3 shape generators, with all elements positioned relative to the center using SVG transforms. The code includes static face geometry only, with no interactive mouse handling despite the title.

KKazushige Okuma

80% match

Loading thumbnail…

Mouse-follower

A cartoon face rendered in SVG follows the mouse cursor across the screen, with its yellow circular head repositioning to track pointer movement. Built with React and D3 v6, the face uses reusable components for the background circle, gradient-filled eyes, and an arc-based mouth. The `Face` component manages mouse position via React state and updates the circle's coordinates through `onMouseMove` events, while `range(1)` from D3 generates a single face instance.

JJonas Carvalho

80% match

Loading thumbnail…

mouse follower

A yellow smiley face is rendered as an SVG circle with black stroke, two eyes, and a mouth arc, centered on a 960×500 canvas. The example demonstrates how to draw the face using React components and D3’s `arc` generator, with the mouth path constructed from inner and outer radii and angular extents. The code imports `arc` from `d3`, uses JSX to define SVG elements, and positions all parts relative to the center. It serves as a minimal static illustration of combining React’s declarative structure with D3’s shape utilities for SVG output.

MMatheusKukac

80% match