Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published0🌍 Public
AAlbert
Last edited Apr 4, 2021
Created on Apr 4, 2021
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

Shapes with SVG and CSS

This example constructs a smiling face out of basic SVG shapes—circles, rectangles, and a path—drawn inside a 960 by 500 pixel canvas. The face is centered using a `transform` on a group, with static features like the yellow head, black outline, eyes, and an arc-based mouth. The eyebrows are rectangles that animate up and down using sequential `d3.transition()` calls, each lasting two seconds. The code leverages the D3.js v7 library's `select`, `append`, `attr`, and `arc` APIs within a React framework, rendering entirely as SVG.

Mmrdeevid
94% match
Loading thumbnail…

Shapes with SVG and CSS

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.

NNewSage-01
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
93% 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…

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

This example uses D3.js to build a smiling face entirely from SVG shapes—circles, rectangles, and an arc path—with animated eyebrows. The SVG canvas is selected directly, and D3’s `transition()` and `duration()` methods move the eyebrow group up and down in a looping motion. The page also includes static SVG circles and rectangles with CSS-defined fills to demonstrate basic shape styling. Rendering relies on SVG elements created via D3 selections, with the face centered using width and height attributes from the SVG element.

Rrkdunn
93% match