100%

Fork of Various Emotions

✓ Published0🌍 Public

Last edited Aug 5, 2025

Created on Aug 5, 2025

A grid of eighteen SVG emoji faces, each expressing a distinct emotion from happy to angry, responds to mouse proximity with smooth intensity-based animations. D3.js v7 powers the grid layout and data range generation, while React components manage state and render the faces. Each face, built from modular parts like eyes, eyebrows, and mouth, dynamically scales features and triggers effects such as tears, steam, sparkles, and glows based on distance calculations, creating a playful, interactive gallery.

AI-generated description

Interactive Emoji Faces

A delightful React application featuring animated emoji faces that respond to mouse movement with smooth intensity-based animations.

Features

Responsive Animation: Faces react to mouse proximity with smooth intensity scaling
Performance Optimized: Throttled mouse events and memoized calculations
Rich Visual Effects: Gradients, glows, sparkles, tears, steam, and more
Smooth Transitions: CSS-based animations for fluid user experience
Modular Architecture: Clean, reusable components with clear separation of concerns

Emotions

Happy (with sparkles and teeth)
Sad (with tears)
Surprised (with sweat drops)
Angry (with steam and gritted teeth)
Neutral (calm expression)
Worried (with sweat drops)

Technical Highlights

Throttled mouse events for 60fps performance
React.memo for component optimization
Smooth cubic-bezier transitions
SVG-based rendering with filters and effects
Responsive design with CSS Grid
Configurable emotion system

MIT Licensed

Similar vizzes

Loading thumbnail…

Various Emotions

An interactive grid of eighteen cartoon faces displays six distinct emotions—happy, sad, surprised, angry, neutral, and worried—at three intensity levels each. As the mouse moves, each face dynamically adjusts its emotional expression based on proximity, scaling features like eye size, eyebrow angle, and mouth curvature through smooth interpolation. Built with React and D3, the visualization uses SVG primitives including circles, ellipses, and paths to render facial components, with effects like tears, sweat drops, steam, and sparkles appearing conditionally per emotion.

CCurran Kelleher

91% match

Loading thumbnail…

Fork of HTML

A grid of 18 smiley face SVGs is rendered using a combination of React and D3. Each face is randomly generated with varying stroke widths, eye radii, and mouth dimensions, resulting in a diverse array of expressions. The faces are constructed from modular components (`BackgroundCircle`, `Eyes`, `Mouth`) that assemble within an SVG container, with the mouth shape drawn using D3’s `arc()` path generator. React’s `range()` and `map()` functions iterate to produce the grid, while ReactDOM renders the final composition into the page.

Mmackoshkamacka

85% match

Loading thumbnail…

Fork of Smile Face

A grid of randomly sized and positioned smiley faces renders in SVG using React and D3. The HappyEmoji component combines a yellow background circle, two eyes, and a smiling mouth arc generated with the d3 arc() API. Each face uses randomized values for stroke width, eye offset, eye radius, and mouth dimensions via Math.random(). The React app maps over a range of 18 entries to produce the repeated emoji pattern, with the SVG container centered for each face.

MMistry Pavan Kumar

85% match

Loading thumbnail…

Fork of Fork of Hello HTML

A grid of eighteen smiley faces appears, each with a yellow circular head, black outlined eyes, and an arched mouth. The faces are rendered as Scalable Vector Graphics (SVG) using React components, with randomized eye offsets, eye radii, mouth widths, and mouth radii generating subtle variation across the grid. The visualization uses D3's `arc` API to construct the mouth paths, while React manages the component hierarchy and state, and `d3.range` generates the array of face instances.

MManuel Gil

84% match

Loading thumbnail…

Fork of HTML Starter

A grid of fifty randomly generated smiley faces fills the screen, each rendered as a separate SVG using React components. The faces vary in eye radius, mouth width, and mouth radius due to Math.random() values passed as props. The code uses React 17 and D3 v7, specifically the d3.arc() API to construct the mouth path, while reusable components like FaceContainer, BackgroundCircle, Eyes, and Mouth structure the visualization. All faces share the same dimensions and center coordinates, creating a repetitive, playful pattern.

Mmukta1994

84% match

Loading thumbnail…

•ᴗ•

A grid of 18 randomly varied smiley faces fills the screen, each rendered as a standalone SVG via React. The faces use d3's `arc` generator to draw the mouth shapes, while eye size, mouth width, and stroke thickness vary per face. The code builds each face from modular components (`BackgroundCircle`, `Eyes`, `Mouth`) and uses `d3.range` to iterate over the grid, with all layout centered through a shared `FaceContainer` component.

Ffleidelav@gmail.com

84% match

Loading thumbnail…

Fork of Fork of Smiley Face Part V

A grid of eighteen randomized smiley faces renders as SVG via React components, each with a yellow face, black stroke, offset eyes, and an arc-based mouth. The code splits reusable parts into separate ES6 modules (BackgroundCircle, Eyes, Mouth, FaceContainer) and uses React Fragments to group eye elements. It leverages d3’s `arc` generator for mouth paths and `range` for iteration, with ReactDOM mounting the app. Random values for eye offset, eye radius, and mouth dimensions generate subtle variations across the repeated faces.

AAnthoVDO

83% match

Loading thumbnail…

Fork of Smiley Face Part III

A grid of eighteen smiley faces rendered with React and D3 v5 shows a playful variation in facial features. Each face, composed of SVG circles and a D3 arc path for the mouth, uses randomized eye radius, mouth width, and mouth radius values to create unique expressions within a fixed layout. The React components structure the SVG, while D3’s `arc()` API generates the mouth shape.

Sshirakumo155

83% match