Fork of Hello LEWIS

100%

Fork of Hello LEWIS

✓ Published0🌍 Public

Last edited Feb 21, 2022

Created on Feb 21, 2022

This example shows a stylized smiley face built from modular React components, rendered as SVG. The face consists of a yellow circular background, two black eyes, and a mouth drawn as an arc using D3’s `arc()` generator with specified inner and outer radii. Each part—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—is a separate React function component, composed together in `Face`. The `FaceContainer` sets the SVG dimensions and translates a group to center the face, while D3 v7 handles the arc path generation.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

A simple smiley face rendered with SVG in a React component hierarchy. The face uses a yellow background circle, two eyes, and a curved mouth drawn with `d3.arc`. Each facial feature is a separate React component (`BackgroundCircle`, `Eyes`, `Mouth`) composed inside a `FaceContainer` that centers the drawing. The example demonstrates reusable React components with D3’s arc generator for the mouth path, using fixed dimensions and props to control geometry.

Vvarmps

91% match

Loading thumbnail…

Fork of Hello HTML

This example shows a stylized smiley face built entirely from SVG primitives. A yellow circle with a black outline forms the head, two solid black circles serve as eyes, and a curved mouth is drawn as a partial ring. The face is constructed from modular React components, including `BackgroundCircle`, `Eyes`, and `Mouth`. The mouth shape is generated using the D3 `arc` API to define a path, while the entire composition is centered within an SVG using a translated group.

RRohith arabati

91% match

Loading thumbnail…

Fork of Smiley Face Part I

This example shows a stylized smiley face composed of a yellow circular background, two black eyes, and a curved mouth rendered as a thick arc. The face is built from modular React components, including `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`, which assembles the SVG output. The mouth uses the `d3-shape` library’s `arc()` generator to define its path, while the overall layout is positioned with SVG transformations. The result is a static, data-driven visualization created with React and D3 v7.

LLucas Sobrinho

90% match

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a smiling face constructed from modular React components, with a yellow circular background, two eyes, and an arched mouth drawn using d3’s `arc` generator. The SVG is rendered through React, with each part—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—defined in separate ES6 modules and composed in `index.js`. Coordinates and sizes like eye offset and mouth radius are passed as props, while the `FaceContainer` wraps children in a translated group. The code uses React fragments to group the eyes without extra DOM elements.

DdbarU

90% match

Loading thumbnail…

Fork of Fork of Hello HTML

This example displays a simple smiley face rendered as SVG, composed of a yellow circle background, two black eye circles, and a mouth arc drawn with D3’s `arc` generator. The face is built using React components, with the `BackgroundCircle` reusable component and the `App` component setting SVG dimensions and transforms. D3 v7 supplies the arc path, while React 18 handles the DOM rendering. The code defines fixed geometry constants for positioning and sizing, and the eyes are offset horizontally and vertically around the center point.

JJason Summercamp

90% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from reusable React components, rendered as an SVG that fills the browser window. The face consists of a yellow background circle, two black eyes, and a mouth created using the `d3.arc()` API from D3 v7. The React components (`FaceContainer`, `BackgroundCircle`, `Eyes`, `Mouth`) compose the visualization, with the face centered using SVG transforms. The code runs in a React 16.9 production environment and imports D3 directly for the arc path generation, demonstrating a minimal component-based approach to SVG drawing.

Ttdinh09

90% match

Loading thumbnail…

Fork of Hello HTML

This example shows a smiley face rendered as a single SVG graphic, constructed with React and D3. The face is built from basic geometric shapes: a yellow circle for the head with a black stroke, two filled circles for eyes, and a D3-generated arc path for the mouth. React composes the SVG elements, while the `arc()` API from d3 defines the mouth’s curved path, specifying its inner and outer radii and start and end angles. The SVG canvas is fixed at 660 by 500 pixels, with the face centered through an SVG transform.

Ssd2beatles

90% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a stylized smiley face built from three reusable SVG components: a yellow background circle, a pair of eyes, and a mouth drawn as an arc. The face is positioned at the center of a 1060×500 SVG canvas using React components that receive geometry props for radii and offsets. The mouth path is generated with d3.arc(), while BackgroundCircle and Eyes render plain SVG circle elements. React 16.9 and D3 v7 work together, with all drawing handled declaratively through JSX.

Rrishyossarian

90% match