Skip to main content
SimilarExport ZIP
100%

Fork of Learn to draw devil smile with d3

✓ Published0🌍 Public
Kkartheekgurijala1996@gmail.com
Last edited Feb 27, 2024
Created on Feb 27, 2024

A devil face built from SVG shapes demonstrates a looping eyebrow animation, horns, eyes, a red smile arc, and white teeth arranged on a dark background. The example uses D3 v5 selections and transitions to move the eyebrows up and down repeatedly over two-second intervals. Geometric primitives like circles, rectangles, and polygons, along with a d3.arc-generated path, compose the character with hardcoded coordinates.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Learn to draw smile with d3

A yellow SVG smiley face is drawn with D3 v5, featuring two eyes, animated eyebrows, and an arc-based mouth. The code uses `d3.select`, `d3.arc`, and SVG elements like `circle`, `rect`, and `path` within a centered group. Eyebrows transition vertically via `transition().duration()`, while the face is rendered on a 960×500 canvas with black strokes. All shapes are generated programmatically without external data, demonstrating basic SVG drawing and animation with D3's selection and transition APIs.

0007ebey
88% match
Loading thumbnail…

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

A devil face built with D3.js v5 demonstrates DOM manipulation through SVG shapes and transitions. The code uses `d3.select`, `d3.append`, and `d3.arc` to construct circles, rectangles, paths, and triangles for the face, ears, horns, cheeks, nose, earrings, and hair. Eyebrows animate via chained `transition` calls with `attr` updates, moving up and down over two-second intervals. The scene renders against a light blue ocean background, with all elements positioned using SVG coordinate transformations relative to the center.

Kkartheekgurijala1996@gmail.com
87% match
Loading thumbnail…

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

This example shows a smiley face whose eyebrows periodically move up and down, demonstrating basic DOM manipulation with D3.js. The face is drawn using SVG shapes including circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all centered within an SVG canvas. The animation uses D3's `transition()` method to shift the eyebrow group’s transform attribute back and forth, creating a looping motion. The code imports `select` and `arc` from the D3 v5 library and relies on SVG for rendering.

BBrickDust
87% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face whose eyebrows animate upward and downward. It first builds the face using SVG shapes, including a red circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `arc` generator. The eyebrows then move repeatedly through chained `transition` calls, each lasting two seconds, shifting their vertical position on a continuous loop. The visualization relies on D3 selections and attribute methods to create and position elements within an SVG canvas.

BBaji-2000
87% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3 v5. Using SVG shapes, the code draws a circle for the face, two circles for eyes, and rectangles for eyebrows, while an arc generator creates the mouth. The eyebrows move vertically through chained `transition().duration()` calls, and the entire face is centered using an SVG `g` transform. This example focuses on core D3 selections and transitions.

LLG0498
87% match
Loading thumbnail…

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

This example shows a stylized smiley face built with D3.js v5, rendered as SVG with animated eyebrows that move up and down repeatedly. It demonstrates fundamental DOM manipulation by selecting an SVG element and appending groups, circles, rectangles, and a path for the mouth. The code uses D3’s `select` and `arc` APIs, along with chained `transition().duration()` calls to animate the eyebrow positions. The face is centered with a magenta circle background, and the animation loops via transition chaining without external data, relying purely on hardcoded geometric constants.

TTarun Kumar Bosupally
87% match
Loading thumbnail…

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

This visualization demonstrates how to build a simple smiley face using D3.js v5, with animated eyebrows that move up and down. The code uses d3-selection to append SVG elements including circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. A chained transition with a two-second duration moves the eyebrows upward, then returns them to their original position, creating a blinking expression. The face is centered on a 960×500 SVG canvas using a group transform, with all shapes drawn using fundamental SVG attributes.

Ppangaotata
87% match
Loading thumbnail…

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

This example shows a yellow smiley face drawn with SVG, whose eyebrows animate up and down in a repeating loop. The code uses D3.js v5 selection methods to append circles for the eyes and face, rectangles for the eyebrows, and a path generated with the `arc` helper for the mouth. Two chained `transition` calls, each lasting 2000 milliseconds, shift the eyebrow group’s transform attribute to create the movement. The face is centered using a group translated to the middle of a 960-by-500 SVG canvas.

Ssalim.mir@outlook.com
87% match