Skip to main content
SimilarExport ZIP
100%

Fork of Shapes and Colors with SVG and CSS

✓ Published0🌍 Public
Rrjohnson5016
Last edited Dec 31, 2020
Created on Dec 31, 2020

This example shows a yellow smiley face drawn with SVG shapes—circles for the eyes, rectangles for the eyebrows, and an arc-based path for the mouth—that animates through D3 transitions. The code uses d3 v5’s `select` and `append` methods to build the SVG hierarchy, with `transition()` and `attr` chaining to sequentially move the eyebrows and morph the mouth’s inner radius. The face is centered via a translation on a group element, and the mouth path relies on `d3.arc()` with changing `innerRadius` values. Styling is applied through CSS, while the animation logic is driven entirely by D3’s transition API.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes whose eyebrows animate up and down. The face is constructed using D3.js v5 selections to append a circle for the head, two circles for the eyes, rectangles for the eyebrows, and a path generated with the `arc` helper for the mouth. The eyebrows move via chained `transition().duration(2000)` calls on a group element, shifting its `transform` translation between two vertical offsets. All shapes are centered using a group translated to the middle of a 960-by-500 SVG canvas.

MMercy7kumar
92% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, centered within a 960-by-450 canvas, with eyes, a mouth, and eyebrows that animate upward and back down over two seconds. The example demonstrates fundamental DOM manipulation using D3.js v5, building the face with `d3.select`, `append`, and the `d3.arc` shape generator for the mouth. The eyebrows’ movement is driven by chained `transition().duration(2000)` calls that change the group’s `transform` attribute. All shapes are plain SVG elements, and the animation relies entirely on D3’s transition system.

SSANEEM MOHAMMAD
91% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example shows a friendly yellow smiley face rendered as an SVG, with eyes and a mouth drawn using D3 shapes. The face’s eyebrows animate by moving upward and then returning to their original position over two two-second transitions. Using d3.select and d3.arc, the code builds the circle, eye, eyebrow rectangles, and mouth path, then applies chained transition() calls to shift the eyebrow group’s transform attribute. The visualization runs in a 960×500 SVG canvas with no external data, relying entirely on hardcoded dimensions.

AAsmitha-Sa
91% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example creates a yellow smiley face with circular eyes, rectangular eyebrows, and an arc-shaped mouth centered within an SVG canvas. D3.js selections append SVG shapes and apply a two-second `transition` that moves the eyebrow group upward by 50 pixels and then back down, producing a repetitive animation. The code uses `d3.select`, `d3.arc` for the mouth path, and chained `transition.attr` calls to alter the `transform` attribute, demonstrating fundamental DOM manipulation with version 5 of the library.

Ccharliemok
91% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example uses D3.js v5 to animate a smiley face built entirely from SVG shapes. It shows a yellow circle with two eyes, animated eyebrows that move up and down repeatedly, and a mouth drawn as an arc. The code manipulates the DOM directly, using `d3.select` to target the SVG element and `append` to add each facial feature. The eyebrow animation is achieved through chained `transition` calls that alternate the transform attribute, while the mouth’s curved path is generated with the `d3.arc` function.

RRamola Shishupal
91% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn and animated entirely in SVG using D3.js v5. The code selects the svg element and appends a group, then positions circles for the eyes, rectangles for the eyebrows, and an arc-based path for the mouth. The eyebrows animate upward and back via chained `transition().duration(2000)` calls on the group’s `transform` attribute. The example demonstrates basic DOM manipulation, shape creation, and transition sequencing with d3-selection and d3-shape’s `arc` generator.

Ggcappadaniel
91% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example shows a yellow smiley face built entirely from SVG shapes using D3.js v5, with animated eyebrows that move up and down in a repeating two-step transition. The face is composed of a circle, two eye circles, and a mouth drawn as an arc path via the `d3.arc` helper, all centered within an SVG canvas. The code demonstrates fundamental DOM manipulation by appending groups and elements with `select`, `append`, and `attr`, while the eyebrow motion relies on chained `transition().duration().attr()` calls to repeatedly shift their vertical position. No external data source is used; the visualization is purely programmatic.

DDavit Avetikyan
91% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face, built from SVG shapes, demonstrates D3.js v5’s DOM manipulation and transition methods. The code appends a circle for the head, two for the eyes, rectangles for eyebrows, and a path generated with the `arc` function for the mouth. The eyebrows animate by moving up and down via sequential `transition().duration()` calls on a group element. This example shows basic data-joins and attribute updates, with a static yellow face rendered in an SVG canvas.

SSANEEM MOHAMMAD
91% match