Fork of Smiley Face Part I

100%

Fork of Smiley Face Part I

✓ Published1🌍 Public

Last edited Aug 25, 2021

Created on Aug 25, 2021

A stylized smiley face rendered as SVG, where a yellow circle serves as the head with two black eyes and an arc-shaped mouth. The mouth uses `d3.arc()` with inner and outer radii to create a thick, rounded stroke, positioned via the `path` element. The head and eyes are drawn with `circle` elements, all centered using a React transform group. The code imports React, ReactDOM, and the `arc` function from d3 v5, and renders the composition as a reusable React component.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face Part 1

A yellow smiley face rendered as SVG, with a circular head, two black eyes, and an arc-shaped mouth. The face is built from D3 v7 shape primitives, including `d3.arc` to generate the mouth path, while circles position the head and eyes relative to a central group translated to the middle of a 960×500 viewport. React manages the component structure, and the styling uses explicit stroke widths and fill colors. The mouth arc spans from 90 to 270 degrees with defined inner and outer radii.

PPaul DeVos

96% match

Loading thumbnail…

Fork of Smiley Part 3

A stylized smiley face rendered in SVG uses React components and D3’s `arc` generator for the mouth. The face comprises a yellow background circle, two black eyes positioned symmetrically, and a D3-generated mouth path with a fixed opening. D3 v7 provides the arc geometry, while React manages the component structure and JSX elements, with all shapes centered via a transform.

KKimberly Hager

96% match

Loading thumbnail…

Fork of Smiley Face Part V

A smiling face is rendered as a yellow circle with black outline, two eyes, and an arc-shaped mouth, all centered within an SVG. The visualization is built with React components, where each facial feature is a separate file and uses ES6 modules and React Fragments. D3’s `arc` generator creates the mouth path, while styling and positioning come from inline SVG attributes. The code is a fork from a tutorial, with React handling the component structure and D3 providing the arc geometry.

Llit86hlp

96% match

Loading thumbnail…

Fork of Smiley Face Part I

A yellow smiley face rendered with SVG appears at the center of a 960×500 canvas, showing a circle for the head, two black eyes at fixed offsets, and a semi-circular mouth drawn as an arc. The example uses React 18 to manage the component structure while leveraging D3 v7’s `arc` generator to create the mouth path with inner and outer radii. All shapes are positioned via a translated `<g>` group, with stroke styling applied directly to SVG circle elements.

Nnj889

96% match

Loading thumbnail…

Fork of Smiley Face Part I

This example shows a stylized smiley face rendered as an SVG graphic. A yellow circle forms the background, with two black eyes positioned symmetrically and a curved mouth drawn using an arc path. The visualization is built with React components, where each facial feature is a separate component (BackgroundCircle, Eyes, Mouth). D3’s `arc` API generates the mouth’s path, while React renders the SVG elements within a transformed coordinate system centered on the canvas.

JJosipa Puljko

96% match

Loading thumbnail…

Fork of Smiley Face Part III

A yellow smiley face rendered as an SVG, built with React and D3 v5. The face uses a yellow circle with a black stroke for the head, two black eye circles, and a mouth drawn as a thick arc using D3's `arc()` generator with specified inner and outer radii and start/end angles. All elements are positioned within a `<g>` transform, with dimensions and offsets defined as constants. React 16.9 renders the SVG components, while D3 provides the arc path generation for the mouth.

Hhimchan94

96% match

Loading thumbnail…

Fork of Smiley Face Part I

A yellow circle with a black stroke forms the face, featuring two black eyes with small white highlights and a thick, incomplete mouth arc. The code uses React to render an SVG, with the d3.arc() generator creating the mouth path from a specified start and end angle. The circle’s radius is set relative to the height, while eye offsets and radii are fixed values that position the facial features symmetrically around the center.

DDan Waters

96% match

Loading thumbnail…

Fork of Smiley Face Part III

A smiley face rendered as a single SVG graphic, composed of a yellow circle for the head, two black eyes, and an arc-shaped mouth. The visualization is built with React and D3 v5, using the `arc` API to generate the mouth's path. All elements are positioned relative to a central transform, with fixed offsets for the eyes and mouth radius, and the head is drawn with an explicit `stroke` and `stroke-width`. The code demonstrates declarative SVG construction within a React component.

CCHANDU BHARGAVI

96% match