Skip to main content
SimilarExport ZIP
100%

Smiley Face

✓ Published0🌍 Public
NNicholas Stebbings
Last edited Jul 21, 2020
Created on Jul 21, 2020
Forked from HTML Starter

A yellow circle with a black outline forms the face, featuring two solid black eyes and rectangular eyebrows. The eyebrows animate by moving downward and then returning to their original position over a sequence of transitions. The mouth is drawn using the D3 `arc` function to create a curved path. The visualization is built with React and D3 v4, rendering all shapes as SVG elements within a centered group, with animated transitions applied via `transition().duration()`.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

smiley face

A yellow circle with black outlines forms a smiley face, complete with eyes, eyebrows, and a smiling mouth. The eyebrows animate by moving upward and then returning to their original position over four seconds. Built with React and D3.js v5, the visualization uses SVG shapes like circles and rectangles, with the mouth drawn via the `arc` function. The animation is achieved through chained `transition` calls that modify the eyebrow group's transform attribute.

MMichael Milano
95% match
Loading thumbnail…

Smiley Face

A yellow circle with a black outline forms the face, containing two white eyes with black pupils, a simple nose made of two connected lines, and a curved smile drawn with a D3 arc path. The SVG is built with React components, using d3.arc to compute the mouth’s path with specified inner and outer radii and angles. All shapes are positioned relative to a centered transform, with fixed dimensions and stroke widths defining the minimalist cartoon style.

Dddelorimier
93% match
Loading thumbnail…

Smiley

A smiling face is drawn as a yellow circle with black outlines, using two smaller circles for eyes and an arc-shaped path for the mouth. The visualization is built with React, where the SVG elements are declared in JSX. It uses D3’s `arc` function to generate the mouth’s path data, with explicit angles and radii controlling the smile’s curvature. The complete graphic is rendered to the page via `ReactDOM.render`.

BBlake Fitzpatrick
93% match
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
92% 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
92% match
Loading thumbnail…

Smiley Face

A yellow SVG smiley face with black eyes and eyebrows is drawn on a 960 by 500 canvas. Using D3 v6 selections and the `arc` generator, a mouth is created and shifted into place via a group transform. The eyebrows are rectangles that animate with chained `transition().duration(2000)` calls, moving downward then upward. The face’s features are positioned by computed width, height, and offset constants in a React-based D3 setup.

Ssravaniboggaram
92% match
Loading thumbnail…

Smiley Face

A yellow smiley face rendered in SVG animates its eyebrows up and down. The face is drawn with a large yellow circle, two smaller black circles for eyes, and a mouth using an SVG path. Eyebrows are rectangles that move via chained D3 transitions. The code uses D3 v5 selections to build and style the SVG elements, and `d3.arc` to generate the mouth path. The background is a light green-gray, and the animation repeats once on load.

Aazrinsani
92% match
Loading thumbnail…

Smiley Face - 1

This visualization displays a simple, cartoon-like smiley face composed of a yellow circular head with a black outline, two black eyes, and a curved mouth. Built with React and D3 v7, the face is rendered as SVG elements, with the mouth generated using the `d3.arc()` path generator. The code defines reusable components for the background circle and eyes, and positions all elements relative to the center of a 960×500 viewport.

Ggmishra4
92% match