Skip to main content
SimilarExport ZIP
100%

Smiley Face Part 4

✓ Published3🌍 Public
TTom-S82
Last edited Feb 24, 2020
Created on Feb 2, 2020
Forked from Smiley Face Part 1

A smiling face rendered with SVG uses React components for each facial feature, including a gradient-filled face, eyes with colored irises and pupils, a mouth built from D3 arcs, and teeth as rectangles. Eyebrows are separate React elements with CSS hover effects that change their fill and stroke via custom properties. The face rotates slightly, and the eyebrows animate upward using SVG's built-in `<animate>` element with keyTimes and repeatCount, while the entire scene sits on a green background gradient.

AI-generated description

Smiley Face Tutorial with React (with Basic hover effects on the eyebrows). Refactored slightly.

Source: Datavis 2020 Episode 7 - Let's Make a Face Part III (React & D3)

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part 4

This example shows a stylized smiling face composed of SVG shapes, including a gradient-filled head, eyes, pupils, teeth, tongue, and hoverable eyebrows. Built with React and D3 v5, the face is assembled from reusable components like `Face`, `Eye`, `EyeBrow`, and `Mouth`, with the mouth and tongue shaped using D3’s `arc` generator. The eyebrows change fill and stroke width on hover via CSS custom properties. The design uses a radial layout, rotation transforms, and a linear gradient defined in SVG, all rendered in a React component with D3 utilities.

Aaigioma
93% match
Loading thumbnail…

Smiley Face Part 4

This example shows a stylized smiley face built with React and D3 v5, rendered as an SVG. It uses a radial gradient for the background and a rotated linear gradient for the face fill. The eyes, pupils, and eyebrows are separate React components, with the eyebrows styled using CSS variables that change their fill and stroke-width on hover. The mouth is drawn with D3’s `arc` generator, and a blue tongue is rendered as a separate path. The code defines layout constants for positioning all facial features.

NNoor M
92% match
Loading thumbnail…

Smiley Face Part IV

A simple smiley face is rendered as an SVG graphic using React components for each facial feature. The background circle, eyes, and mouth are defined as separate reusable components, with the mouth drawn using the `d3.arc` generator from d3-shape. The face is centered by translating a group element, and all positions and sizes are controlled through props and constants. The example demonstrates composing D3-generated paths with React’s declarative rendering style.

GGuus Lammers
92% match
Loading thumbnail…

Smiley Face Part V

A smiling face rendered as a React SVG composition uses d3.arc to draw a curved mouth, while the face's background, eyes, and gradient fill are plain SVG elements. A radial gradient transitions from red at the center to blue at the edges, with the face positioned at the viewport center. The code imports ES6 modules and combines React components with D3 v5 to construct the graphic procedurally from numeric constants.

Rrsulli4
91% match
Loading thumbnail…

Smiley Face Part IV

This example shows a smiling face built from basic SVG shapes, centered on a yellow circle with a black outline, two eyes, and a curved mouth. The face is rendered using React components that generate SVG elements, with the mouth created using D3’s `arc` generator to produce a path. The code uses React’s `ReactDOM.render` to mount the app, and D3 v5’s `arc` API to define the mouth’s inner and outer radii and angles. The background circle, eyes, and mouth are positioned relative to a central transform group.

Nnghosh319
90% match
Loading thumbnail…

Smiley face

A smiling face drawn with SVG circles, rectangles, and a path fills the viewport, rendered through React. The face uses two black eyes, a white incisor, and a thick black mouth arc created with `d3.arc`. The code sets specific radii, offsets, and stroke widths to position features relative to the center. React renders the SVG elements, while D3 provides the arc generator for the mouth. A yellow background circle with a thick black outline forms the head, and the entire composition is centered using SVG transforms.

TTomWellthere
90% match
Loading thumbnail…

Smiley Face Part 4

A smiley face rendered as an SVG using React components and D3’s arc generator for the mouth. The face is built from a yellow background circle, two dark eyes, and a thick black mouth arc, all centered via a translate transform. React 16 manages the SVG elements, while D3 v5 calculates the mouth’s path from angular start and end points. The code defines reusable components like BackgroundCircle and imports only the arc function from D3, demonstrating a minimal integration of both libraries.

Llshinton
90% match
Loading thumbnail…

Smiley Face Part IV

This smiley face visualization renders a static, SVG-based cartoon face using React components and D3’s `arc` generator for the mouth. The background circle, eyes, and mouth are positioned via a translated coordinate system, with constants defining radii and offsets. Built with React 16.9 and D3 v5, it uses three reusable functional components—`BackgroundCircle`, `Eyes`, and `Mouth`—to compose the final shape, demonstrating a modular approach to SVG drawing within a React framework.

NNita
90% match