My Own Smiley Face

100%

My Own Smiley Face

✓ Published0🌍 Public

Last edited Sep 24, 2020

Created on Sep 2, 2020

This example displays a yellow smiley face with rosy cheeks, eyebrows, and a wide smile, rendered as an SVG in a React component. It uses React 16.13.1 and D3 v6’s `arc` generator to create the mouth path, while circles define the face, eyes, pupils, and cheeks, with static coordinate offsets. The face is centered at (480, 250) on a 960×500 canvas, drawing all shapes within a single `<g>` transform. The code demonstrates a straightforward composition of React elements and D3’s arc API for a custom iconic graphic.

AI-generated description

My adjusted smiley face implementation with React & D3 forked from Professor Kelleher's profile. I've added eyebrows, stretched the smile a bit, and added rosy cheeks.

MIT Licensed

Similar vizzes

Loading thumbnail…

My Smiley Face

This example uses React with D3 to render a stylized smiley face as an SVG graphic. The visualization constructs the face from primitive shapes—a yellow circle for the head, two dark circles for eyes, red cheek circles, and a mouth drawn as an arc path created with D3's `arc` generator. All elements are positioned relative to the center of a 960×500 canvas using SVG transformations, with stroke widths and radii defined as constants. The code demonstrates how D3's arc path generator integrates with React's declarative SVG rendering to produce a simple, vector-based illustration.

MMarina Shemesh

94% match

Loading thumbnail…

Smiley Face

A yellow smiley face rendered with React and D3 occupies a fixed 960 by 500 SVG canvas. The code builds the face manually using SVG circles for the head and eyes, and a D3 arc generator (`arc()`) with a `path` element to create the mouth. The face is centered with a group transform, and React manages the component structure using JSX. The example demonstrates simple, declarative SVG composition within a React component, using D3 solely for generating the arc path data.

AArman Sheikh

93% match

Loading thumbnail…

Smiley Face Part I

A static smiley face rendered in SVG shows a yellow circle with black stroke, two eyes, and a mouth arc centered on a 960 by 500 canvas. This React component draws the face using D3’s `arc` generator with specified inner and outer radii and angles for the mouth, while circles are positioned via eye offsets and radius constants. Built with D3 v6 and React 17, the example hardcodes all geometry values rather than loading external data, demonstrating precise coordinate-based composition in a reusable component.

Eendomo

93% match

Loading thumbnail…

Smiley Face

This example uses the React framework to construct a smiley face as an SVG graphic. The visualization is built from three modular components: a yellow background circle, two eyes, and a mouth. The mouth is generated using the `d3.arc()` API to create a path with a specified inner and outer radius. The face is centered within an 960 by 500 pixel SVG canvas using a translation transform. The code demonstrates how React components and D3's path generation can be combined for simple, declarative graphics.

KKeeran Bezuidenhout

93% match

Loading thumbnail…

Smiley Face

This example renders a yellow smiley face as a React component using SVG. It draws a filled circle for the head, two smaller circles for the eyes, and a mouth created with the `arc` function from `d3`. The arcs are positioned by translating the coordinate system to the center of the 960×500 canvas. The code uses `ReactDOM.render` to mount the component and applies static stroke and fill colors without any interaction or animation.

Nnugroho

93% match

Loading thumbnail…

Smiley Face Part 1

This example displays a yellow smiley face centered on an SVG canvas, built entirely with React and D3 v6. The face consists of a circular head, two black eye circles, and a curved mouth created using the `arc` generator from the D3 shape module. The `arc` function constructs the mouth path with specified inner and outer radii and angular extents, while React renders the SVG elements declaratively. The code defines all dimensions as constants, including eye offsets, radius, and stroke width, layering the shapes within a translated group element.

SShaneBowen1

93% match

Loading thumbnail…

Smiley Face

This example renders a yellow smiley face with two eyes and a mouth using React and SVG. The face is centered within a 960×500 viewport, with the head drawn as a circle and the mouth constructed via a d3.arc() path using specified inner and outer radii and angular ranges. The code uses ReactDOM to mount the component and leverages D3 v6’s arc generator for the curved mouth shape. All elements are positioned using inline transform attributes.

JJohn Kobbeman

93% match

Loading thumbnail…

Smiley face

This example uses React and D3 v6 to render a smiley face as an SVG. The face is composed of a yellow circle for the head, two smaller circles for eyes, and a mouth drawn with a D3 arc path generator. The code positions the head and features relative to calculated center coordinates, with the arc’s inner and outer radii defining the mouth’s thickness and its angles creating the smile. All shapes are centered within a 960×500 viewport using a translated group element.

KKibegwa

93% match