Skip to main content
SimilarExport ZIP
100%

11506566 - Smiley face

✓ Published0🌍 Public
EEshwarreddyt
Last edited Feb 23, 2023
Created on Feb 23, 2023

A cartoon smiley face with animated eyebrows and a mustache, beard, ears, teeth, and hair is rendered in SVG. The face is constructed using D3 selections and shape generators, including `arc` for the mouth and `line` with `d3.curveBasisClosed` for the mustache and beard. Eyebrows animate via chained `transition().duration(2000)` calls that move them up and down. The example demonstrates fundamental DOM manipulation with D3 v5, building all elements from hardcoded coordinates and attributes rather than external data.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley face using D3

A smiley face rendered in SVG uses D3.js to demonstrate fundamental DOM manipulation, with animated eyebrows that move up and down. The code draws yellow circles for the face and eyes, rectangles for eyebrows, and an arc-generated mouth, all positioned via D3 selections and transforms. A transition chain animates the eyebrow group’s vertical position over four one-second intervals, showcasing repeated attribute updates. The example relies on D3 v5’s `select`, `arc`, and `transition` APIs within a static SVG container.

AAyush Gupta
90% match
Loading thumbnail…

Face Smiling

A smiley face drawn with SVG shapes animates its eyebrows upward and back down over four seconds. The code uses D3 v5 selections and transitions to move a group containing arc and rect elements, while the face itself is built from circles and a path generated with the d3.arc function. The example demonstrates fundamental DOM manipulation in plain JavaScript, with no external data source.

Aamruthacharyakothakota@my.unt.edu
89% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn in SVG animates as its eyebrows bounce upward and settle back down. The example demonstrates fundamental D3.js DOM manipulation by constructing the face from appended shapes—circles for the eyes and head, rectangles for the eyebrows, and a path generated with the `arc` helper for the mouth. A chained `transition` with a two-second duration moves the eyebrow group twice, creating the animation. The code uses D3 v5 selections and attributes on a static SVG canvas.

Eevesshaw
88% match
Loading thumbnail…

smile.js!

A smiley face with animated eyebrows demonstrates basic DOM manipulation and SVG rendering in D3.js v5. The visualization constructs a red circle with a blue stroke, two eyes, rectangular eyebrows, and an arc-based mouth using D3 selection and shape-generating functions. The eyebrows move up and down via chained `transition` calls over five-second durations, showcasing D3's ability to animate SVG attributes. The code directly selects the SVG element, appends groups, and applies transforms to position facial features.

AAbhinav-Mullapudi
88% match
Loading thumbnail…

Smiley face D3.js

A yellow smiley face, composed of SVG circles and a path-based mouth, demonstrates D3.js DOM selection and manipulation. The code uses the `select` and `arc` APIs from D3 v5 to construct the face, and its appended groups and shapes are animated via chained `transition().duration(2000)` calls, which move the eyebrow rectangles up and down. The animation runs over a 960x500 SVG canvas, using a static JavaScript bundle for rendering.

BBruno Simoes
88% 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
88% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG with D3.js v5 demonstrates fundamental DOM manipulation through animated eyebrow movement. The face, eyes, and eyebrows are drawn as SVG circles using d3.select and d3.append, with the eyebrow positions controlled by coordinate offsets. The face circle triggers a recursive animation via addEvents and transition.attr, moving the entire face group vertically over two seconds before reversing direction. The example uses D3's selection.transition with .duration and .on("end") callbacks to create a continuous bobbing motion, showing how to build and animate SVG elements without external data.

Jjulieducasse
88% match
Loading thumbnail…

smile face emoji

A smiley face emoji rendered with SVG elements—circles for the face and eyes, rectangles for the eyebrows, and a path for the mouth—drawn using D3.js select and append operations on a centered group. The eyebrows animate upward via a two-second `transition` on the group's transform attribute, while the mouth is created using the `d3.arc` function with an inner and outer radius. This example demonstrates fundamental DOM manipulation and basic shape construction with D3 v5.

TTharun Reddy
88% match