Skip to main content
SimilarExport ZIP
100%

Smiley Face

✓ Published1🌍 Public
Wwisam-ahmed
Last edited Jul 3, 2023
Created on Jul 3, 2023

This example draws a simple smiley face entirely with SVG shapes: a yellow circle for the head, two black circles for the eyes, and an arc for the mouth. The layout is computed from the SVG’s width and height attributes, with fixed constants for eye spacing and altitude. It uses D3 v7’s `select` and `arc` helpers, applying `attr` to position each element and `path` with an arc generator to define the mouth’s curved geometry.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face with D3.js

This example draws a yellow smiley face in an SVG element using D3.js v5. The face consists of a large circle for the head, two smaller circles for eyes, and a mouth created with the d3.arc generator. The code imports `select` and `arc` from the D3 module to manipulate the SVG and construct the curved mouth path. Elements are positioned relative to the center of the SVG using translation transforms, with fixed pixel offsets for eye spacing and mouth placement.

SSyedHamasAli
92% match
Loading thumbnail…

Smiley

This example renders a smiley face in SVG using D3.v5. Two black circles form the eyes, and a yellow circle with a black stroke is the face. The mouth is drawn with a D3 `arc` generator, creating a partial ring path. The code relies on D3's `select` and `arc` functions, and the SVG dimensions come from the `width` and `height` attributes. All shapes are appended directly to the SVG canvas.

KKrishu
92% match
Loading thumbnail…

Smiley

This example renders a smiley face in SVG using D3.v5. Two black circles form the eyes, and a yellow circle with a black stroke is the face. The mouth is drawn with a D3 `arc` generator, creating a partial ring path. The code relies on D3's `select` and `arc` functions, and the SVG dimensions come from the `width` and `height` attributes. All shapes are appended directly to the SVG canvas.

KKrishu
92% match
Loading thumbnail…

SVG Smiley Face

A smiling face is drawn with SVG primitives, centered on a yellow circle with black outlines, including eyes, eyebrows, and a mouth. The example demonstrates basic D3 v5 shape generation and selection, using `d3.select` to manipulate SVG elements and `d3.arc` to create the mouth path. All elements are positioned relative to a central group, with geometric constants for spacing and offsets. The static visualization is built entirely in code, with no external data source.

Bbprokopowicz
92% match
Loading thumbnail…

Smiley face with D3

This example shows a classic smiley face drawn as a yellow circle with black eyes and a curved mouth on a transparent SVG canvas. The code uses D3 v5’s `select`, `append`, and `attr` methods to create SVG circles for the face and eyes, while the smile is rendered as a path generated by the `arc` generator with specified inner and outer radii and start/end angles. The face is centered within a 960×500 SVG element, and eye spacing and offset are controlled by numeric variables. No external data is loaded; all shapes are procedurally generated.

LLevi
92% match
Loading thumbnail…

Smiley face

This visualization displays a simple yellow smiley face rendered as SVG, composed of a circular face, two black eyes, and an arc-shaped mouth. The code uses D3 v5’s `select` and `arc` APIs to construct the path for the mouth, while positioning all elements relative to the SVG’s width and height. The face is drawn with a circle, and the eyes are offset from the center using explicit pixel coordinates. The `arc` generator defines the mouth’s inner and outer radii with start and end angles, producing a fixed smile shape.

Ssrwezuva
92% match
Loading thumbnail…

smiley face with D3.js

This example draws a smiley face entirely with SVG shapes using D3.js v7. It creates a yellow circle for the head, two black circles for the eyes, and a mouth generated with the `d3.arc` shape generator. The arc uses `innerRadius`, `outerRadius`, and angular start/end values to form a crescent-like smile. All shapes are positioned relative to the SVG's width and height attributes, with the mouth translated to the center of the canvas.

GGreatGayatri
92% match
Loading thumbnail…

Smiley Face

This example renders a stylized smiley face as an SVG graphic using D3.js. The face is composed of a yellow circle with eyes, spectacles, a mouth, and a red tongue. The code uses d3-selection to append SVG elements and d3-shape’s `arc()` generator to create the round spectacle frames, the mouth arc, and the tongue shape. Rectangles, rotated via SVG transforms, form the right eye and the bridge of the glasses.

Ss-pranathi
92% match