MAKE A SMILEY FACE

100%

MAKE A SMILEY FACE

✓ Published0🌍 Public

Last edited Jan 28, 2022

Created on Jan 25, 2022

This example displays a yellow smiley face with black-outlined circular eyes and a mouth, drawn as an SVG graphic. The face is centered on a 1000 by 600 pixel canvas, with the head and features positioned using computed coordinates rather than hard-coded values. The visualization uses React to render the SVG elements, while D3’s `arc` function defines the mouth as a full circular path. Eye size, offset, and stroke width are all specified as named constants, demonstrating a modular approach to constructing a static vector illustration.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Make a Smile Face

This example shows a yellow smiley face drawn using D3.js and React with SVG rendering, featuring two eyes and an arc-based mouth. The code uses `d3.select` and `d3.arc` to construct the facial features, positioning circles for the eyes and a path for the mouth on a 960×500 canvas. The face is centered via a translation transform, with all shapes styled using SVG attributes like `fill`, `stroke`, and `r`.

Ttenghaoman

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

92% match

Loading thumbnail…

Smiley Face

A yellow smiley face rendered as a scalable vector graphic (SVG) sits at the center of a 960×500 canvas. A bold black circle outlines the yellow face, with two black eyes and a thick smile drawn using an SVG path. The code uses React to structure the SVG elements and D3 v7's `arc` generator to compute the mouth's curved path based on inner and outer radii and start and end angles. The geometric coordinates for the face, eyes, and stroke are calculated dynamically from the canvas dimensions and fixed offsets.

Aalismath

92% match

Loading thumbnail…

SMiley FAce

A yellow smiley face is rendered on an SVG canvas, with a black outline and two black eyes. The face is constructed from separate React components for the head, eyes, and mouth, all centered within a single SVG element. The mouth is drawn using a `d3.arc` path to create a curved smile. The head's radius is derived from the canvas height, and the stroke width and eye positions are set as constants. The visualization is purely a static geometric composition, with no data input or interaction.

KKiran-tech007

92% match

Loading thumbnail…

Smiley_face_part1

A yellow smiley face rendered as SVG, with a circular head, two eyes, and a mouth, is centered on a 960 by 500 canvas. The code uses React to manage the component structure and D3's `arc` generator to create the mouth path. The face is drawn with hardcoded dimensions and coordinates, including a thick black stroke around the head, and the eyes are simple circles positioned relative to the center. The visualization demonstrates basic geometric composition using SVG primitives within a React and D3 context.

Ggagegreen00

92% match

Loading thumbnail…

Smily Face

A smiling face is drawn as a yellow circle with black eyes and an arc-shaped mouth, centered in an SVG canvas. The visualization uses React to render the graphic, with D3's `arc` function defining the mouth path based on specified inner and outer radii and angle ranges. The code sets fixed dimensions for the face, eyes, and mouth, and positions elements relative to the canvas center. The SVG elements are styled with fill and stroke attributes, demonstrating a simple composition using React and D3 APIs.

YYUXUE LIU

92% match

Loading thumbnail…

Smiley face part 1

A yellow SVG smiley face is drawn on a 960 by 500 canvas, centered within a black-outlined circle. The face includes two black eyes and a mouth arc, all rendered as SVG primitives. The code uses React for component structure and D3’s `arc` generator to create the mouth path. The face’s dimensions, such as eye offsets and radii, are explicitly defined as constants, with the outermost circle’s radius derived from the canvas height and stroke width.

11tang

92% match

Loading thumbnail…

Smile Face Part I.

A yellow smiley face is rendered as an SVG, centered on a 960×500 canvas with a thick black outline and two circular eyes. The mouth is drawn using a D3 `arc` path generator with specified inner and outer radii and angular start/end points. The visualization uses React components, with the background circle and mouth explicitly defined, while the eyes are simple SVG circles positioned relative to the center. Rendering is handled by ReactDOM, and the code imports the `arc` function from D3 v7.

Zzimmeradam

92% match