SaiBhavanaAkkineni.js

100%

SaiBhavanaAkkineni.js

✓ Published0🌍 Public

Last edited Jun 18, 2022

Created on Jun 18, 2022

Forked from Let's make a face with D3.js

This example renders a stylized face as a static SVG composition, with features such as a lavender circle head, black nose, eyes, rectangular eyebrows, and an arc-based mouth. The only animation is a repeated vertical movement of the eyebrows, implemented with chained `transition.duration` calls in D3 v5. The code uses `d3.select`, `d3.arc`, and SVG elements like `circle`, `rect`, and `path`, all positioned with manual coordinates and grouped via `g` elements. No external data is loaded; the visualization is purely geometric and interactive only in its timed eyebrow motion.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

HTML Starter

This example shows a stylized face built with SVG shapes, including a yellow circle for the face, black rectangles for eyebrows, and a mouth drawn using an arc path. The code uses D3.js v5 selection methods and the `arc` generator to create the smile. A series of chained `transition().duration()` calls animate the eyebrow group vertically, making the eyebrows bounce up and down repeatedly. The visualization demonstrates how to combine static geometric elements with simple D3 transitions for a playful effect.

Ccsroysudarshan

80% match

Loading thumbnail…

SVG and CSS

This example creates an animated SVG face using React and D3 v5. The visualization shows two large eyes and eyebrows rendered as circles and rectangles within a yellow circle on a black stroke, with a smile drawn using an arc path. The eyebrows animate upward and back down over two seconds via chained `transition()` calls that modify the group’s transform attribute. The code imports `select` and `arc` from D3 to manipulate SVG elements and generate the mouth shape, all within a fixed 960x500 canvas.

PPraneeth Varma

80% match

Loading thumbnail…

HTML Starter

This example demonstrates a simple animated face constructed from basic SVG shapes, including circles for eyes and a path for a mouth. Using the React framework with D3 v4, the visualization initially draws a purple background, a yellow circle, and facial features. The left and right eyebrows are rectangles that animate vertically twice using D3’s `transition` with a duration of 2000 milliseconds each, creating a blinking or expressive motion. The mouth is generated using the `d3.arc` function to define its path, while shape positions are calculated from the SVG’s width and height attributes.

Ttayyabanisar

79% match

Loading thumbnail…

face by thecodemaster

A stylized face rendered in SVG animates its eyebrows in a looping motion. Built with D3 v7, the visualization constructs a green circular head, two eyes, and a mouth using basic shape primitives and an arc generator. The `d3.arc()` function defines the mouth’s curved path, while chained `transition().duration()` calls move the eyebrow rectangles up and down. The code uses `select()` to manipulate the SVG canvas and applies attributes like `cx`, `r`, and `transform` to position elements. The animation runs automatically on page load, with no external data source.

NNwaegerue Chinemerem

79% 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

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…

HTML Starter

This example demonstrates a simple animated face built with D3 v4 and React, rendered as SVG on an HTML page. The purple background hosts a yellow circle with black stroke, two eyes, and an eyebrow that transitions vertically over two seconds before returning. A mouth is drawn using an arc path generator from D3. The code selects the SVG element, uses method chaining for attribute setting, and applies transitions with `transition().duration()` to animate the eyebrow.

Ttayyabanisar

78% match

Loading thumbnail…

Let´s make a facewith SVG and CSS

A face built with SVG shapes uses D3 v5 selections and transitions to animate its eyebrows. The code constructs circles for the eyes and an arc path for the mouth, then applies a timed `transition` to move the left eyebrow over two seconds. Styling comes from CSS, while the layout centers elements using SVG attributes. The example demonstrates basic SVG rendering and D3’s animation capabilities without external data.

NNikhil

78% match