Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published0🌍 Public
Vvkoschman
Last edited Jul 29, 2020
Created on Jul 29, 2020

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.

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 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 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
93% 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
93% 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
93% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

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.

IIan Russell
93% 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
93% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

A simple SVG smiley face is drawn with yellow circle, black eyes, eyebrows, and a mouth, all centered in a 960×500 viewport. D3 v5 selections and the `d3.arc` path generator create the shapes, while CSS sets a red background. A 2-second `transition` on the eyebrow group’s `transform` attribute animates the eyebrows upward and back down. No external data is used; the visualization relies entirely on hard-coded coordinates and D3’s SVG manipulation.

Mmoosearch
93% match