Fork of Mouse Follower

100%

Fork of Mouse Follower

✓ Published0🌍 Public

Last edited May 23, 2022

Created on May 23, 2022

Two identical cartoon faces are drawn as layered SVG circles: an orange background head, two eyes, and an arc-based mouth. A React app renders two `<Face>` components centered in a 960×500 viewport, each composed from reusable subcomponents like `BackgroundCircle`, `Eyes`, and `Mouth`. The code uses React for component composition and the D3 `arc()` generator to define the mouth’s curved path, with all geometry parameterized via props.

AI-generated description

A bare minimum MÖHHHH page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of creative face

A playful face follows the mouse cursor across an SVG canvas, tracking pointer movement via React state updates. The face is composed of reusable SVG components—a yellow circular background, two eyes, and a mouth arc—rendered through React and D3's `arc` generator. Mouse position drives the face's coordinates, while the D3 arc API creates the smile shape with specified radii and angles.

Jjackcaldwellnichols

85% match

Loading thumbnail…

mouse follower

A static face is drawn with SVG circles for eyes and a d3.arc path for the mouth, centered within a 960×500 viewport. The React component structure separates the face into BackgroundCircle, Eyes, and Mouth subcomponents, with the FaceContainer applying a transform to position the group. The example demonstrates the use of d3.arc to generate the mouth curve and React’s component composition to assemble a simple visual element, though no interactive mouse-following behavior is visible in the provided code.

Bblackbottt

84% match

Loading thumbnail…

Fork of Hello HTML

This example renders a cartoon face composed of SVG shapes in a React component hierarchy. It uses D3's `arc` generator to draw the mouth and passes numeric props from a top-level `Face` component down to `BackgroundCircle`, `Eyes`, and `Mouth`. The face is centered with a yellow background circle, two black eyes, and a curved smile. The React app mounts to a div and renders the face into an SVG container with a fixed width and height.

Ddmagarian

84% match

Loading thumbnail…

Fork of Hello HTML

Two identical cartoon faces render side by side on a yellow circular head with black outlines, each displaying two offset eyes and an arc-shaped mouth. Built with React components, the visualization composes SVG circles and a d3.arc-generated path for the mouth, with all geometry passed as props from the App. The code imports d3 exclusively from the global d3 namespace when calling d3.arc().innerRadius.

Ddeniselezi

84% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A React-based face built from composable SVG components renders a yellow circle with two black eyes and a smiling mouth. The face’s geometry is parameterized through props like `eyeOffsetX` and `mouthRadius`, while the mouth uses `d3.arc` to generate a curved path. The `FaceContainer` wraps the SVG and applies a centering transform, and the final scene is mounted with `ReactDOM.render`. The code imports specific React components, including `BackgroundCircle`, `Eyes`, and `Mouth`, and uses D3 v7 for arc generation.

YYodae Lim

84% match

Loading thumbnail…

Mouse Follower

A circular face, drawn with SVG, sits at the center of the canvas. The face consists of a yellow background circle, two black eyes, and a mouth shaped using the D3 arc generator. The React components each return SVG elements, with the mouth's path computed by `d3.arc()`. The entire graphic is rendered using React DOM, and while the title suggests interaction, the code does not include any mouse-tracking logic.

Bblueyjuice

83% match

Loading thumbnail…

Fork of Hello HTML

This D3.js v7 and React example renders a simple cartoon face built from SVG circles and an arc-based mouth. The `Face` component composes smaller components—`BackgroundCircle`, `Eyes`, and `Mouth`—inside a `FaceContainer` that translates the coordinate system to the center of the 960×500 viewport. The mouth shape is generated using D3’s `arc` API, which defines inner and outer radii and angular range. The code demonstrates component-based composition and parameterized positioning with props, though it does not show any underlying data source or interactive behavior.

EErik

83% match

Loading thumbnail…

Fork of HTML Starter

This example displays two identical cartoon faces, each composed of a yellow circle with black outline, two eyes, and a curved mouth. The faces are rendered using React components that structure the SVG elements, with D3’s arc generator used to create the mouth path. The center of each face is positioned at the SVG’s midpoint via a group transform, and facial features like eye radius and mouth size are controlled through component props.

TTerryZ7

83% match