Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Oct 28, 2020

Created on Oct 28, 2020

This example draws a smiley face using SVG shapes to demonstrate D3's arc generator and selection methods alongside CSS styling. A yellow circle forms the head, with black circles for eyes and rectangles for eyebrows, while an arc creates the mouth. The right eyebrow animates via chained D3 transitions, moving down then back up over four seconds. The code uses d3.arc for the mouth path and d3.select with attribute setters for shape properties.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Shapes with SVG

A smiling face is rendered as a composition of SVG shapes, including a yellow circle for the head, two eyes, eyebrows, and an overlaid arc path for the mouth. The code uses d3.select and d3.arc to position these elements around a central group, translating coordinates dynamically based on the SVG’s width and height. One eyebrow animates downward via a transition on its y-attribute over two seconds, while the other remains fixed.

Uujjwalgarad

93% match

Loading thumbnail…

Shapes Using SVG and CSS

This example draws a smiley face using SVG shapes, with a yellow circle for the head, two black circles for the eyes, and a dark arc for the mouth. The shapes are positioned using explicit coordinates and a `transform` translation group. The sketch uses the D3 library (v5) for SVG element creation and employs D3's `arc` function to generate the mouth path. The SVG canvas is 960 by 500 pixels, and the styling is defined in an external CSS file.

Sshah417

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

92% match

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

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

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

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

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

92% match