Fork of Fork of smiley face modules

100%

Fork of Fork of smiley face modules

✓ Published1🌍 Public

Last edited May 19, 2022

Created on May 19, 2022

This example renders a modular smiley face using React components and D3’s arc generator. The face is assembled from reusable parts—background circle, eyes, and mouth—drawn as SVG elements within a container. D3’s `arc()` function creates the mouth’s path with specified inner and outer radii and angle ranges. The face’s dimensions, eye offsets, and mouth radius are passed as props, demonstrating a component-based approach to data-driven SVG visualization.

AI-generated description

A bare minimum HTML page.

my smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Let's Make a Face Part I

This example shows a smiley face constructed from modular React components, with a yellow circular background, two black eyes, and an arc-shaped mouth. The face is built using SVG elements within a `<g>` transform, positioned by center coordinates. The mouth is generated using the `d3.arc()` API to create a path with specified inner and outer radii and angles. React's component structure passes props for dimensions and styling, while D3 v7 provides the arc generation for the curved mouth.

Mmarouan-ben

92% match

Loading thumbnail…

Fork of D3 and React Smiley

This example demonstrates a modular React component approach to rendering a smiley face using SVG. The `Face` component composes separate `BackgroundCircle`, `Eyes`, and `Mouth` sub-components, with the mouth drawn using D3’s `arc` generator with specified inner and outer radii and start/end angles. The face is positioned within an SVG container via a `<g>` transform, and all visual properties—such as eye offset, radius, and stroke width—are passed as props from the top-level `App` component. React renders the SVG declaratively, while D3 handles the geometric path calculation.

GGordon Yang

92% match

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a modular, reusable smiley face built as a React component hierarchy, composed of separate circle and arc elements for the background, eyes, and mouth. It demonstrates how to combine React’s declarative component model with D3’s `arc` generator to produce SVG shapes. The `Face` component assembles the `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, with all geometry controlled via props such as `eyeOffsetX`, `eyeRadius`, and `mouthRadius`. The resulting SVG is rendered to the DOM using `ReactDOM.render` with fixed pixel dimensions.

KKonstantinos Kotsiaridis

92% match

Loading thumbnail…

Fork of Hello HTML

A modular smiley face assembled from reusable React components, rendered as SVG with D3’s arc generator for the mouth. The face, eyes, and mouth are positioned via a translated group, with a yellow background circle, black stroke, and static dimensions. React 17 manages the component hierarchy, while D3 v7 calculates the mouth’s curved path. The visualization demonstrates component composition and SVG rendering without interactivity.

Ssaivinay143

92% match

Loading thumbnail…

Fork of Fork of Smiley Face Part III

This example shows a classic smiling face constructed with SVG primitives, rendered through React components that use D3’s `arc` function to generate the mouth path. The face consists of a yellow circle with a black stroke, two black eye circles positioned via Cartesian coordinates, and a curved mouth created by the arc generator. The layout uses fixed pixel dimensions (960×500) and centers all elements relative to the middle of the drawing area. React 16.9 manages the component structure, while D3 v5 provides the arc calculation, with no external data source beyond the hardcoded geometry.

Ssrzadran

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

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 Fork of Smily Face Part III

This example renders a classic smiley face using React and D3’s `arc` API to draw the mouth as a path. The SVG shows a yellow circle with black strokes for the face outline, two filled eye circles, and a semicircular mouth created from an arc with inner and outer radii. The fixed dimensions and centered transform position the elements on a 960×500 canvas, with no interactivity or data binding. The code imports `arc` from D3 v5 and uses React components to structure the SVG hierarchy.

TTim Martinez

92% match