Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Jan 14, 2021

Created on Jan 14, 2021

This example shows how to build a simple emoji-like face using SVG shapes and CSS. It displays a yellow circle with two black eye circles and a curved mouth path, all positioned within an SVG canvas. The code demonstrates basic D3.js selection and append methods, using `d3.select`, `d3.arc`, and attribute chaining to create and style the shapes. The mouth is generated with the D3 arc generator, which computes a path based on specified inner and outer radii and angle values. A single CSS file handles page margins and overflow settings.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes and Colors with SVG CSS

This example demonstrates how to create a simple face using SVG shapes styled with CSS. It shows a yellow circle with two black eyes and a curved mouth, all composed of basic SVG elements. The code uses D3 v5’s `select`, `arc`, and attribute methods to append and position the circles and path. The face is centered within an SVG canvas, with the mouth drawn using an arc generator specifying inner and outer radii and start and end angles. The styles.css file removes page margins and hides overflow.

LLHFO94

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example creates a smiling face using SVG shapes styled with CSS and D3. The code draws a yellow circle for the head, two black circles for eyes, and a path for the mouth using d3.arc() with defined inner and outer radii. SVG attributes like cx, cy, and r position each element relative to the 960x500 viewport. A coral background is applied to the SVG via D3's selection style method, demonstrating basic shape creation and attribute manipulation with d3.select and d3.append.

LLincolnBollschweiler

92% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example uses SVG and CSS to draw a smiling face, with a yellow circle for the head, black strokes, and two smaller circles for eyes. The mouth is created as a path using the d3.arc generator with a half-circle arc. D3 v5 selection and arc APIs are used to append and style SVG elements, while CSS sets the body margin and hides overflow on the page. The example demonstrates basic shape creation, attribute manipulation, and a custom arc path in a 960×500 viewport.

Ss-janibekova

92% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

A yellow circle with a black outline forms a smiling face, featuring two small black-rimmed eyes and an arc-shaped mouth. Built with D3 v5, the example uses SVG elements and CSS styling to create the shape. The code applies d3.arc to generate the mouth path, while circle attributes position the face and eyes on a 960x500 SVG canvas.

Hhappybubblefish

92% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows a simple face made of SVG shapes, with a yellow circle for the head, black circles for eyes, and an arc-based path for the mouth. It uses D3 v5 selections and the `arc` generator to draw the mouth, while CSS sets the page background and removes margins. The SVG canvas is 500 by 500 pixels, and shapes are styled with inline fill and stroke attributes.

LLeandro Cruvinel Lemes

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

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

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

91% match