SVG Smiley Face

100%

SVG Smiley Face

✓ Published4🌍 Public

Last edited Mar 25, 2020

Created on Mar 25, 2020

Forked from Untitled

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.

AI-generated description

D3 course follow along.

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Smily Face with svg

A smiling face is drawn using scalable vector graphics, showing how D3 v6 can create basic shapes and group elements. The code builds a yellow circle for the face and positions two smaller eye circles using a g element with a transform. It utilizes D3 selections to append and style SVG elements, calculates coordinates for centered placement, and applies attributes for fill and stroke. The example demonstrates D3’s SVG manipulation capabilities with a simple, static illustration.

AAr0manKhan

91% match

Loading thumbnail…

SVG and CSS

This example renders a smiley face as a static SVG graphic using D3 v6. It draws a yellow circle for the head, two black circles for the eyes, and a semicircular arc for the mouth via the `d3.arc()` helper. The dimensions come from the SVG’s width and height attributes, and a `<g>` element translates to the center for the mouth path. All shapes are positioned manually without data binding, and styling is handled through D3’s attribute chaining.

HHarshKothari

91% 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

91% 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

90% match

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

90% match

Loading thumbnail…

SVGs and CSS

This example shows a yellow smiley face constructed from basic SVG shapes, including a circular head, two eyes, and an arc-shaped mouth. It demonstrates the fundamental approach of using d3-selection from d3 v6 to append and style SVG elements with attributes. The code specifically uses `d3.select`, `.append`, and `.attr` to position shapes relative to the SVG's width and height, while the `arc` generator creates the mouth path. The rendering occurs in a React-free HTML page with CSS styling applied directly through SVG attributes like `fill` and `stroke`.

Qquiqdome

90% match

Loading thumbnail…

Smile Face

A yellow smile face is drawn in the center of an SVG canvas, with black eyes and a curved mouth formed by an arc. The face is centered using a group transformation and sized relative to the viewport dimensions. The visualization uses D3 v6, specifically the `select` and `arc` utilities, to append SVG circles and a path for the mouth, all rendered directly without external data.

JJustin Song

90% match