Shapes with SCG and CSS

100%

Shapes with SCG and CSS

✓ Published0🌍 Public

Last edited Jun 28, 2020

Created on Jun 28, 2020

This example demonstrates how to create a smiling face using basic SVG shapes—circles for the eyes and an arc for the mouth—positioned within a 960x500 viewport. The code uses D3 v5’s `select` and `arc` functions to append elements to the SVG, while CSS styles handle page margins and a red highlighted text class. The arc is generated using inner and outer radii with a start angle of zero and an end angle of π, producing a half-circle smile centered in the composition.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example constructs a smiling face out of basic SVG shapes—circles, rectangles, and a path—drawn inside a 960 by 500 pixel canvas. The face is centered using a `transform` on a group, with static features like the yellow head, black outline, eyes, and an arc-based mouth. The eyebrows are rectangles that animate up and down using sequential `d3.transition()` calls, each lasting two seconds. The code leverages the D3.js v7 library's `select`, `append`, `attr`, and `arc` APIs within a React framework, rendering entirely as SVG.

Mmrdeevid

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

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

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

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

88% match

Loading thumbnail…

Shapes with SVG and HTML

This example demonstrates how to draw a face using basic SVG shapes—circles, rectangles, a polygon, and an arc—positioned relative to the canvas center. The code leverages D3 v5 selection and attribute methods (`select`, `attr`, `append`) to build each element, with the mouth created via the `d3.arc()` function. It uses a fixed 960×500 coordinate space, with hardcoded pixel offsets for facial features like eyes and eyebrows, all rendered as SVG within a React-free HTML page.

SSUPERMAN79355

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

87% match

Loading thumbnail…

Shapes with SVG and CSS

This example creates a simple animated face using SVG shapes and CSS styling. The face consists of a yellow circle with black stroke, two eyes, eyebrows, and a mouth path drawn with the `arc` function. The eyebrows animate up and down using D3’s `transition` method over two-second intervals. The code uses D3 v6 selections and SVG attributes to position elements relative to the center of the 960x500 canvas, with a standalone HTML page linking to a stylesheet and bundled JavaScript.

AAlbert

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

87% match