Shapes with SVGs

100%

Shapes with SVGs

✓ Published0🌍 Public

Last edited Mar 5, 2021

Created on Mar 4, 2021

This example builds a smiling face out of basic SVG shapes, using D3 v6 to generate and style the visualization. A yellow circle serves as the head, with two black circles for eyes and an arc-shaped path for the mouth. The code imports `select` and `arc` from D3, and uses the `arc()` generator to create the mouth’s curved path based on inner and outer radii and angular start/end values. The visualization reads an SVG element from the HTML and positions elements relative to its center.

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

94% match

Loading thumbnail…

Shapes with SVG

This example draws a simple emoticon face using SVG shapes rendered with D3 v6. It shows a yellow circle for the head, two black-outlined eyes, and a mouth created with the `d3.arc()` generator using specified inner and outer radii and angular ranges. The code selects the SVG element, parses its width and height attributes, and positions shapes relative to the center using numeric offsets. The face is constructed entirely with static, hard-coded dimensions and no external data source.

Aabhimanyu-dhar

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

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

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

90% match

Loading thumbnail…

Shapes with SVG and CSS

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.

ААртем Именин

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

90% match

Loading thumbnail…

Shapes with SVG and CSS

This example draws a simple smiley face using SVG shapes styled with CSS. The visualization creates a large yellow circle for the face, adds two smaller black circles for eyes, and uses CSS to set page margins and a large title font size. The D3 v7 library is loaded via UNPKG, and the code imports the `select` function from `d3` to select the SVG element and append circles with attributes for radius, position, fill, and stroke.

YYang Shun Yu

89% match