Skip to main content
SimilarExport ZIP
100%

Fork Smiley face to many faces

✓ Published0🌍 Public
Ddreidrachen
Last edited Mar 16, 2021
Created on Mar 16, 2021

This example renders a customizable smiley face using React and D3. The face is composed of separate components for the background circle, eyes, and mouth, with the mouth drawn using the d3.arc path generator. The FaceContainer component translates the entire face to the center of the SVG canvas. While the current code displays a single face, the component’s many configurable parameters—such as eye offset, radius, and mouth width—demonstrate how the same structure could be forked into multiple faces with different expressions.

AI-generated description

halfway towards a smiley face HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face Part I

A React and D3 v5 example renders multiple smiley faces in an SVG grid. Each face uses reusable components for the background circle, eyes, and mouth, with the mouth’s arc generated by D3’s `arc()` generator. Random eye radii and a fixed mouth shape vary each face. The `FaceContainer` applies a centered translation, and React’s `map()` over a `range(4*3)` array creates a 12-face layout.

MMaher Ali Rusho
93% match
Loading thumbnail…

Fork of Smiley Face (React and d3)

This example shows a stylized smiley face built with React and D3, rendered as SVG. The face is composed of separate React components for the background circle, eyes, and mouth, all positioned within a centered group. D3's `arc` function generates the mouth path, while the eyes use hardcoded circle coordinates. The code uses React 16 and D3 v6, with styling applied through a simple CSS file.

DDouglas J Dougan
92% match
Loading thumbnail…

Fork of Smiley Face Part III

This example displays multiple smiley faces rendered as React components, each built from reusable SVG parts for the background circle, eyes, and mouth. It demonstrates component composition and parameterization, varying face size, stroke width, eye radius, and mouth dimensions across instances. The faces are generated using D3’s `range` function to create ten iterations, while the mouth shape relies on D3’s `arc` generator with specific start and end angles. The SVG output is produced through React’s declarative rendering, with a `FaceContainer` managing the central translation transform for each face.

AasafJortilles
92% match
Loading thumbnail…

Fork of Smiley Face Part V

This example shows a smiley face built with reusable React components, rendered as SVG with D3’s arc generator for the mouth. The code splits the face into separate ES6 modules for the background circle, eyes, and mouth, using React fragments to return multiple elements. The face is centered via an SVG group transform, with fixed dimensions and styling defined in a plain HTML wrapper. The React and D3 libraries are loaded from CDNs, and the final composition is mounted into the DOM with ReactDOM.

Rredeath96
92% match
Loading thumbnail…

Fork of Smiley face part 1 cooler face

This example shows a stylized smiley face rendered as an SVG using React and D3. The face consists of a yellow background circle, two eyes, and a mouth drawn with an arc generator from D3. The components are modular, with separate React components for the face, eyes, mouth, and background circle, all composed within a face container that applies a transform to center the graphic. The mouth uses `d3.arc()` with specified inner and outer radii and angles to create a curved smile shape.

Ddreidrachen
92% match
Loading thumbnail…

Fork of Fork of Smiley Face Part III

This example renders a smiling face as a reusable React component, composed of separate SVG elements for the background circle, eyes, and mouth. The mouth uses d3’s `arc` generator to create a curved path based on configured radius and width values. All shapes are drawn in SVG within a single `<g>` container that translates the drawing to the center of a 960-by-500 viewport. The code explicitly defines constants for dimensions and positions, demonstrating a modular, parameter-driven approach to building simple visualizations with d3.v7 and React 17.

AAmir
91% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Smiley Face Part II

This example shows a scalable smiley face built from reusable React components, with its size and position adapting to the full browser window. The face consists of a yellow background circle, two black eyes, and a D3-generated mouth arc, all composed through nested functional components like `Face`, `BackgroundCircle`, `Eyes`, and `Mouth`. Rendering uses SVG within a React tree, while the mouth shape is created with the `d3.arc()` API, setting inner and outer radii and angular ranges. The code applies React 16.9 and D3 v6, with prop-driven customization for all facial features.

RReymond Mesuga
91% match
Loading thumbnail…

Fork of Fork of Smiley face part2 React

This example renders a smiling face as a React component using SVG, with d3.arc to draw the mouth path. The face is centered within a 1000x500 viewport, featuring a pink circle for the head, two red eyes positioned with fixed offsets, and a blue arc mouth. The code imports React and ReactDOM, uses d3.v7, and applies inline styling to remove page margins. The rendering approach manually defines SVG circle and path elements within a translated group.

FFrictionlessman
91% match