Skip to main content
SimilarExport ZIP
100%

svg smile

✓ Published1🌍 Public
Ssivakaman
Last edited Jul 6, 2020
Created on Jul 6, 2020
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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
100% match
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
93% match
Loading thumbnail…

svg smile

A yellow SVG smiley face with black eyes and white pupils sits centered on a dark background. The pupils animate horizontally via chained `transition.attr` calls, shifting right then left. A lower arc path, drawn using the `d3.arc` generator, forms the smile. The example uses `d3.select` and `d3.arc` from D3 v5, with hardcoded positions and radii, and transitions lasting 1200 and 1400 milliseconds.

Ssivakaman
92% 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
88% match
Loading thumbnail…

D3 and SVG smile

This example shows a smiling face built with SVG shapes and animated with D3 transitions. A red background frames a yellow circle with a black stroke, while two small circles form the eyes and an arc path creates the mouth. The eyebrows are rectangles that move up and down using chained `transition()` calls with 500-millisecond durations. The code selects the SVG element with `d3.select`, sets its dimensions and background, and uses `d3.arc()` to generate the smile path, all within a React-compatible setup using D3 v6.

GGattu-Abhinay
87% match
Loading thumbnail…

SVG Example

This example draws a smiling face in SVG using D3 v5, with a yellow circular head, two eyes, rectangular eyebrows, and an arc-shaped mouth. The eyebrows animate by moving vertically over two seconds using chained `transition()` calls, shifting down then back up. The code uses `d3.select`, the `arc()` generator from D3’s shape module, and attribute setters like `.attr()` to construct the SVG elements. Static properties for spacing and sizing are defined as variables, and the entire face is centered within a 960×500 viewport.

TThomas Nield
87% 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
87% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn in SVG animates as its eyebrows bounce up and down. Built with D3.js v5, the example constructs circles for the eyes and a path using the `arc` generator for the mouth, then applies chained `transition()` calls to shift the eyebrow group’s transform. The code demonstrates core DOM selection and manipulation via `d3.select`, plus attribute setting and SVG grouping, with no external data source.

BBrett Cunningham
87% match