Skip to main content
SimilarExport ZIP
100%

Smiley

✓ Published0🌍 Public
Nnikitamakkena
Last edited Feb 21, 2022
Created on Feb 21, 2022

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.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

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

Smiley SVG

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.

Aaramaki-san
90% match
Loading thumbnail…

Smiley

A smiling face is rendered as a static SVG figure, with a purple circular head, two eyes, and a curved mouth drawn using a D3 arc path. The eyebrows, created as rectangles, animate up and down in a repeating sequence via chained `transition.attr` calls. The visualization uses D3 v5's `select`, `arc`, and SVG element creation, with all coordinates computed relative to the viewport’s center.

VVigyoRex
90% 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
89% match