Skip to main content
SimilarExport ZIP
100%

BUBU

✓ Published0🌍 Public
Hhimchan94
Last edited Sep 7, 2021
Created on Sep 7, 2021
Forked from Hello HTML

A yellow circle with a thick black outline is centered on an SVG canvas. Two small black circles serve as eyes, and a wide, dark arc forms a mouth. The face is composed using basic shapes, with two short black rectangles acting as limbs. Built with React and D3, the visualization uses D3's `arc` function to construct the mouth path and React's `svg` elements for the other features, rendered entirely as vector graphics.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Part 1 html only

A yellow circle with a black outline forms a smiling face, featuring two black eyes and a curved mouth drawn as an arc. The visualization uses React components to generate SVG elements, with D3's `arc()` generator computing the mouth path based on specified inner and outer radii and angle ranges. The face is centered on a 960 by 500 canvas, with all shapes positioned relative to that central point.

Jjackcaldwellnichols
80% match
Loading thumbnail…

Untitled

A yellow circle with a black outline represents a face, featuring two black eyes and rectangular eyebrows. The eyebrows animate vertically, moving down and back up over two seconds each, creating a surprised or blinking expression. The visualization is built with SVG primitives and animated using D3 v7's transition methods. The mouth is drawn as an arc path using D3's arc generator, and the layout is positioned using explicit coordinates.

Hharshb863
80% match
Loading thumbnail…

Document

This visualization renders a simple yellow face in an SVG canvas using React and D3. It centers the face with black-outlined circles for eyes and a D3 `arc` path for the mouth, positioned using offsets and radii. The background circle and facial features are drawn with React components, and the D3 `arc()` API generates the mouth's curved path. The SVG is 960 by 500 pixels, with the face centered and scaled to fit the height.

Iisaac k. kimura
80% match
Loading thumbnail…

Untitled

A yellow circle face with black-outlined eyes, animated eyebrow rectangles, and an arc-based mouth is rendered in SVG. The eyebrows slide downward and back upward over two sequential two-second transitions using D3's `transition` method. The visualization is built with React, uses D3 v6 functions `select` and `arc`, and centers all facial features via SVG group transforms.

RReekMajumder
79% match
Loading thumbnail…

React Starter

A cheerful cartoon face rendered in SVG shows a large yellow circle, two black eyes, and a dark arc-shaped mouth. The rectangular eyebrows animate upward and then back down over two seconds using chained D3 transitions. Built with React as the framework, the visualization uses D3 v5 selection methods, the `arc` generator for the mouth path, and `transition.attr` to update the eyebrow group’s transform.

Ddistortedlights
79% match
Loading thumbnail…

Hello HTML

This example displays a cheerful, cartoon-like face constructed entirely from SVG shapes, centered on a yellow circle. Built with React and D3 v7, the visualization demonstrates how D3’s `arc` API generates a curved mouth path within a declarative component structure. The face’s features, including its eyes and smile, are positioned via computed coordinates passed to reusable `Eyes` and `Mouth` components inside a container that translates the drawing to the canvas center.

GGabriel
79% match
Loading thumbnail…

D3.js

This example uses SVG and D3.js v5 to render a simple face composed of a yellow circle, two black eye circles, and a mouth drawn with an arc path. The circle is centered using a translated group element, while the eyes are positioned relative to the SVG’s width and height. The mouth is generated with D3’s `arc()` helper, specifying inner and outer radii and start and end angles. The code relies on d3-selection and d3-shape APIs, with data-driven attributes set explicitly rather than bound to a dataset.

Bbilalaamer
79% match
Loading thumbnail…

Untitled

A yellow face with black-outlined eyes and a smiling mouth is drawn using D3.js v6 SVG primitives within a React project. The face is centered on an SVG canvas, with circles for the eyes and an arc-generated path for the mouth. Animated eyebrows, also created with D3's arc API, transition vertically over two seconds, moving up and then back down, demonstrating the use of `transition().duration()`. The visualization showcases fundamental D3 selections, attribute manipulation, and SVG path generation through the `arc` function.

RReekMajumder
79% match