Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Apr 8, 2019

Created on Apr 8, 2019

This example constructs a cartoon-like face from basic SVG shapes, including a large red circle, two smaller eyes, and a mouth drawn as an arc path. The visualization uses D3 v5 selection methods and the `d3.arc` generator to define the mouth’s geometry, while CSS sets a black background and removes page margins. Shapes are positioned and scaled dynamically based on the SVG’s width and height attributes.

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

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

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

90% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example uses SVG and D3 v5 to draw a smiling face with a yellow circle, two black eyes, and a mouth created with the `d3.arc` path generator. The page renders fixed geometric shapes in a 960x500 viewport, with CSS setting a red background and removing page margins. The face is centered using SVG coordinates, and the mouth is positioned through a `g` transform translation, demonstrating basic SVG shape construction and styling through D3 selection and attribute methods.

SShihao Ran

90% match

Loading thumbnail…

Shapes with SVG

This example uses D3 v5 to draw a simple, cheerful face entirely with SVG shapes. It creates a yellow circle for the head, two smaller black circles for eyes, and a semi-circular path for a mouth, all positioned precisely within the SVG canvas. The code directly uses the D3 `select` API to append shapes to the SVG and the `d3.arc` function to generate the mouth's path data. The visualization demonstrates fundamental SVG drawing capabilities with D3.

Rralevine

90% match

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

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

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

89% match