Skip to main content
SimilarExport ZIP
100%

SVG and CSS

✓ Published1🌍 Public
PPraneeth Varma
Last edited May 7, 2020
Created on May 6, 2020
Forked from 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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3 and SVG

This example demonstrates how to build an animated cartoon face using D3 and SVG, with a yellow circle for the head, black-outlined eyes, and an arc-based mouth centered on a 960x500 canvas. The eyebrows are rectangles that bounce up and down using chained `transition().duration(2000)` calls. The code imports `select` and `arc` from D3 v5 and uses React for the framework. SVG elements are constructed programmatically, with the mouth path generated via the `arc()` API using inner and outer radii and angular ranges.

Pp4pravin
92% match
Loading thumbnail…

D3 Intro

This example renders an animated SVG face using D3.js version 7.8.2 within a React framework. The code draws a yellow circle with eyes, eyebrows, and a mouth, then uses D3’s `transition` API to animate the eyebrows downward and back over two 2-second intervals. The visualization demonstrates basic SVG shape construction (circle, rect, path) and JSON-driven animation, with the mouth generated via D3’s `arc()` generator for a semi-circular smile. The rendering relies on D3’s selection and attribute manipulation methods.

Aadbirch
91% match
Loading thumbnail…

D3 and SVG smile

This example shows a smiling face built with SVG shapes and animated with D3 transitions. A red background frames a yellow circle with a black stroke, while two small circles form the eyes and an arc path creates the mouth. The eyebrows are rectangles that move up and down using chained `transition()` calls with 500-millisecond durations. The code selects the SVG element with `d3.select`, sets its dimensions and background, and uses `d3.arc()` to generate the smile path, all within a React-compatible setup using D3 v6.

GGattu-Abhinay
90% match
Loading thumbnail…

SVG

This example renders a smiley face using React and D3, composed of SVG circles and an arc path. The face includes a yellow background circle with a black stroke, two eyes positioned symmetrically, and a mouth created with d3.arc(). The code uses React components for the background and eyes, while a D3 arc generator computes the mouth’s path with specified inner and outer radii and angles. The visualization is static, with all elements centered within an 960×500 SVG canvas.

AAsif Nawaz
90% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling cartoon face is drawn with SVG shapes using D3.js v5, featuring animated eyebrows that move downward and back upward over two seconds. The face uses a yellow circle, black stroke, and an arc-generated mouth with `d3.arc`. Code imports `select` and `arc` from D3, applying chained `transition().duration()` calls to animate the eyebrow group’s transform. React is noted in metadata, though the example runs as a standalone HTML page with a static SVG canvas.

Iidwann-eng
90% match
Loading thumbnail…

Shape with SVG and CSS

This example uses SVG shapes and CSS to draw a cheerful face with a yellow circle, black eyes, and eyebrows, all rendered statically in a React-like D3 v5 setup. A path, built with the `arc` generator, forms a half-circle mouth. The right eyebrow animates via chained `transition().duration(2000)` calls, moving it upward and back, while other elements remain fixed. The code demonstrates basic SVG attribute manipulation with D3 selections, including `attr` and `transition`, within an HTML page that loads d3.v5.

CCassie-Xiao-Yu
90% match
Loading thumbnail…

Make a Face with SVG and CSS

This example renders a cartoon face using SVG shapes composed with D3.js v5 selections and the `arc()` generator. A yellow circle forms the head, with circles for eyes, rectangles for eyebrows, and an arc path for the mouth. The eyebrows animate vertically using chained `transition()` calls, while the face is centered via a group transform. The visualization demonstrates static SVG composition and D3 transitions within a React framework.

NNewSage-01
90% match
Loading thumbnail…

SVG face

A cheerful SVG face is rendered using React, with a yellow circular head, two eyes, and a smile outline drawn via D3’s `arc()` generator. The eyebrows are separate rectangles that animate vertically using D3 transitions, moving up and down over two-second intervals. The visualization uses React and ReactDOM for the component structure, while D3 v6 handles the arc path, selection, and transition logic within an SVG canvas.

AAnthony Ynami
90% match