Skip to main content
SimilarExport ZIP
100%

SVG Example

✓ Published0🌍 Public
TThomas Nield
Last edited Nov 24, 2019
Created on Nov 24, 2019
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Face

A smiling yellow SVG face with animated eyebrows demonstrates basic D3 shape and transition techniques. The face is centered using SVG groups and transforms, with circles for eyes, rectangles for eyebrows, and a path generated by D3’s `arc` function for the mouth. The eyebrows move upward and return via chained `transition().duration()` calls. The example uses d3-v5 select and arc APIs to build the static face and animate its expressions purely through SVG attribute interpolation.

Rrams211
91% match
Loading thumbnail…

SVG Face

A smiling yellow SVG face with animated eyebrows demonstrates basic D3 shape and transition techniques. The face is centered using SVG groups and transforms, with circles for eyes, rectangles for eyebrows, and a path generated by D3’s `arc` function for the mouth. The eyebrows move upward and return via chained `transition().duration()` calls. The example uses d3-v5 select and arc APIs to build the static face and animate its expressions purely through SVG attribute interpolation.

Rrams211
91% match
Loading thumbnail…

Using SVG and D3

This example uses SVG and D3 to draw a simple, static face composed of a yellow circle, two eyes, two animated eyebrows, and a mouth arc. The right eyebrow moves up and down via chained transition calls, each lasting two seconds. The code selects the SVG element with `d3.select`, appends and positions shapes with `.attr`, and constructs the mouth using D3’s `arc` generator. The scene is centered by translating a group element, and the SVG background is set to red through the D3 style method.

JJokerhan88
90% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js v5, with animated eyebrows that shift downward and back over two seconds. The code builds the face by manipulating SVG elements—circles for the head and eyes, rectangles for brows, and a path generated with d3.arc for the mouth. Select and transition methods drive the eyebrow movement, while the layout is centered using width and height attributes from the SVG. Eyebrow positions and eye spacing are defined as numeric constants.

TThomas Nield
89% match
Loading thumbnail…

SVG Smiley Face

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.

Bbprokopowicz
89% match
Loading thumbnail…

Let's make a face!

A smiling yellow face is drawn in SVG using D3 v7, with a circle for the head, smaller circles for eyes, and an arc-generated path for the mouth. The eyebrows, rendered as rectangles, animate upward and back down via chained `transition` calls. This example demonstrates basic SVG shape creation and animation with D3's selection and arc API.

LLYD
89% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a yellow smiley face in an SVG using D3.js v5. The face consists of a circle, two eyes, animated rectangular eyebrows, and a mouth created with the d3.arc path generator. The eyebrows transition their vertical position over two seconds using chained transition calls, moving downward and back upward. The code uses d3.select and attribute manipulation to position elements relative to the SVG’s center.

KKaavya Lakshmanan
89% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a smiling yellow face out of SVG shapes using D3.js v5. It constructs a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth, all centered on an SVG canvas. The eyebrows animate upward and back down over four seconds using chained `transition` calls with a two-second duration each. The code relies on D3’s `select` and `arc` functions to build the scene entirely from static attributes, with no external data source.

Fforcox43
89% match