Fork of Shapes with SVG and CSS

100%

Fork of Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Feb 7, 2021

Created on Feb 7, 2021

A yellow circle with black outline and a smile-shaped arc form a face, complete with two eyes and rectangular eyebrows. The eyebrows animate by translating up and down over two-second intervals using chained `transition` calls. Built with React and D3 v6, the visualization renders purely as SVG elements (circles, rectangles, and a path) styled partly through an external CSS file. The code explicitly sets SVG dimensions, uses `d3.arc` to generate the mouth path, and applies transforms to position facial features.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shape with SVG and CSS

This example uses SVG shapes and CSS to draw a cheerful face with a yellow circle, black eyes, and eyebrows, all rendered statically in a React-like D3 v5 setup. A path, built with the `arc` generator, forms a half-circle mouth. The right eyebrow animates via chained `transition().duration(2000)` calls, moving it upward and back, while other elements remain fixed. The code demonstrates basic SVG attribute manipulation with D3 selections, including `attr` and `transition`, within an HTML page that loads d3.v5.

CCassie-Xiao-Yu

90% match

Loading thumbnail…

Fork of Lets make a face with D3 js!

This example animates a simple cartoon face made of SVG shapes, including a yellow circle head, eyes, eyebrows, and a mouth drawn with an arc. The eyebrows move up and down repeatedly using chained D3 transitions that modify their transform attribute over two-second intervals. The visualization uses D3 v6 selection methods like `select` and `append`, along with the `arc` generator for the mouth path, all rendered inside a React project on a 960×500 SVG canvas.

KK V VINITHA

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

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

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…

Fork of Not so Smiley

This example shows a yellow circle with two black eyes and a curved mouth, creating a partial smiley face where the mouth arc is offset from the center. It is built with React 17 and D3 v6, using the `arc` function from D3 to generate the mouth path. The SVG is rendered with explicit width and height, and elements are positioned using transformation translations. The background circle, eyes, and mouth are drawn as separate SVG shapes, with the mouth placed in a distinct group at a specific coordinate rather than centered with the face.

Kkiruthiga1304

89% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A stylized face composed of geometric shapes is rendered in SVG. A yellow circle forms the head, with two black circles as eyes and a D3 arc function (`d3.arc`) generating a smile-shaped mouth path. The example is a React application using D3 v6 for the arc path generation, with SVG elements composed through reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`. The face’s features—eye offset, radius, mouth width, and stroke—are parameterized, and the final layout is centered at a calculated midpoint within a 960×500 viewport.

Uumgi

89% match

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example displays a smiling face constructed from SVG shapes, including a yellow circle, two eyes, and a mouth path with a curved arc. Built with React and D3.js v7, it uses the `arc()` function from d3-shape to generate the mouth with specified inner and outer radii and angles. Positioning is handled through SVG transforms, with the face centered on an 960×500 viewport. The code demonstrates proportional sizing by calculating radii relative to the center coordinates and stroke width.

UUzoemeka Okechukwu Innocent

89% match