Skip to main content
SimilarExport ZIP
100%

Smiley Face

✓ Published0🌍 Public
Rrachelhahn
Last edited Sep 1, 2019
Created on Aug 26, 2019
Forked from HTML Starter

A yellow smiley face with pink blush circles and blue eyes rendered in SVG. The face is composed of layered React components, each drawing distinct elements: a yellow background circle, two pink blush circles, dodgerblue eyes with pupils and white catchlights, and a black mouth created using D3's `arc` function to generate a semicircular path. The face is centered within the SVG canvas based on the provided width and height, with all positional attributes passed as props for flexible customization.

AI-generated description

My new smiley face with blush and colored eyes with catchlights! With React and D3 (UPDATED) using ES6 modules and React components.

MIT Licensed

Similar vizzes

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

Smiley

A yellow smiley face is rendered as an SVG using React and D3. The face consists of a yellow circle with a black stroke, two black eye circles, and a mouth drawn as an arc path using the `d3.arc` API with specified inner and outer radii and angles. React manages the SVG elements, while D3’s `arc()` generator computes the mouth’s path data. The layout uses fixed pixel dimensions and positions centered on a 960 by 500 canvas.

JJosh Zalcman
93% match
Loading thumbnail…

Smiley Face Pt. I

A smiling face rendered in yellow SVG using React components. The face is composed of a background circle, two eyes, and a mouth, all positioned relative to the center of a 960 by 500 viewport. The mouth is drawn using the d3.arc generator with specified inner and outer radii and angular range. This example demonstrates the composition of reusable React components for scalable vector graphics.

TTanmay Bishnoi
93% match
Loading thumbnail…

Smiley Face

A smiling face rendered in SVG using React and D3. The face consists of a yellow circle with a black stroke, two eyes, and a mouth created with the `d3.arc()` path generator. The composition is centered using an SVG `<g>` transform, with hard-coded dimensions for the head, eye offsets, and stroke width. React manages the component structure, while D3 v7 generates the mouth path geometry.

GGeorge Williams
93% match
Loading thumbnail…

Smiley Face

A yellow smiling face is rendered as an SVG graphic, composed of a circular head, two eyes, and a curved mouth alongside a small nose. The drawing is generated using React, with the D3.js arc generator creating the mouth and nose paths. The component positions each shape relative to a central coordinate system, using integer values for offsets and radii to define the features. The final output is a static, centered illustration on a full-window canvas.

DDeegutla123
93% match
Loading thumbnail…

Smiley face custom

This example renders a classic yellow smiley face with custom details, including pink blurred blush ellipses and white eye highlights. Using React components and SVG, it centers a yellow circle with a black stroke, two black eyes, and a mouth drawn as an arc. The code leverages D3’s `arc` generator to create the mouth path, while SVG filters like `feGaussianBlur` apply the blush effect. All shapes are positioned via static coordinates within a responsive SVG canvas, with no interactive or data-driven behavior.

HHollyClarke19
93% match
Loading thumbnail…

Smiley Face I

A yellow smiley face rendered with SVG sits centered in the viewport, built from a filled circle for the head, two smaller circles for eyes, and a curved path for the mouth. The code uses React for the component structure and D3’s `arc` generator to create the mouth shape with specified inner and outer radii and angular extents. All elements are positioned relative to a central transform, with fixed pixel dimensions for the head, eye offsets, and stroke width. The rendering occurs entirely in SVG, with no external data source.

BBlake Bentley
93% 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
92% match