sdasad

100%

✓ Published0🌍 Public

Last edited Aug 1, 2021

Created on Aug 1, 2021

A large yellow circle with a thick black outline and two solid black eyes forms a simplified smiley face, centered on a full-screen SVG. The face is missing a mouth, as noted in the README, making it an incomplete icon. Built with React and D3 v7, the visualization uses the `arc` import and basic SVG circle elements, with positions calculated from the window dimensions to ensure it scales to the viewport.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

smiley

A yellow smiley face rendered in SVG, with black outlined eyes and a curved mouth, is centered against a blank background. The visualization is built with React and D3’s `arc` generator to construct the mouth path, while circles are used for the face and eyes. The component sets explicit pixel dimensions and positions all elements relative to a central group, demonstrating a straightforward mapping of geometric primitives to a familiar icon.

BBVNPK001

86% match

Loading thumbnail…

smiley face

A smiley face rendered as a yellow circle with black stroke, two solid black eyes, and an arc-shaped mouth. The SVG is built with React components, using D3’s `arc()` generator to construct the mouth path. Dimensions and positions are derived from constants, with the face centered in a 960 by 500 viewport. D3 v7 and React 17 are loaded via UMD scripts, and the visualization uses declarative JSX to define circles and the path element.

Ttknaik

85% match

Loading thumbnail…

Smiley Face

A yellow circle with a black outline forms the face, containing two white eyes with black pupils, a simple nose made of two connected lines, and a curved smile drawn with a D3 arc path. The SVG is built with React components, using d3.arc to compute the mouth’s path with specified inner and outer radii and angles. All shapes are positioned relative to a centered transform, with fixed dimensions and stroke widths defining the minimalist cartoon style.

Dddelorimier

84% match

Loading thumbnail…

smiley

This visualization displays a classic smiley face constructed from basic geometric shapes, with a yellow circle for the head, black-outlined white eyes, and a curved mouth arc. Built using React and D3 v6, it leverages D3’s `arc()` generator to create the mouth path from inner and outer radii and start/end angles. The SVG rendering uses React components for circles and paths, with transforms positioning elements relative to the center of a 960x500 viewport.

LLouisBock

83% match

Loading thumbnail…

Hello React

A yellow SVG smiley face is centered in a 960-by-500 viewport. The code uses React to render and update the DOM, while D3’s `arc()` generator creates the mouth path. Circles draw the face, eyes, and outline, with the face’s radius and stroke positioned relative to the center. Static properties define all coordinates and radii.

Aanalyticalkiticat

83% match

Loading thumbnail…

smily

A yellow circle with a black outline forms a smiley face, featuring two solid black eyes and a half-circle mouth that appears as a filled arc. The example demonstrates basic SVG drawing with React by using D3’s `arc()` generator to create the mouth path, while circles are rendered directly as SVG elements. The layout centers the face using a translated `<g>` group, with fixed coordinates for the eyes and mouth radius, all within a 960×500 viewport.

JjordyBernard406

83% match

Loading thumbnail…

Smiley Face

A yellow smiley face rendered as an SVG in React, with two black circles for eyes inside a larger yellow circle outlined in black. The code uses ReactDOM to render the SVG elements, and imports the `arc` function from D3, though it is not used in the visible logic. Dimensions and positions are calculated from fixed width and height constants, with explicit offsets for eye placement.

AAun Zaidi

83% match

Loading thumbnail…

smile face I

A yellow smiley face rendered as SVG in a React component. The face consists of a large yellow circle with a black stroke, created by the `BackgroundCircle` component, and two small black circles for eyes. A mouth is drawn as a full circular arc using the D3 `arc()` API with an inner radius, resulting in a ring shape. The visualization positions all elements relative to the center of the SVG canvas using translation, with dimensions fixed at 960 by 500 pixels.

Yynwc2006

83% match