Skip to main content
SimilarExport ZIP
100%

Smiling face with conplexity files

✓ Published2🌍 Public
Aadewole-top
Last edited Mar 26, 2021
Created on Mar 25, 2021

A smiling face composed of modular React components renders as an SVG, with a yellow circle for the head, two black eyes, and a mouth drawn using the d3 arc generator. The components—BackgroundCircle, Eyes, and Mouth—receive explicit props for radius, offsets, and dimensions, demonstrating reusable, declarative composition. The example uses React 17 for component structure and D3 v6 for the mouth’s arc path, with a fixed SVG viewport and centered group transform.

AI-generated description

Half way towards the smiling face HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face w/ SVG & D3

This example shows a smiley face composed of overlapping SVG shapes, assembled declaratively in React. The face includes a yellow background circle, two black eyes, and a mouth, all positioned relative to a center point. The code builds the mouth using d3’s `arc` generator with custom radius and angle settings, while the React components (`BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`) render the SVG elements. Using d3.v6 and React 17, the visualization demonstrates reusable component composition and D3’s path generation for a simple, static graphic.

GGary Ditsch
90% match
Loading thumbnail…

Smily face

A smiling face built from SVG primitives appears centered in a yellow circle with black outlines, using D3’s `arc` generator for the mouth and React components for the eyes, background, and face container. The code renders the face by translating a group to the center of an SVG canvas, with the mouth’s arc defined by inner and outer radii and angular start/end points. React elements compose the structure, while D3 v5 provides the arc path calculation, and the layout is fixed at 960 by 500 pixels.

YYi
90% match
Loading thumbnail…

Faces

A modular smiley face is drawn in an SVG canvas using React components for its background circle, eyes, and mouth. The face is centered via a translated group, with positioned features defined by props. D3’s `arc` generator creates the curved mouth path, while the yellow circle and black strokes come from simple SVG elements. The example demonstrates composable React structure and static SVG rendering without interactivity.

LLove Wessman
90% match
Loading thumbnail…

smiley face

A yellow smiley face rendered as SVG via React components shows geometric shapes: a circle background, two eyes, and an arc-based mouth. Each facial feature is a separate React component—BackgroundCircle, Eyes, and Mouth—composed within a FaceContainer that applies a centered translate transform. The Mouth uses d3.arc with specified inner and outer radii and start/end angles to draw the smile. Hardcoded dimensions for the face, eyes, and stroke width define the static visualization.

Jjonrynn
90% match
Loading thumbnail…

Smiley Face Part I

A reusable React component renders a yellow smiley face with black circular eyes and a curved mouth using SVG. The face is composed of separate components for the background circle, eyes, and mouth, assembled inside a centered SVG group. D3's `arc` generator creates the mouth path, while React props control dimensions like eye offset, radius, and stroke width. The example demonstrates modular component composition with D3 integration in React.

Wwindwaver
90% match
Loading thumbnail…

Smiley Numba One

This example renders a simple, cheerful smiley face using React components and SVG. The face consists of a yellow background circle, two black eyes, and a mouth created with a D3 arc path. The React components BackgroundCircle, Eyes, and Mouth are composed within an SVG, with the D3 arc() API generating the curved mouth shape. The rendering is fully data-driven through props like radius, eyeOffsetX, eyeRadius, and mouthRadius, demonstrating a modular approach to building static SVG visualizations with React.

Mmarvell99
90% match
Loading thumbnail…

Smiley Face Part I

This example shows a simple smiley face rendered as an SVG composition of circles and an arc. A yellow background circle with a black stroke forms the head, two black circles serve as eyes, and a d3.arc path creates the mouth. The React components—BackgroundCircle, Eyes, Mouth, and FaceContainer—accept numeric props for position and sizing, while Face assembles them into a centered group. The code uses d3.v7 for the arc generator and React 18 for rendering, with all geometry defined by constants in index.js.

JJudit Nagy
90% match
Loading thumbnail…

Smiley Face Part V - ES6 Modules

A smiling face rendered as an SVG diagram using React components for its yellow background circle, two black eyes, and a curved mouth. The mouth shape is generated with the D3 `arc()` generator, while the background and eyes are simple SVG `<circle>` elements. React 17 renders the composed components into the DOM, with D3 v6 imported specifically for the arc path calculation. The face is centered within a 960-by-500 viewport, and all sizes and offsets are defined as constant variables in the main module.

Ddev-ignacio-h
90% match