Nekkadapu viz

100%

✓ Published0🌍 Public

Last edited Jun 18, 2022

Created on Jun 18, 2022

This example shows a stylized face rendered in SVG, drawn with yellow circular head, eyes, eyebrows, a red nose, a mouth arc, and animated teeth and eyebrows. The face includes a red cigarette shape rotated and scaled, with white teeth that swing between rotations. The code uses d3 v6 with the `arc` and `select` APIs to construct shapes, and `transition().duration()` to animate the eyebrow and teeth positions. All elements are generated in JavaScript and appended to an SVG container.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Nitheesh_DV4

This example draws a stylized smiley face using SVG primitives within a React component. It shows a yellow circular face with eyebrows, asymmetric eyes (white, black, and green pupils), and a curved mouth path, all centered in a fixed 960×500 viewport. The visualization uses d3.arc to compute the mouth’s shape, with ReactDOM rendering the SVG elements. Thick black strokes define facial features and limbs, while the code relies on d3.v7 and React 17, with no external data source.

NNitheeshSama1

81% match

Loading thumbnail…

NEETU viz_DRAW RECTANGLE

This example shows a stylized yellow smiley face composed of SVG primitives: a large face circle, two eye circles, and a mouth drawn with a D3 arc path. The face is centered within an 800 by 500 SVG viewport, with all elements positioned relative to a translated group at the canvas center. The code uses React to render the SVG structure, while the D3 `arc()` API generates the mouth’s curved path based on specified inner and outer radii and start and end angles. The rendering is purely declarative, with no interactive behavior or external data.

NNeetu-Shah

80% match

Loading thumbnail…

SVG Face

A stylized, yellow SVG face with black-outlined features and animated eyebrows. The face is constructed using D3 primitives: circles for the face and eyes, and rectangles for the brows. The entire face is centered within the SVG, with the mouth drawn as an arc path. The eyebrows animate via chained `transition` calls, moving downward over one second and then returning to their original position over two seconds. The code imports `select` and `arc` from D3 v5.

Aatree-rohit

80% match

Loading thumbnail…

SVG face

This example shows a cartoon face built from SVG primitives, with a yellow circular head, two black eyes, and a curved mouth rendered using D3’s `arc` generator. Eyebrows are added as rectangles positioned via SVG transforms. The code uses D3 selections to create and style elements, relying on hardcoded dimensions from the SVG attributes rather than external data.

Uuttam-vish

80% match

Loading thumbnail…

Let's make a face with D3.js!

This example draws a bright yellow cartoon face using SVG shapes, with two eyes, a mouth, and animated eyebrows. The face is centered within an SVG canvas using D3 selections and transformation attributes. Eyebrows animate up and down using chained `transition().duration()` calls. The code utilizes `d3.select`, `d3.arc` for the mouth path, and D3’s transition system to create the motion. The rendering approach is purely declarative SVG construction in a React-free environment, with styles defined in a separate CSS file.

SSreekar Reddy

79% match

Loading thumbnail…

Untitled

This example shows a simple, stylized face built entirely from SVG primitives, with yellow circular head, black-outlined features, and a red background. A group element centers the face on the canvas, while nested groups position eyes and eyebrows relative to each other. The eyebrows animate vertically using two chained `transition` calls with a duration of 1000 milliseconds each, creating a continuous up-and-down motion. The code uses D3 v6’s `select`, `append`, and `attr` methods, and the mouth is generated using the `arc` shape generator with specified inner and outer radii and angle parameters.

Bbicyclecode

79% match

Loading thumbnail…

Let's make face with D3.js!

A yellow circular face with black-outlined eyes, animated eyebrows, and a curved mouth is rendered in SVG using D3.js v5. The example demonstrates how to build a static facial structure with `select`, `append`, and `arc` for the mouth, then animate the rectangular eyebrows via chained `transition().duration()` calls that move them up and down. All shapes are positioned and scaled relative to the SVG’s width and height, with the face group translated to the center. The code uses D3’s selection and arc generators, with transitions running for two seconds per movement phase.

Bbhayyasaheb

79% match

Loading thumbnail…

face

A smiling face drawn with SVG shapes—a yellow circle, black outlines, pink ellipses for cheeks and ears, and an arc for the mouth—has animated eyebrows that continuously move up and down. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select`, `append`, and `attr` to build the face from primitive elements. A `transition` with a two-second duration moves the eyebrow group, while `arc` generates the mouth path. No external data is loaded; all geometry is hardcoded in `index.js`.

MM Hema

79% match