Skip to main content
SimilarExport ZIP
100%

HTML Starter

✓ Published0🌍 Public
Ccsroysudarshan
Last edited Apr 10, 2020
Created on Apr 10, 2020
Forked from Smiling Face

This example draws a smiley face using D3 selections and SVG shapes. A yellow circle serves as the face, with black circles for eyes, rectangles for eyebrows, and a D3 arc path for the mouth. The eyebrows animate vertically through a chain of `transition().duration()` calls, moving up and down repeatedly. The code constructs the SVG elements by appending groups and shapes to the root `svg` element, using D3's `select` and `arc` functions.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

This example draws a cheerful smiley face as an SVG, with yellow circular head, black eyes, and a curved mouth arc. It demonstrates D3.js v5 selection and shape generation using `d3.select`, `d3.arc`, and attribute binding. The right eyebrow animates via chained `transition().duration()` calls, moving downward and back over two seconds. The 960×500 SVG canvas is centered with a `g` group transform.

AAWey95
96% match
Loading thumbnail…

HTML Starter

This example visualizes a smiling face composed of SVG shapes, including a yellow circle, two eyes, eyebrows, and a mouth drawn with a D3 arc path. The eyebrows animate upward and downward using D3 transitions over two-second intervals. The code uses D3 v5 selection methods like `select` and `append`, along with the `arc` generator, to build the static and animated SVG elements within a React framework.

PPerry
95% match
Loading thumbnail…

HTML Starter

This example shows a yellow smiley face rendered as an SVG, with animated eyebrows and a mouth that shifts between a filled arc and a thin outline. The face is centered using a translated group element, with circles for eyes and an arc-generated path for the mouth. Built with D3 v6 in a React framework, it uses `select`, `arc`, and chained `transition().duration()` calls to animate the eyebrow position and mouth shape over two seconds. The code demonstrates basic SVG attribute manipulation and data-free geometric drawing.

LLuisEnrique-Naica
94% match
Loading thumbnail…

HTML Starter

This example shows a stylized face built with SVG shapes, including a yellow circle for the face, black rectangles for eyebrows, and a mouth drawn using an arc path. The code uses D3.js v5 selection methods and the `arc` generator to create the smile. A series of chained `transition().duration()` calls animate the eyebrow group vertically, making the eyebrows bounce up and down repeatedly. The visualization demonstrates how to combine static geometric elements with simple D3 transitions for a playful effect.

Ccsroysudarshan
94% match
Loading thumbnail…

HTML Starter

This example uses D3.js v5 and React to render a simple SVG smiley face on a 960x500 canvas. The code draws a yellow circle for the face, two black circles for eyes, and a curved path for the smile. It uses D3’s `select` to target the SVG element and the `arc` generator to create the smile’s arc shape. The rendering approach relies entirely on static SVG attributes, with no data binding or interactivity.

Ssghanapuram
94% match
Loading thumbnail…

HTML Starter

This example shows a smiling face built from SVG shapes, including a yellow circle, rectangular brows and nose, white eyes, and an arc-based mouth. The right brow animates downward in two sequential transitions, creating a winking effect. The code uses D3 v5 selections to append and style elements, helper functions like `d3.arc` for the mouth path, and chained `transition()` calls for the animation. All graphics are rendered in a static SVG canvas with no external data.

Llanzosuarez
94% match
Loading thumbnail…

HTML Starter

This example renders a yellow smiley face on an SVG canvas using D3 v5 within a React framework. It draws the head, eyes, and mouth as circle and path elements, with the left eye animating through a two-stage `transition` that changes its radius and vertical position. The mouth is created using the `d3.arc` generator with fixed inner and outer radii. The code demonstrates basic SVG attribute manipulation and chained transitions.

LLeonid Stashevsky
94% match
Loading thumbnail…

HTML Starter

A yellow smiley face rendered as SVG shapes, with a blue circular head, black-outlined eyes, and a red arc mouth. Two rectangular eyebrows animate up and down in a continuous loop using D3 transitions. The face is centered via a translated group, with all elements positioned relative to that center. The code uses D3 v5 selection and arc generators, importing `select` and `arc` directly from the D3 module within a React project.

Ggregosaure
94% match