Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Jul 6, 2019

Created on Jul 6, 2019

This example draws a yellow circle with two black eyes and a red arc mouth using SVG shapes. It demonstrates the use of d3’s `select` and `arc` APIs to append `circle` and `path` elements to an empty SVG canvas. The size and position of each shape are computed from the SVG’s width and height attributes. The code relies on D3 v5 and the bundled JavaScript file, while CSS styles define stroke and color classes but do not affect the rendering logic.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes and Colors with SVG and CSS

A yellow circle with black eyes and a white rectangular lower section forms a simple face. The example demonstrates fundamental SVG shape creation and styling using D3 v5 methods like `select`, `attr`, and `append`, along with the `arc` generator for the mouth path. CSS sets the page margin and overflow. The visual is built entirely with static SVG elements positioned via attributes, with no data binding or interaction.

Aadlankj

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

91% match

Loading thumbnail…

Shapes with SVG and CSS

A yellow circle with two black eyes and an arc-shaped mouth forms a simple face. The SVG shapes are created and positioned using D3 v5's `select`, `append`, and attribute setters. The mouth uses D3's `arc` generator to define a path, which is then animated with the D3 `transition` API over 200 milliseconds.

MMartin Palanca

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

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

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

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

89% match