Fork of Smiley face part 1

100%

Fork of Smiley face part 1

✓ Published0🌍 Public

Last edited Mar 31, 2021

Created on Mar 31, 2021

A static smiley face drawn with React and D3, rendered as SVG. The face consists of two offset eye circles and a mouth arc built with the `d3.arc` generator, centered within a larger yellow circle with a black stroke. The mouth’s start and end angles define a downward curve, while the eyes use fixed offsets from the center. The background is set to red via D3 selection in the HTML, though the core visual is generated entirely by React components.

AI-generated description

Half way towards a smiley face. Smiley mark down (MD).

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face Part I

A smiley face rendered in SVG shows a black circle head with two white eyes and a white mouth arc, drawn with React and D3. The code uses D3’s `arc()` function to generate the mouth path, with explicit angles defining a half-circle shape, while the eyes are simple circles positioned via SVG coordinates. The visualization is purely static, demonstrating basic geometric composition and D3 shape generation within a React component. The rendering uses hardcoded dimensions and offsets, with no data loading or interactivity.

YYbg99

95% match

Loading thumbnail…

Fork of Smiley Face Part 1

A smiley face built entirely from basic SVG shapes, including a yellow face circle, two eyes with white pupils, and an open mouth rendered as a thick arc. The code also adds small curved eyebrows above each eye using d3.arc() with custom start and end angles. The visualization is generated in React, with SVG elements constructed manually and positioned relative to a central transform. D3 v7 provides the arc generator, while React 16.7 handles component rendering into the DOM, creating a static composition without interaction or animation.

LLainu Kuruvilla

95% match

Loading thumbnail…

Fork of Smiley Face Part 1

A yellow smiley face is rendered with React and SVG, featuring a black-outlined circle, two eyes, a blue line for the nose, and a mouth drawn as an arc. The face organizes its parts using the `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` components, with coordinates transformed via an SVG `<g>` group. The D3.js library contributes the nose's line path and the mouth's `arc()` geometry, while the container is sized by the `FaceContainer`. The example appears to be a static composition, as no interactive mouse handling is active in the final render.

Aadante111

95% match

Loading thumbnail…

Fork of Smiley Face Part III - With D3

A static smiley face is drawn using SVG shapes, showing a yellow circle for the face, two smaller circles for the eyes, and a semi-circular path for the mouth. The visualization is constructed with React, which renders the entire graphic declaratively, and leverages D3’s `arc` API to generate the mouth’s path data. The face is centered with a black stroke, and all elements are positioned relative to the center using a transform. The code sets fixed dimensions and variables for offsets and radii, yet no interactive behavior or data source is present.

Ddev-ignacio-h

95% match

Loading thumbnail…

Fork of Smiley Face Part 1

This is a React-based SVG visualization that draws a smiley face using D3.js and ReactDOM. The face consists of a yellow circle with a black stroke, two eyes, and a mouth arc created using the D3 arc generator with specified inner and outer radii and angle ranges. The SVG elements are positioned using the centerX and centerY coordinates, with eye offset values and a mouth radius defined as constants. The example demonstrates how D3's arc API can be integrated with React for geometric shape rendering.

Bbhavani44

95% match

Loading thumbnail…

Fork of Smiley face Part 1

A yellow smiley face drawn with SVG circles and an arc for the mouth, centered on a 960×500 canvas. The React components compose the face from a background circle, two eyes, and a mouth, with all positions and sizes passed as props. D3’s `arc` generator creates the mouth path using an inner and outer radius with fixed start and end angles. The `FaceContainer` wraps the elements in a translated SVG group, and the example is rendered with React 18 and D3 v7.

Ppuru001

95% match

Loading thumbnail…

Fork of Smiley Face Part I

This example displays a partially drawn smiley face on a yellow circle, featuring two black eyes and an open mouth arc. The face is rendered as an SVG using React, with the mouth path generated by D3's `arc()` generator, which defines inner and outer radii along with start and end angles. The circle and eye elements are positioned using absolute coordinates relative to the center. The visualization relies on D3 v7 and React 17, rendering everything client-side into a 960 by 500 pixel canvas.

Sskambhore04

95% match

Loading thumbnail…

Fork of Smiley Face Part I

A smiley face rendered in SVG using React components for the background circle, eyes, and mouth. The code imports the D3 arc function to generate the mouth path, and uses React functional components with props for positioning. The visualization is centered within a 960x500 SVG canvas, with the face grouped and translated to the middle. The mouth is drawn as an arc spanning from 90 to 270 degrees, while the background circle has a yellow fill and black stroke.

Lleymandudu

95% match