Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published2🌍 Public
IIan Russell
Last edited Feb 11, 2021
Created on Feb 10, 2021

This example shows a simple cartoon face built from SVG shapes, including a yellow circle, eyes, animated eyebrows, and a mouth drawn with an arc path. The eyebrows move up and down repeatedly using D3 v4 transitions that alter their transform attribute. The code uses D3 selections, the `arc` function for the mouth, and SVG elements such as `circle`, `rect`, and `path`, with styling applied via a linked CSS file. Rendering is done entirely in SVG with no external data source.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example builds a smiling face out of basic SVG shapes, including a yellow circle, eyes, nose, and an arc-based mouth, all centered on a dark blue background. The face is constructed using D3 v5 selections and the `arc` generator, with CSS controlling the page layout. Animated eyebrows demonstrate D3 transitions, moving horizontally and vertically via `attr` changes on SVG path elements over specified durations.

Bb-g-h
95% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows a simple yellow face built from SVG shapes, including a circular head, eyes, eyebrows, and a mouth formed by a curved path. The SVG elements are positioned and styled using D3 v6 methods such as `select`, `append`, and `attr`. A CSS transition animates the eyebrows upward and back downward over two seconds, while the mouth is drawn using the `d3.arc` generator with specified angles. The data is generated procedurally within the code rather than loaded from an external source, and the animation relies on D3’s built-in `transition` method.

KKateryna
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 and Colors with SVG and CSS

This example demonstrates a cheerful face built entirely from SVG shapes, including circles, rectangles, and an arc path, all rendered on a yellow background. It uses D3 v5’s `select` and `arc` APIs to construct the geometry, with CSS defining stroke styles. The left eyebrow animates via chained `transition().duration()` calls, moving vertically over four seconds, while other facial features remain static.

MMiish84
94% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

A smiling face rendered in SVG uses D3 v5 to construct circles, rectangles, and an arc-based mouth. Static yellow and black shapes form the head and eyes, while CSS transitions animate the eyebrows upward and downward over two-second intervals. The code directly manipulates SVG attributes such as `cx`, `r`, and `d` with an `arc` generator, and uses `transition.attr` to shift eyebrow positions.

Vvkoschman
93% 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
93% match