Yaseens fork 1

100%

Yaseens fork 1

✓ Published0🌍 Public

Last edited Feb 8, 2022

Created on Feb 8, 2022

A static SVG renders a yellow circle with a thick black stroke as a face, positioned at the center of a 960 by 500 canvas. Two small black circles serve as eyes, placed symmetrically above the center. A mouth is drawn using a `d3.arc` path with inner and outer radii, spanning a half-circle arc from π/2 to 3π/2. The visualization uses React for component structure and D3 v7’s `arc` API, with all shapes defined declaratively in SVG.

AI-generated description

Halfway towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

A React-rendered SVG face shows a yellow circle with black stroke, two dark eye circles, and an arc-based mouth created with d3.arc. The code uses React 17 and D3 v7, with the mouth path generated via arc start and end angles. Eye positions and radii are fixed constants, and the background circle’s radius derives from the viewport height minus stroke width. The visualization demonstrates basic SVG shape composition within a React component, using D3 only for the arc path generator.

Ppyee78

81% match

Loading thumbnail…

Fork of React Starter

This example shows a yellow circle with a black outline representing a mouth, rendered as a static SVG. The code uses React to create the SVG elements and leverages the `d3.arc()` API to generate the mouth’s path, which forms a semicircular arc. Rendered within a 960×500 viewport, the circle is centered using calculated coordinates, with the arc’s inner and outer radii set to 90 and 100. The visualization relies on D3 v6 for arc generation and React for component structure.

Vvvs1680

80% match

Loading thumbnail…

Fork of Fork of Hello HTML

This example shows a simple yellow circle with a black outline and two smaller black circles positioned as eyes, rendered as an SVG face. The visualization is built with a React component that uses React and ReactDOM to manage the page, while the SVG markup itself defines the shapes with explicit coordinates for the center, radius, and stroke properties. The code also sets up the HTML page with CSS styling that removes margins and hides overflow, and it loads the React libraries from a CDN before rendering the fixed 960 by 500 pixel SVG canvas.

AAynura Huseynova

80% match

Loading thumbnail…

Part 1

A yellow circle with two black eyes is rendered on an SVG canvas. The graphic is created using React and ReactDOM, with circle positions and sizes defined by variables for the center point, eye offset, and stroke width. The visualization demonstrates a simple, static composition built programmatically through SVG elements within a React application.

Ssteelerfan107

80% match

Loading thumbnail…

Fork of Hello HTML

A yellow circle with a black outline represents a face, featuring two small black eyes and a black arc for a mouth. The SVG graphic is built using React, with the shape’s geometry and the mouth’s arc path calculated using the D3.js `arc` function. The code defines the canvas dimensions and positions elements like the eyes and mouth relative to a central point within an SVG viewport of 960 by 500 pixels.

BBharadwaja

80% match

Loading thumbnail…

SVG

This example renders a smiley face using React and D3, composed of SVG circles and an arc path. The face includes a yellow background circle with a black stroke, two eyes positioned symmetrically, and a mouth created with d3.arc(). The code uses React components for the background and eyes, while a D3 arc generator computes the mouth’s path with specified inner and outer radii and angles. The visualization is static, with all elements centered within an 960×500 SVG canvas.

AAsif Nawaz

80% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A face rendered as a yellow SVG circle on a black outline, with two fixed black eyes and a mouth drawn as a thick arc, is centered on a 960 by 500 canvas. The example demonstrates basic D3 shape construction in a React component, using the D3 `arc` function to create the smile and manual SVG `<circle>` elements for the face and eyes. The drawing is produced with declarative SVG attributes and D3’s arc path generator, showing how geometry can be composed in a browser-based visualization.

EElena Ionescu

79% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example uses React and d3.v7 to render a single yellow circle with a black stroke, positioned at the center of an SVG canvas. The circle’s radius is calculated from the canvas height minus half the stroke width, using hardcoded width and height constants. The code imports `arc` from d3 but does not use it, and the visualization is static—showing only the initial step toward a smiley face, with no eyes or mouth rendered.

VVishnu Sharma

79% match