Smiley Face

100%

✓ Published4🌍 Public

Last edited Nov 4, 2020

Created on Oct 30, 2020

This example draws a cheerful smiley face as a static SVG graphic, composed of a yellow circle, two elliptical eyes, rectangular eyebrows, and a curved mouth generated with the `d3.arc()` function. The figure is centered by translating a group element based on the SVG’s width and height. The right eyebrow animates by using D3’s `transition().duration()` to shift its vertical position, moving down and back up over two seconds.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Smiley face

A smiling face built with SVG draws its features from geometric shapes, including a yellow circle, two eyes, and an arc for the mouth. The eyebrows are rectangles that animate upward and back down in an infinite loop using chained `transition` calls. The code uses `d3.arc` for the mouth path and D3 selections with `attr` to position elements. All shapes are appended to a centered `<g>` group within a fixed 960×500 SVG canvas.

Aalicjakot

93% match

Loading thumbnail…

smile face

A yellow smiley face is drawn in SVG, with black eyes, eyebrows, and a semi-circular mouth. The eyebrows animate by shifting their vertical position using chained D3 transitions. The face is constructed with D3 selections, using `circle` and `rect` elements for the features, and a `path` created with the `d3.arc` generator for the mouth. The entire group is centered and scaled, with the animation triggered on page load.

YY-oringe

93% match

Loading thumbnail…

Smiley Face with D3.js

This example renders a static SVG smiley face—yellow circle, eyes, nose, and an arc-based mouth—centered on a 960×500 canvas. D3.js v5 selections build the shapes, while the `arc()` generator defines the mouth and nose paths. The only animation is a repeated 2-second `transition()` that moves the eyebrows up and down, demonstrating D3’s chained transitions on SVG attributes.

YYifu Chen

92% match

Loading thumbnail…

Smiley Face

This example renders a classic yellow smiley face as a static SVG graphic using React and D3. The face is constructed from two circular eyes, an elliptical mouth, and a decorative eyelash path, all positioned around the canvas center. The code leverages React's declarative JSX syntax to define shapes, while D3's `arc` helper generates the mouth's curved path data. The SVG output is created with precise dimensions and stroke properties, resulting in a clean, scalable vector illustration.

ZzkArmor

92% match

Loading thumbnail…

Smiley

This example shows a cheerful smiley face rendered as a yellow circle with black outlines, featuring two eyes and a curved mouth centered on a 960×500 SVG canvas. The face is built using React components, with the background circle and eyes as SVG `<circle>` elements, while the mouth uses D3’s `d3.arc()` generator to create a path based on inner and outer radii and start/end angles. All elements are grouped and translated to the canvas center, with the mouth offset slightly via a transform.

Sszchee1

92% match

Loading thumbnail…

Smiley Face

A yellow smiley face is drawn with SVG using D3.js and React. The face includes a circle for the head, two eyes, and an arc-based mouth created with the `d3.arc` API. The eyebrows are animated vertically using D3 transitions, moving up and down over 1.5-second intervals. The code uses D3 selections to append and transform SVG elements, with all positions calculated from the SVG’s width and height attributes.

JJoseph Popoola

92% match

Loading thumbnail…

Smiley Face

This example renders a stylized smiley face as a static SVG diagram using React and D3. The face includes a yellow circle with a black stroke, two dark eyes, and a curved mouth generated with D3’s `arc()` generator. Three red ellipses, positioned and rotated via SVG transforms, form a bow tie at the bottom. All shapes are hardcoded with fixed dimensions and coordinates, and the visualization is drawn entirely in the browser without any external data source.

Sstephcue

92% match

Loading thumbnail…

Smiley face

This example displays a smiling face built from basic SVG shapes centered in the viewport. A yellow circle forms the head, with two smaller circles for eyes and a semi-circular arc for the mouth. The animation animates the eyebrows upward and downward in a looping transition, creating a playful expression. The code uses D3 v6’s `select`, `arc`, and `transition` methods to construct and animate the SVG elements within a React framework.

Vvuminhhieunus2019

91% match