Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published1🌍 Public
NNewSage-01
Last edited Dec 21, 2019
Created on Dec 21, 2019
Forked from HTML Starter

A yellow circle with black stroke forms a face, including two eyes with rectangular eyebrows and a semicircular mouth. The eyebrows animate by moving up and down using D3 v5's `transition` API on SVG `g` elements. The SVG is rendered on an HTML page, with the drawing positioned using `d3.select` and `d3.arc` to define the mouth path.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

A yellow circle with two black eyes and an arc-shaped mouth forms a simple face. The SVG shapes are created and positioned using D3 v5's `select`, `append`, and attribute setters. The mouth uses D3's `arc` generator to define a path, which is then animated with the D3 `transition` API over 200 milliseconds.

MMartin Palanca
94% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

A yellow circle with black outlines forms a face, featuring two eyes and animated eyebrows, all rendered as SVG shapes. The example uses D3.js version 5 to select and append circles, rectangles, and a path, with the path drawn using the `arc` function to create a mouth. CSS styles the page, while D3 transitions animate the eyebrows' vertical movement over two-second intervals. The SVG canvas is 960 by 500 pixels, and all elements are positioned using transforms relative to the center.

MMargarita Chernetski
94% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

A yellow circle with black outlines forms a simple face whose eyes, eyebrows, and mouth are built from SVG shapes. The eyebrows, drawn as rectangles, animate upward and back down using chained D3 transitions over two seconds each. The mouth is a path generated with the d3.arc helper, while the face’s construction relies on D3 selections, attribute setting, and SVG groups for positioning. CSS hides page margins and overflow.

Aarg04
94% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

A yellow circle with black outlines forms a simple face whose eyes, eyebrows, and mouth are built from SVG shapes. The eyebrows, drawn as rectangles, animate upward and back down using chained D3 transitions over two seconds each. The mouth is a path generated with the d3.arc helper, while the face’s construction relies on D3 selections, attribute setting, and SVG groups for positioning. CSS hides page margins and overflow.

Aarg04
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example creates a simple animated face using SVG shapes and CSS styling. The face consists of a yellow circle with black stroke, two eyes, eyebrows, and a mouth path drawn with the `arc` function. The eyebrows animate up and down using D3’s `transition` method over two-second intervals. The code uses D3 v6 selections and SVG attributes to position elements relative to the center of the 960x500 canvas, with a standalone HTML page linking to a stylesheet and bundled JavaScript.

AAlbert
94% match
Loading thumbnail…

Shapes with SVG and CSS

A yellow SVG circle face with black outlines demonstrates animated facial expressions using D3 v5 and CSS. The code renders two eyes that blink via chained `transition().duration()` calls, while eyebrows shift vertically through animated `transform` attributes. A mouth is drawn using the D3 `arc()` path generator. All shapes are positioned within a centered `<g>` group, with SVG attributes like `cx`, `r`, and `width` controlling geometry.

1123fischer
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows a stylized face constructed from a yellow circular head, black eyes, rectangular eyebrows, and a curved mouth. The visualization demonstrates the animation of SVG shapes using D3.js and CSS. The eyebrows are animated with a D3 transition, moving up and down over a two-second duration. The mouth is created using D3’s `arc` function with specified inner and outer radii and angular sweep. The SVG canvas is 960 by 500 pixels, and the scene is centered using a group transform.

EEkundayo Blessing
93% match
Loading thumbnail…

Shapes with SVG and CSS

A yellow circle with two small eyes and rectangular eyebrows forms a face. The animation moves the eyebrows upward for two seconds, then returns them to their original position. The SVG is drawn using d3.select and shape-construction methods like append('circle') and append('rect'), with layout based on width and height attributes. The eyebrow motion relies on d3's transition system, using transition().duration() to animate the transform attribute in a two-step sequence. The mouth is a path generated with d3.arc, specifying inner and outer radii with defined angles.

CChia-KaiYang
93% match