HTML Starter

100%

✓ Published0🌍 Public

Last edited Mar 19, 2020

Created on Mar 19, 2020

This example shows a simple, playful SVG scene of a smiley face rendered on an HTML page. It demonstrates a basic interactive hover effect: moving the mouse over the smaller eye circle triggers the temporary appearance of the text “APPELUIT!!!!” on the canvas. The scene is defined entirely in static HTML and SVG, styled with CSS. The interactivity is driven by JavaScript using the D3 v5 library, specifically the `d3.select` method to attach `mouseover` and `mouseout` event handlers.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

HTML Starter

This example shows a simple SVG smiley face composed of geometric shapes, rendered within an HTML page. It includes a lavender background circle for the face, black circles for eyes, a path element for the mouth, and a yellow rectangle strip at the bottom. The code uses raw SVG elements such as `circle`, `path`, and `rect`, along with the `transform` attribute for scaling. Styling is handled through inline CSS, with the body set to center content and a large font size. The visualization demonstrates basic SVG rendering in a static, non-interactive format.

Ssrwezuva

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

86% match

Loading thumbnail…

HTML Starter

This example demonstrates a simple smiley face drawn with SVG circles. The code selects the SVG element using d3.select, dynamically reads its width and height attributes, and positions a large yellow circle as the face with two smaller black circles for eyes. It uses D3 v5’s selection methods like append and attr to build the shapes, while the SVG canvas is set to 960×500 pixels in the HTML file.

LLuce Liu

85% match

Loading thumbnail…

HTML Starter

This example shows a simple SVG smiley face composed of three circles rendered on an HTML page. The page demonstrates basic web technologies: CSS for styling the body, and JavaScript for logging to the browser console. The SVG markup uses explicit circle elements with attributes for positioning, radius, fill, and stroke. No external libraries are used, and the circles represent the face and eyes in a fixed 960 by 500 coordinate space.

CChad Saglam

85% match

Loading thumbnail…

HTML Starter

This example displays a simple yellow smiley face with black eyes and a mouth, drawn as SVG shapes on a 960 by 500 pixel canvas. It demonstrates the basic setup of a D3 visualization in an HTML page, using the D3 v5 library to select the SVG element and append circles and a path. The mouth is created with D3's `d3.arc` function, defining inner and outer radii and a semicircular angle range. The code imports `select` and `arc` from D3, and the page loads D3 from a CDN.

Ccedriccaijo

85% match

Loading thumbnail…

HTML Starter

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.

JJR

85% match

Loading thumbnail…

HTML Starter

This example shows a simple vector graphic of a smiley face, constructed from three SVG circles on a yellow background with a black outline. The HTML page uses inline CSS to remove the default margin and hide overflow, while a JavaScript snippet logs a message to the browser console. The circles are positioned with explicit `cx`, `cy`, and `r` attributes, and the SVG canvas is 960 by 500 pixels. The static scene relies on no external libraries, demonstrating the bare minimum structure for a web-based visualization.

Sshuttedove

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

85% match