Skip to main content
SimilarExport ZIP
100%

Smiley Face

✓ Published0🌍 Public
Nnugroho
Last edited Apr 5, 2021
Created on Apr 3, 2021
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
96% match
Loading thumbnail…

Smiley Face

This example renders a classic smiley face as an SVG graphic using React and D3. The code constructs a yellow circle for the face, two smaller circles for the eyes, and leverages the D3 arc generator to define a mouth shape. The visualization is built with the ReactDOM library, while D3’s `arc()` API specifies the mouth’s geometry via inner and outer radii and start/end angles. The face is centered within a fixed viewport, with all dimensions and offsets declared as constants.

TTarek719
95% match
Loading thumbnail…

Smiley Face

This example draws a classic smiley face using React and D3’s `arc` generator to create the mouth path. The SVG renders a yellow circle with black stroke, two eye pairs (black outer and white inner circles), and a red nose positioned at the center. All shapes are placed inside a `<g>` transform for offset, with coordinates computed from fixed dimensions. The code uses React components for the background circle and ReactDOM to mount the app to a `#root` element.

UUygur Yiğit
95% 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
95% match
Loading thumbnail…

Smiley Face

A yellow smiley face is rendered in an SVG using React components. The face consists of a yellow background circle with a black stroke, two black eyes positioned symmetrically, and a mouth drawn as an arc. The mouth uses `d3.arc()` with specified inner and outer radii and start/end angles to create a smile shape. Coordinates for the eyes and dimensions for the mouth are defined as constants, and the entire face is centered within the SVG viewport.

MMarcos
95% match
Loading thumbnail…

Smiley Face

This example renders a classic yellow smiley face as a static SVG graphic using React and D3. The face is constructed from two circular eyes, an elliptical mouth, and a decorative eyelash path, all positioned around the canvas center. The code leverages React's declarative JSX syntax to define shapes, while D3's `arc` helper generates the mouth's curved path data. The SVG output is created with precise dimensions and stroke properties, resulting in a clean, scalable vector illustration.

ZzkArmor
95% match
Loading thumbnail…

Smiley Face.1

This example renders a stylized smiley face as a static SVG graphic within a React component. The face is composed of a yellow circle with a black stroke, two small circles for eyes, and an arc-shaped mouth created using the `d3.arc` API. The coordinates for the face elements are computed relative to the center of the 960×500 canvas, and the mouth path is generated with start and end angles. The code imports React, ReactDOM, and the `arc` function from d3.v7, and renders the final SVG into the page’s root element.

FFrancisco Nicolas Berthet Cosentino
95% match
Loading thumbnail…

Smiley Face

A yellow Smiley Face is rendered as an SVG using React. The face consists of a large yellow circle with a black stroke, two black eyes, and a mouth drawn as an arc. The visualization uses React components to structure the SVG elements and the D3 `arc` function to generate the mouth's path. The code defines reusable components and calculates the face's geometry from fixed constants for the center, radius, and offsets.

Ttuckclub
95% match