+ — VizHub

100%

+

✓ Published1🌍 Public

Last edited Jun 2, 2021

Created on Jun 2, 2021

A smiling face is drawn as a static SVG, then its mouth widens and narrows in an animated loop using D3. The static portion uses basic SVG shapes—a yellow circle with a black stroke for the head and two smaller black circles for the eyes. The animated mouth is generated with D3's `arc` geometry, and its start and end angles are modified over time inside a `d3.timer` callback. The mouth shape is redrawn as a path using the updated arc each frame.

AI-generated description

First face using D3.

MIT Licensed

Similar vizzes

Loading thumbnail…

svg smile

A cheerful cartoon face appears as a yellow circle with black outline, two black eyes, and white pupils that shift side to side before settling. The mouth is drawn as an arc path using the d3 `arc()` helper with specified inner and outer radii. Built with d3 v5, the visualization renders entirely in SVG and uses chained `transition().duration()` calls to animate the pupils horizontally across each eye. The code selects elements with d3’s `select`, appends shapes with `attr`, and relies on the `arc` generator to create the curved smile.

Ssivakaman

86% match

Loading thumbnail…

Face 2

A simple SVG face with two black eyes and a yellow circular head appears on a red-bordered canvas. Using D3.js v6, the code draws an arc below the face to represent a mouth, whose curvature continuously widens and narrows via `d3.timer`. The arc’s start and end angles are recalculated each frame based on elapsed time, and the path’s `d` attribute is updated through the `d3.arc` generator. Static elements are defined directly in HTML, while the animated mouth is appended programmatically.

SS767

86% match

Loading thumbnail…

svg smile

A smiling face rendered in SVG shows two black eyes with white highlights that dart side to side, while a static arc forms the mouth. The animation uses chained `transition` calls on the eye highlight circles to shift their `cx` attributes over 1600 and 1400 milliseconds. Built with D3 v5, the code appends circles and a path using `d3.select`, `arc`, and shape helpers, with no external data source.

Ssivakaman

86% match

Loading thumbnail…

svg smile

Ssivakaman

86% match

Loading thumbnail…

Creating a Smiley face with D3

A yellow smiley face rendered in SVG shows a mouth moving up and down while the entire face scales in size. D3 v7’s selection, `arc`, and `transition` APIs are used to construct the circle, eyes, and curved path for the mouth, with `setInterval` triggering repeated two-second transitions. Static SVG attributes position the face, while the mouth’s transform and the circle’s scale animate independently.

AAndy Chang

86% match

Loading thumbnail…

Smile face

A smiling face is drawn from SVG primitives: a yellow circle for the head, two black circles for the eyes, two rectangles for eyebrows, and an arc path for the mouth. The example demonstrates animated transitions, with the eyebrows moving up and then back down over two seconds using chained `.transition().duration()` calls. The scene is centered within a 960×500 SVG canvas using a `g` element translated to the midpoint. The code imports `select` and `arc` from D3 v5, and constructs the mouth’s arc path with the `arc()` generator, specifying inner and outer radii and angular spans.

SSungmi

86% match

Loading thumbnail…

Lets make a face

A simple yellow smiley face is drawn in an SVG, composed of a large circle, two eyes, and a curved mouth. The face’s eyebrows animate upward and then back down in a repeating sequence using D3 v6 transitions. The visualization is built with D3 selections and the `arc` generator for the mouth, while all geometric properties are defined as constants in the code.

Kkhuton

85% match

Loading thumbnail…

Face with D3.js

A smiling face is drawn as a yellow SVG circle with white outlines, featuring two black eyes that animate by moving down and up via chained `transition().duration()` calls. Built with D3.js v5, the example demonstrates basic SVG shape creation using `d3.select` and attribute assignment for circles, with a commented-out arc-based mouth showing an alternative path approach. The eyes use transform translations over three-second intervals, creating a simple blinking effect without external data.

Aarontha

85% match