Skip to main content
SimilarExport ZIP
100%

Smiley SVG

✓ Published0🌍 Public
Aaramaki-san
Last edited Dec 27, 2021
Created on Dec 27, 2021
Forked from D3 Starter

This example displays a simple circular smiley face drawn with a single SVG path using cubic Bézier curves. The code references D3 version 7 through the `d3.min.js` distribution, though the drawing itself uses only raw SVG path data with `d` attribute and `transform` attributes. The shape is rendered as a dashed-border 100x100 pixel SVG element, with the face outline stroked in black. No JavaScript from the `bundle.js` file is visible in the provided HTML, so the visualization relies entirely on static SVG markup.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley

The visualization assembles a basic smiley face from three SVG circles and one arc path, showing how primitive shapes combine into a recognizable icon. The code uses D3 v7 to select the SVG container and create a mouth via `d3.arc()`, with specified inner and outer radii and start/end angles. The eyes and face outline are plain SVG elements with fixed coordinates, pink fill, and black stroke. The example demonstrates minimal D3 integration, relying mostly on static markup for the face while reserving D3 for the path generation.

Nnikitamakkena
90% 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
88% match
Loading thumbnail…

Smiley Face

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.

Wwisam-ahmed
88% 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
87% 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
87% 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
87% match
Loading thumbnail…

Smiley

This visualization displays a simple smiley face constructed entirely with SVG shapes. A large yellow circle forms the face, with two smaller black circles for eyes and a black arc for the mouth, all positioned against a cyan background. The code uses d3.select to target the SVG element and appends circles and a path for the mouth. The path is created using the d3.arc function, which defines the inner and outer radii and the start and end angles of the arc.

Ssakthi1001
87% match
Loading thumbnail…

Smiley

This visualization displays a simple smiley face constructed entirely with SVG shapes. A large yellow circle forms the face, with two smaller black circles for eyes and a black arc for the mouth, all positioned against a cyan background. The code uses d3.select to target the SVG element and appends circles and a path for the mouth. The path is created using the d3.arc function, which defines the inner and outer radii and the start and end angles of the arc.

Ssakthi1001
87% match