Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published1🌍 Public

Last edited Feb 28, 2022

Created on Feb 28, 2022

A smiling face made of basic SVG shapes comes to life with animated eyebrows. The circle head, elliptical eyes, and arc-based mouth are drawn using D3 selections and the `arc` generator. Eyebrow rectangles move vertically through chained `transition` calls with different durations, creating a playful, asynchronous blinking effect. The visualization uses D3 v7 in a React project, rendering static SVG elements combined with timed animations.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

A smiling face rendered as an SVG inside an HTML page, built with React and D3. The visualization draws a large grey circle for the face, two blue circles for eyes, and a mouth using D3's `arc` function to create a path with specified inner and outer radii and angular range. The code uses D3 v7 selection and attribute methods to position shapes relative to the SVG's width and height, with a fixed 960 by 500 pixel canvas.

Mmukhopj

91% match

Loading thumbnail…

Fork of HTML Starter

A smiling face built from simple SVG shapes, rendered in React. The code imports React and ReactDOM, alongside the `arc` function from d3, which constructs the mouth path. A background circle, two eyes, and the mouth are composed within a translated `<g>` element. The eyes are separate React components, while the mouth uses d3's `arc` generator with specified inner and outer radii and angles. All shapes have fixed stroke widths and are centered on an SVG canvas.

Ppianojoel

90% match

Loading thumbnail…

Fork of My HTML Starter

This example renders a stylized, smiling face composed of basic SVG shapes using React and D3. The visualization shows a light blue circular background with enclosing black stroke, two white eyes with inner pupils and eyebrow arcs, a triangular nose, a red ellipse mouth, and pink blush circles. The code uses React components like `BackGround`, `Eye`, and `InnerEye` to structure elements, while D3’s `arc` generator creates the eyebrow and mouth paths with specified angles and radii. SVG lines, circles, ellipses, and paths are positioned via coordinate transforms, with all styling applied directly as SVG attributes.

Mmeghshah612

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

89% match

Loading thumbnail…

Fork of HTML Starter

A simple smiley face rendered with React and D3, using SVG shapes such as circles and a path. The face shows two black eyes and a curved mouth, defined with the D3 `arc` generator. The yellow face and blue stroke are drawn via React's JSX, while D3's `arc()` computes the mouth path. The example demonstrates a minimal React component structure with fixed dimensions and no interactivity, relying on static SVG elements positioned relative to the center of the canvas.

GGraydon88

89% match

Loading thumbnail…

HTML Starter

A friendly face built from basic SVG shapes, rendered with D3 v5 in a React framework. The code uses D3 selections to append circles, rectangles, and an arc-based mouth onto an SVG canvas. A yellow circle forms the head, black circles serve as eyes, and rectangles create eyebrows. A `transition().duration(2000)` animates the right eyebrow upward, while the left remains static, creating a subtle asymmetrical expression.

FFridayk7

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

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

89% match