Smiley face 1

100%

✓ Published1🌍 Public

Last edited Sep 23, 2021

Created on Sep 20, 2021

A grid of six by three smiley faces reacts to mouse movement, with each face's eyes tracking the cursor position across the entire viewport. Built with React and D3 v7, the visualization renders SVG circles and arcs for the facial features, while the eye movement is computed using trigonometric functions and mouse event coordinates. Each face has randomized eye and mouth parameters, and the mouse tracking adjusts the pupils' positions based on the relative distance to the cursor.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Smiley Face

Eighteen identical smiley faces are rendered in a grid, each with randomly sized eyes and mouths, creating subtle variation across the composition. Every face consists of a yellow circle with a black stroke, two black eye circles, and an arc-based mouth. The visualization is built with React components that compose reusable SVG elements, while D3's `arc` generator creates the mouth path. A mouse-tracking circle follows the cursor, updating its position via React state and event handlers.

SStarkerRegen

91% match

Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces is rendered, each with randomly varied stroke width, eye offset, eye radius, and mouth dimensions, creating a playful array of subtly different expressions. The visualization is built with React and D3 v5, using SVG shapes for the background circle, eyes, and mouth. The mouth is drawn as an arc path generated by d3.arc, and each face is composed via reusable React components within an SVG container.

Nnkohdatavis

90% match

Loading thumbnail…

Different color smiley faces

This example renders a grid of interactive smiley faces, each with a distinct color and face size. The faces track the user's mouse movement, with the face container re-centering and resizing in response to cursor position. The visualization is built using React for component structure and state management, while D3’s `arc` function generates the mouth shape. Each face’s eye color and radius are set with random RGB values, and the SVG is updated dynamically via mouse event handlers.

NNita

89% match

Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces, each rendered as a yellow circle with black stroke, two eyes, and a curved mouth, shows randomized variation in facial feature size and position. Built with React and D3, the code uses the `arc` generator from D3 to create the mouth path, while SVG circles form the face and eyes. The `range` function from D3 generates the array for the grid, and each face is positioned via a transformed group within an SVG container.

Iikerson

89% match

Loading thumbnail…

Smiley Face(s)

A grid of randomly generated smiley faces fills the viewport, each face a modular composition of SVG elements built with React components. The d3 library provides the arc function for mouth shapes and a range operator to generate the face count. Each face’s features vary, including eye offsets, radii, stroke widths, and mouth dimensions, producing a playful collection. The rendering uses SVG inside React, with properties passed as props to modular components like Eyes, Pupils, and Tongue, demonstrating a reusable, data-driven approach to visual variation.

JJoe Hutchins

89% match

Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces renders in React, each with randomized eye positions, eye radii, mouth widths, and stroke thicknesses. The faces are generated using D3 v7’s `arc()` generator for the mouth and SVG circles for the eyes and background. All components are React function components, with the overall layout using D3’s `range()` to create the array of faces. The SVG output is centered via a translation group.

DDrew Dudley

89% match

Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces is rendered using React and D3 v7, with each face varying randomly in stroke width, eye offset, eye radius, mouth width, and mouth radius. Drawn as SVG within a `FaceContainer`, each face combines a yellow `BackgroundCircle` with a black stroke, two `Eyes` circles, and a `Mouth` path generated by D3's `arc` API, which creates an annular sector based on specified inner and outer radii and angles.

SShubham Pathak

89% match

Loading thumbnail…

Smiley Face

A grid of 18 smiley faces renders in SVG via React, each with randomized eye positions, eye radii, and mouth dimensions. The faces are composed from modular components: a yellow background circle with a black stroke, two eyes, and a mouth drawn using the D3 `arc()` path generator. React's `range()` utility from D3 generates the face array, while each face receives identical width and height props but varying randomized parameters for its features. The visualization demonstrates composable, data-driven SVG generation through reusable React components and D3 shape helpers.

Tthe-birchman

89% match