Shapes in SVG and CSS

100%

Shapes in SVG and CSS

✓ Published1🌍 Public

Last edited Aug 12, 2020

Created on Aug 12, 2020

An animated face drawn with SVG shapes is rendered inside a 960×500 viewport. The code uses D3 v5’s selection and arc helpers to construct the circular head, eyes, and a mouth path, while CSS handles the page layout. Eyebrow rectangles animate upward and downward through a chained `transition` call lasting two seconds per movement. The face is centered with a transform, and all elements rely on SVG attributes for positioning and styling.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

92% 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

91% match

Loading thumbnail…

Shapes with SVG and CSS

A stylized face built from geometric primitives is rendered using SVG elements styled and positioned through D3.js. The code demonstrates the use of D3's `select`, `append`, and `attr` to create and configure circles for the face and eyes, alongside a path that uses the `arc` generator to form a mouth shape. Data for element positions and sizes are derived from the SVG's `width` and `height` attributes, showcasing dynamic, attribute-driven layout. The example relies on React for the overall application structure, with rendering handled via raw SVG within the HTML document.

Aandy-yc-lin

90% 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

90% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

An SVG face centered on a 960×500 canvas uses D3 v5’s selection and arc APIs to build its features. Green and greenyellow circles form the head and eyes, while two rectangles animate as eyebrows via chained `transition().duration(2000)` calls, moving up and down over four seconds. A mouth path is generated with the `arc` function, using inner and outer radii with a half-turn angular sweep. The example demonstrates common SVG shapes and CSS styling within D3’s declarative, animation-capable rendering.

OOsekovS

90% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

A smiling face drawn with SVG shapes animates its eyebrows in a loop. The example demonstrates basic SVG elements—circle, rect, and path—styled with CSS and manipulated through D3 v5 selections and transitions. The face is centered using SVG transforms, with the mouth generated via `d3.arc` as a half-circle path. Eyebrows alternate between two vertical positions using chained `transition().duration(2000)` calls, creating a playful wink-like effect. All rendering is static SVG with animation handled purely through D3’s transition system.

Mmorjyooo

89% 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

89% match