SVG and CSS

100%

✓ Published0🌍 Public

Last edited Sep 1, 2020

Created on Sep 1, 2020

This example renders a smiley face as a static SVG graphic using D3 v6. It draws a yellow circle for the head, two black circles for the eyes, and a semicircular arc for the mouth via the `d3.arc()` helper. The dimensions come from the SVG’s width and height attributes, and a `<g>` element translates to the center for the mouth path. All shapes are positioned manually without data binding, and styling is handled through D3’s attribute chaining.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

SVGs and CSS

This example shows a yellow smiley face constructed from basic SVG shapes, including a circular head, two eyes, and an arc-shaped mouth. It demonstrates the fundamental approach of using d3-selection from d3 v6 to append and style SVG elements with attributes. The code specifically uses `d3.select`, `.append`, and `.attr` to position shapes relative to the SVG's width and height, while the `arc` generator creates the mouth path. The rendering occurs in a React-free HTML page with CSS styling applied directly through SVG attributes like `fill` and `stroke`.

Qquiqdome

91% match

Loading thumbnail…

SVG Smiley Face

A smiling face is drawn with SVG primitives, centered on a yellow circle with black outlines, including eyes, eyebrows, and a mouth. The example demonstrates basic D3 v5 shape generation and selection, using `d3.select` to manipulate SVG elements and `d3.arc` to create the mouth path. All elements are positioned relative to a central group, with geometric constants for spacing and offsets. The static visualization is built entirely in code, with no external data source.

Bbprokopowicz

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

90% match

Loading thumbnail…

smiley face with D3.js

This example draws a smiley face entirely with SVG shapes using D3.js v7. It creates a yellow circle for the head, two black circles for the eyes, and a mouth generated with the `d3.arc` shape generator. The arc uses `innerRadius`, `outerRadius`, and angular start/end values to form a crescent-like smile. All shapes are positioned relative to the SVG's width and height attributes, with the mouth translated to the center of the canvas.

GGreatGayatri

90% match

Loading thumbnail…

Smiley Face

This example draws a simple smiley face entirely with SVG shapes: a yellow circle for the head, two black circles for the eyes, and an arc for the mouth. The layout is computed from the SVG’s width and height attributes, with fixed constants for eye spacing and altitude. It uses D3 v7’s `select` and `arc` helpers, applying `attr` to position each element and `path` with an arc generator to define the mouth’s curved geometry.

Wwisam-ahmed

90% match

Loading thumbnail…

SVG

This example renders a smiley face using React and D3, composed of SVG circles and an arc path. The face includes a yellow background circle with a black stroke, two eyes positioned symmetrically, and a mouth created with d3.arc(). The code uses React components for the background and eyes, while a D3 arc generator computes the mouth’s path with specified inner and outer radii and angles. The visualization is static, with all elements centered within an 960×500 SVG canvas.

AAsif Nawaz

89% match

Loading thumbnail…

D3 first try

This example demonstrates basic SVG drawing with D3, showing a yellow smiley face composed of a circle, two blue eye circles, and an arc-shaped mouth. The code uses D3 v6’s `select` and `arc` utilities, appending SVG elements within a centered group. Coordinates and dimensions come directly from the SVG’s width and height attributes, with the face centered at 960×500. The arc generator creates the mouth by specifying inner and outer radii and angular ranges. No data loading or interaction occurs; it solely illustrates static SVG shape construction.

JJack Wu

89% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG uses D3.js to demonstrate fundamental DOM manipulation and animation. The code builds the face from primitive shapes—a yellow circle for the head, black circles for the eyes, a path for the mouth—and positions them via group transforms. Two animated eyebrows, implemented as rectangles, shift vertically using chained `transition() .duration(2000)` calls. The example reads SVG dimensions with `parseFloat`, uses helper methods like `select`, `append`, and `attr`, and draws the mouth with the `arc()` shape generator from D3's shape module.

Sssd4

89% match