Smiley Face Part 4

100%

Smiley Face Part 4

✓ Published0🌍 Public

Last edited Feb 20, 2020

Created on Feb 20, 2020

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.

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 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

96% match

Loading thumbnail…

Smiley Face Part 4

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.

TTom-S82

93% 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

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

91% match

Loading thumbnail…

Smiley Face Part IV

This gallery example shows a stylized smiley face built from basic SVG shapes: two eyes, a curved mouth, and a large background circle. The face is centered on a 960-by-500 canvas, with the background filled by a red-to-blue radial gradient. The visualization is implemented as a React component, using D3’s `arc` API to generate the mouth path. The code also uses ReactDOM to render the SVG into a root div, with styles applied directly in the HTML file.

Rrsulli4

91% match

Loading thumbnail…

Smiley Face Part I

This example shows a stylized smiley face rendered as SVG in React, with features including a rounded-tip mouth, eyes, nose, blush, and decorative arcs. The mouth is created using d3.arc() with cornerRadius() to round the stroke ends, while other facial elements are positioned using SVG circles, rectangles, ellipses, and paths. The code sets explicit dimensions and coordinates, and uses React to render the SVG output within a d3.v5 environment.

CCurran Kelleher

90% match

Loading thumbnail…

Smiley Face Part IV

This example shows a classic smiley face constructed with SVG shapes and rendered through React. A yellow background circle with a thick black stroke forms the head, while two black circles serve as eyes and an arc path creates the mouth. The code uses React components and hooks into D3’s `arc` generator from the `d3` module to compute the mouth’s path coordinates. The visualization is fully static, with dimensions fixed at 960 by 500 pixels, and demonstrates a simple integration of D3 geometry with React’s declarative rendering in an SVG container.

Jjust67

90% match

Loading thumbnail…

Smiley Face Part 1

This example shows a stylized smiley face rendered as scalable vector graphics (SVG) through React components, with the face centered within a fixed 166-by-166 viewport. The visualization is composed of a yellow background circle with a black stroke, two black eyes positioned symmetrically, and a mouth created using the `d3.arc` generator with specified inner and outer radii and angular range. Each facial feature is a separate React component (`BackgroundCircle`, `Eyes`, `Mouth`) composed within a `FaceContainer` that applies a translation transform. The code relies on `ReactDOM` for rendering and D3 v6’s `arc` API for path generation.

Oonthebanks14

90% match