Fork of Shapes and Colors with SVG and CSS

100%

Fork of Shapes and Colors with SVG and CSS

✓ Published0🌍 Public

Last edited Jun 1, 2022

Created on Jun 1, 2022

Forked from Shapes and Colors with SVG and CSS

This example shows a simple smiling face built from SVG shapes: a yellow circle for the head, two black circles for eyes, and a black arc for the mouth. The code uses D3 v7 selections and the `arc` generator from `d3-shape` to draw the mouth path, while CSS sets the page margin and hides overflow. All shapes are positioned relative to a centered `g` group, with explicit attributes for radius, spacing, and angles.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example draws a stylized face using SVG shapes in a 960x500 viewport. A yellow circle forms the head, with two smaller dark circles for eyes and an arc-based path creating a mouth, all positioned via absolute coordinates and a translated group. The code uses D3 v6 selection methods (`select`, `append`, `attr`) and the `d3.arc` generator to construct the mouth path with inner and outer radii and specified start/end angles. CSS rules define stroke styles for path elements, though the classes are not applied in the visible script. The rendering is entirely SVG, with D3 handling DOM manipulation.

Mmedhedijebara

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

91% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how to build a simple face using SVG shapes—a yellow circle for the head and two smaller black circles for the eyes—positioned dynamically within an SVG canvas. The code selects the SVG element with d3’s `select` method, parses its width and height attributes, and appends the circles using method chaining with `attr` calls. Styling is applied via CSS classes and inline attributes, while the D3 v5 library is loaded from a CDN to handle the DOM manipulation.

Nnpk2001

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

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…

Fork of Shapes and Colors with SVG and CSS

This example shows a yellow smiley face drawn with SVG shapes—circles for the eyes, rectangles for the eyebrows, and an arc-based path for the mouth—that animates through D3 transitions. The code uses d3 v5’s `select` and `append` methods to build the SVG hierarchy, with `transition()` and `attr` chaining to sequentially move the eyebrows and morph the mouth’s inner radius. The face is centered via a translation on a group element, and the mouth path relies on `d3.arc()` with changing `innerRadius` values. Styling is applied through CSS, while the animation logic is driven entirely by D3’s transition API.

Rrjohnson5016

90% match