Smily Fork

100%

✓ Published0🌍 Public

Last edited Nov 13, 2021

Created on Nov 13, 2021

This example shows a smiling face built from basic SVG shapes, with a gradient-filled head, two eyes, a lower mouth arc, a nose ellipse, and slanted eyebrows. The visualization demonstrates how to compose a familiar icon using D3’s `arc` generator for the mouth path, React for component rendering, and SVG elements like `circle`, `path`, `line`, and `ellipse` for the remaining features. The code defines gradients and uses D3 v7 within a React 17 application, rendering the final graphic to the DOM via `ReactDOM.render`.

AI-generated description

Half way towards smily face

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face

This example shows a stylized smiley face rendered as an SVG graphic. The face is composed of a red circle for the head, two smaller circles for eyes, and a curved mouth path generated with D3’s `arc` function using specified inner and outer radii and angular ranges. The visualization is built with React components, with D3 v5 providing the arc generator, while React manages the SVG element structure and props. The code uses fixed numeric constants for positioning, radii, and stroke widths, resulting in a static, declarative scene.

Aarcothanmukha

92% match

Loading thumbnail…

Fork of Smiley face part 1

This example shows a smiley face constructed with SVG shapes in a React application, rendered through D3’s `arc` generator for the mouth and basic circle elements for the face, eyes, and highlights. The face is centered using a group transform, with yellow fill and black stroke for the head, while the eyes include small white pupils for detail. The code relies on React for component rendering, D3 v6’s `arc` API to compute the mouth path, and SVG elements for all visual output. The composition uses fixed dimensions and offsets to position features symmetrically.

SSilvaYH

92% match

Loading thumbnail…

Fork of Smiley Face (React and d3)

This example shows a stylized smiley face built with React and D3, rendered as SVG. The face is composed of separate React components for the background circle, eyes, and mouth, all positioned within a centered group. D3's `arc` function generates the mouth path, while the eyes use hardcoded circle coordinates. The code uses React 16 and D3 v6, with styling applied through a simple CSS file.

DDouglas J Dougan

91% match

Loading thumbnail…

Fork of Fork of Smiley Face Part I

This example shows a stylized smiley face built from basic SVG shapes: a black circle with an orange stroke for the head, two orange eyes, and an orange mouth. The visualization is rendered entirely with SVG and React, using D3’s `arc` generator to create the mouth path with a specified inner radius, outer radius, and angular start and end points. All shapes are positioned relative to a central transform, with explicit offsets for the eyes and mouth. The code relies on React 17 for component rendering and D3 v7 for arc calculation.

BBaji-2000

91% match

Loading thumbnail…

Fork of Smiley Face

This example shows a simple smiley face constructed from SVG shapes: a yellow circle for the head, two black circles for eyes, and an arc for the mouth, all centered on a 960x500 canvas. The visualization is built with React and D3 v6, using the `arc` generator from `d3-shape` to create the mouth path. SVG circles are positioned with explicit coordinates and transforms, while the mouth arc is defined by inner and outer radii with start and end angles. The code renders directly to SVG elements within a React component.

EElvan Gaunder

91% match

Loading thumbnail…

Fork of smile

This example shows a simple, static smiley face built with React and rendered as SVG, with added decorative shapes like ears, a hat-like rectangle, and extra colored elements. The code uses React’s `ReactDOM.render` to mount the SVG, while D3’s `arc` generates the curved mouth path. The face is centered with explicit `cx`, `cy`, and radius values, and each feature—eyes, mouth, teeth, and additional shapes—is positioned using inline transforms and coordinates. No data is loaded; instead, the visualization relies entirely on hardcoded geometry and D3’s arc helper for the smile.

SSai Hemanth Babu Sunkari

90% match

Loading thumbnail…

Fork of Smiley Face Part III

A smiling face is rendered as an SVG graphic in a React component, using D3's `arc` generator to create the mouth shape. The face consists of an orange circle for the head, two black circles for eyes, and a curved black path for the mouth, all positioned relative to the center of a 960 by 500 pixel viewport. The code imports `arc` from the `d3` module and uses React's `ReactDOM.render` to mount the component. The visualization demonstrates a simple composition of primitive shapes with D3 path generation.

VVishal Grover

90% match

Loading thumbnail…

Fork of Smiley Face Part III

This example demonstrates a smiley face rendered as an SVG graphic using React for component structure and D3’s `arc` function to create the mouth path. The face consists of a yellow circle with a black stroke, two eye circles, and a curved mouth, all positioned relative to the center. The code uses React 16.9 and D3 v5, with the SVG elements transformed into place via a `g` element. It shows how D3 geometric helpers can be combined with React’s declarative JSX syntax to build static visualizations.

Rrafffso

90% match