Skip to main content
SimilarExport ZIP
100%

make a smile face

✓ Published0🌍 Public
Ddaniel
Last edited Sep 17, 2023
Created on Sep 17, 2023

A yellow smiley face is drawn in the center of an SVG canvas using D3 v7. The face includes a circular head, two black eyes, and an arc-based mouth created with the `d3.arc` generator. Two rectangular eyebrows are added, and the right eyebrow animates by repeatedly transitioning its vertical position via `transition.attr` over two-second durations, causing a winking effect while the rest of the face remains static.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a smily face

A yellow smiley face is drawn on an SVG canvas with two eyes, a smile, and animated eyebrows. The face is centered using a D3 selection with the `translate` transform, and the mouth is created with the `d3.arc` path generator. The eyebrows use `transition().duration()` to move up and down over two seconds each, demonstrating chained D3 transitions. The code relies on `d3.select`, `d3.arc`, and SVG elements like `circle` and `rect`, all rendered with d3.v5.

Kketuckychix
94% match
Loading thumbnail…

Smiley face

A yellow smiley face with black eyes, eyebrows, and an arc-shaped mouth is drawn in the center of an SVG canvas using D3.js v6. The face is constructed with D3 selections and shape generators, including `d3.arc` for the mouth and appended SVG `circle` and `rect` elements. A brief animation occurs when the eyes transition their fill color to black after a one-second delay. The graphic is rendered as static SVG with a simple transition effect.

AArun
93% match
Loading thumbnail…

Make a face with D3.js

A yellow smiley face is centered in an SVG canvas, with two eyes and a curved mouth built from basic SVG shapes. D3.js v7 selections and the `arc` generator draw the mouth path, while `circle` elements create the head and eyes. The body is rendered entirely in SVG, with the face assembled from primitives positioned relative to the canvas center.

AAustin0524
92% match
Loading thumbnail…

smile face

A yellow smiley face is drawn in SVG, with black eyes, eyebrows, and a semi-circular mouth. The eyebrows animate by shifting their vertical position using chained D3 transitions. The face is constructed with D3 selections, using `circle` and `rect` elements for the features, and a `path` created with the `d3.arc` generator for the mouth. The entire group is centered and scaled, with the animation triggered on page load.

YY-oringe
92% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with black outlines is drawn on an SVG canvas, centered in the viewport. Its eyes, eyebrows, and mouth are all composed of basic geometric shapes. Using D3.js v5, the code builds the face by appending circles, paths, and rectangles to SVG groups. An animation sequence uses chained `.transition()` calls to shift the eyebrows up and down, with each movement lasting two seconds. The mouth is created using the `arc()` API, while the overall structure demonstrates fundamental SVG DOM manipulation via D3 selection and attribute methods.

AAndrey Chergik
92% match
Loading thumbnail…

face

A yellow smiley face is centered in an SVG canvas, with two eyes, a mouth drawn using a D3 arc path, and rectangular eyebrows that animate upward and back down in a looping transition. Built with D3 v5, the example demonstrates fundamental DOM manipulation by selecting the SVG element, appending groups and shapes, and using chained `transition().duration()` calls to move the eyebrows via transform attributes.

EEbenizerR
92% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas with D3.js, featuring eyes, eyebrows, and a mouth. The eyebrows transition up and down repeatedly over two-second intervals using D3's `transition()` and `attr()` methods. The face is built from basic SVG shapes—circles for the eyes and a path generated with `d3.arc()` for the mouth. All elements are positioned dynamically based on the SVG's width and height attributes.

MMathias Brem
92% match
Loading thumbnail…

Lets make a face

A yellow smiley face is drawn on an SVG canvas using D3.js selection and arc methods. The face includes circles for eyes and a path for the mouth, while rectangular eyebrows animate vertically through chained transition calls over two-second intervals. This example demonstrates fundamental DOM manipulation by building shapes from appended SVG elements and updating their attributes with D3 transitions.

BBreu1995
91% match