Skip to main content
SimilarExport ZIP
100%

Lem's Smiley

✓ Published0🌍 Public
LLem Dulfo
Last edited Mar 9, 2021
Created on Mar 6, 2021
Forked from Hello HTML

This example renders a static smiley face using React components and SVG. The `Face` component composes a yellow `FaceCircle`, a pair of `Eyes` with white shine highlights, and a `Mouth` drawn with d3’s `arc()` path generator using a half-circle angle range and a purple fill. Fixed numeric props for dimensions, eye offsets, and mouth radius define the layout. The `FaceGroup` component creates the SVG container and applies a centering translation via a `<g>` transform.

AI-generated description

Smiley

MIT Licensed

Similar vizzes

Loading thumbnail…

SmileyFaceII

This example shows a yellow smiley face with black-outlined circular background, two eyes, and a curved mouth, all rendered as SVG elements within a React application. The face is composed of reusable components, including `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`, which assemble into a single `Face` component. It uses React for component composition and the `arc` function from D3 (d3.v7) to generate the mouth’s path geometry. The code uses fixed dimensions and hardcoded offsets, with no interactivity or data-driven behavior.

Lleongtini
90% match
Loading thumbnail…

Smiley

This example shows a static smiley face rendered as an SVG, composed of a yellow circular background, two eyes, and a curved mouth. The React components are split into separate ES6 modules—BackgroundCircle, Eyes, and Mouth—and assembled within an SVG group translated to the center of a 960×500 canvas. The mouth uses the d3.arc generator from d3.v5 to create a path with specified inner and outer radii and angular range. React Fragments group the eyes without adding extra DOM nodes.

SSayantan Pal
88% match
Loading thumbnail…

Smiley

A smiling face composed of a yellow circular head, two black eyes, and a curved mouth is rendered as an SVG graphic. The React component hierarchy, including `FaceContainer`, `Head`, `Eyes`, and `Mouth`, assembles the visual from configurable props like eye offset, radius, and mouth dimensions. D3’s `arc` API generates the mouth path, while the component-based structure allows the face’s geometry to be easily parameterized and reused.

Aaredmond-re
88% match
Loading thumbnail…

Smiley Face

This example shows a stylized smiley face constructed from reusable React components. The face consists of a yellow background circle, two black eyes, and a mouth drawn as an arc path, all centered within an SVG using a group translation. The code leverages React fragments and props to compose the `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` components, while D3’s `arc` generator defines the mouth’s shape with specified radii and angles. The rendering is fully declarative, with dimensions and positions passed as props from the main `App` component.

Nnpinta
88% match
Loading thumbnail…

Smiley Face Part I

A yellow, wire-framed smiley face rendered in SVG demonstrates reusable React components for composing static figures. The face uses `BackgroundCircle` for the head, `Eyes` for the pupils, and `Mouth`, which applies a d3 `arc` path generator with fixed start and end angles to draw an open-mouth shape. A `FaceContainer` wraps the SVG group, centering all elements via a translation transform. The example runs with React 17 and D3 v6, and the component props (including eye offset, radii, and stroke width) are set dynamically in the main app.

RRMartins11
88% match
Loading thumbnail…

Smiley Face Part VI

This example renders a static smiley face entirely through React components and SVG. The face consists of a yellow background circle, two black eyes, and a mouth created using the d3 `arc` generator with a specified inner radius, outer radius, and start/end angles. The code modularly separates the face into reusable components like `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`, which wraps children in an SVG group translated to the center coordinates. The illustration demonstrates compartmentalizing React modules to manage complexity, using d3.v6 for the mouth path and React 17 for rendering.

WWolfgang
88% match
Loading thumbnail…

Smiley face part one

This example shows a parameterized smiley face built with React and SVG, composed of a yellow circle, two eyes, and an arc-based mouth. The face is constructed from reusable components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—that accept numeric props for positioning and sizing. The mouth path is generated using the `d3.arc()` API, while all geometry is centered via an SVG `<g>` transform. The rendered output is a static, front-facing cartoon face with fixed dimensions.

Jjlehtomaa
88% match
Loading thumbnail…

Smiley Face (Arc)

This example renders a smiley face as a reusable set of React components, using SVG for all drawing. The face is composed of a yellow background circle, black-outlined by a `BackgroundCircle`, and two `Eyes` positioned with offset coordinates. The `Mouth` component uses the `d3.arc()` API to create a curved path, and the code places multiple mouth instances—including rotated and translated variations—to form a complex expression. All positions and sizes are computed from the SVG width and height, with no external data source.

NNita
88% match