HTML Starter

100%

✓ Published0🌍 Public

Last edited May 25, 2020

Created on May 24, 2020

This example shows a yellow smiley face rendered in SVG, with eyes and eyebrows that animate into a surprised expression over two seconds. The face is drawn by centering a group in the viewport, then appending a yellow circle, black eye circles, rectangular eyebrows, and a mouth path using the D3 arc generator. Transitions on the eyes, eyebrows, and fill colors drive the animation, while the page is set up with a minimal HTML file and D3 v5 loaded via script tag.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

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

93% match

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

93% match

Loading thumbnail…

HTML Starter

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.

Ccsroysudarshan

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

93% match

Loading thumbnail…

HTML Starter

A smiling face rendered in SVG with animated eyebrows. Yellow circles form the head and eyes, while a D3 arc path shapes the smile. The eyebrows, built from rectangles, move up and down through chained `transition()` calls, altering their vertical transform over two seconds each. The example uses D3 v5 selection and arc API within a React framework, drawing directly to an SVG element defined in the HTML page.

GGuychgeldi

93% match

Loading thumbnail…

HTML Starter

A smiling face composed of SVG shapes animates its eyebrows upward over two seconds. The example demonstrates a minimal HTML page setup with D3 v5 and React, rendering a yellow circle for the head, two eyes, and an arc-based mouth. The code uses `d3.select`, `d3.arc`, and `transition().duration()` to animate rectangle elements representing eyebrows, all within a fixed 960×500 SVG canvas.

HHackMEAny

92% match