._.

100%

✓ Published0🌍 Public

Last edited Jun 18, 2022

Created on Jun 17, 2022

Forked from emoji-like face with mouth (D3)

This piece depicts a cheerful, cartoonish face formed from basic geometric shapes, with a large yellow circle for the head, small black eyes, a smiling arc for a mouth, and golden lines suggesting hair or eyebrows. Built using React and SVG, it leverages D3's `d3.arc` to generate the curved mouth and the eyelids, which are positioned using transform rotations and translations. The central design is achieved by grouping all elements and translating them to the canvas center, with CSS removing page margins for a clean presentation.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Hello HTML

This example displays a cheerful, cartoon-like face constructed entirely from SVG shapes, centered on a yellow circle. Built with React and D3 v7, the visualization demonstrates how D3’s `arc` API generates a curved mouth path within a declarative component structure. The face’s features, including its eyes and smile, are positioned via computed coordinates passed to reusable `Eyes` and `Mouth` components inside a container that translates the drawing to the canvas center.

GGabriel

87% match

Loading thumbnail…

D3

A smiling face built from SVG shapes, rendered with React components and D3’s `arc` generator for the mouth and nose. The face is centered via a `g` transform, with a yellow background circle, two eye circles, and an outlined smile path. D3 v7 computes the arc paths, while React 17 manages the component hierarchy and SVG rendering. The code defines reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, each accepting size or offset props to control the face’s geometry.

SShasvathan Pathmanaban

87% match

Loading thumbnail…

Part 1 html only

A yellow circle with a black outline forms a smiling face, featuring two black eyes and a curved mouth drawn as an arc. The visualization uses React components to generate SVG elements, with D3's `arc()` generator computing the mouth path based on specified inner and outer radii and angle ranges. The face is centered on a 960 by 500 canvas, with all shapes positioned relative to that central point.

Jjackcaldwellnichols

86% match

Loading thumbnail…

Hello HTML

This example shows a cheerful, cartoon-like face composed of a yellow circle with a black outline, two black eyes, and a curved mouth. Built with React, it renders the face as an SVG using the `d3.arc` API to generate the mouth’s path. The `Face` component combines a `BackgroundCircle`, `Eyes`, and `Mouth` inside a translated group, with all geometry defined by parameters like `offsetX` and `mouthRadius`. The visualization is a minimal, static composition, demonstrating how React components can encapsulate and arrange D3-generated shapes.

CCatalina Vajiac

86% match

Loading thumbnail…

Face 3

A smiling face rendered as an SVG using React and D3, with a yellow circular background, two black eyes, and a curved mouth. The D3 arc generator defines the mouth's shape by setting inner and outer radii and start and end angles. React components structure the drawing, with a BackgroundCircle component and an Eyes component placed inside a translated group element, while D3 v6 provides the arc path calculation.

Eequiilibriumdigital

86% match

Loading thumbnail…

Hello HTML

A smiling face rendered as a yellow SVG circle with black stroke, two eyes, and an arc-shaped mouth, built with React components and D3's `arc` generator. The code defines the face's dimensions and positions using constants, then draws the mouth path via `mouthArc()` with specified inner and outer radii and start/end angles. The SVG output is created through React's `ReactDOM.render` into a root element, while D3 is loaded via a script tag alongside React production builds.

Ccoedolay

86% match

Loading thumbnail…

Face with D3.js!

A smiling cartoon face rendered as a yellow SVG circle with black eyes, rectangular eyebrows, and an open mouth. The face is built using D3.js v5 selection and arc APIs within a React framework, composing primitive shapes positioned absolutely within a 960×500 viewport. The mouth uses `d3.arc()` with specified inner and outer radii and angle ranges.

Nnayabmishal

86% match

Loading thumbnail…

Smiling face

A smiling face rendered as a yellow SVG circle with two black eyes and a curved mouth, centered on a 960 by 500 canvas. Built with React and D3 v7, it uses D3's `arc` generator to create the mouth path, while the face and eyes are simple SVG `circle` elements positioned with hardcoded offsets relative to the center. The black stroke on the outer circle and the fill colors are set directly in the SVG markup.

Mmoataznasr36

85% match