equiilibriumdigital

@equiilibriumdigital·4 public vizzes

Face 3

A smiling face rendered as an SVG using React and D3, with a yellow circular background, two black eyes, and a curved mouth. The D3 arc generator defines the mouth's shape by setting inner and outer radii and start and end angles. React components structure the drawing, with a BackgroundCircle component and an Eyes component placed inside a translated group element, while D3 v6 provides the arc path calculation.

Apr 24, 2021

Loading thumbnail…

Face - tweakage

A cheerful yellow smiley face rendered as a static SVG uses D3's `arc` generator to create a mouth and React to compose a set of positioned circles and rectangles for eyes and facial details. The face is centered within a 960 by 500 viewport, with the head drawn as a circle and annotated by two black eye circles, white highlights, and red rectangular accents. The code demonstrates a React functional component that outputs SVG markup directly, combining D3 shape utilities with React's declarative element creation.

Mar 31, 2021

Loading thumbnail…

Face 2

A smiling face rendered as a yellow circle with two black eyes, built using React and SVG. The component defines fixed dimensions and positions eyes symmetrically around the center. React 17 renders the SVG elements via `ReactDOM.render`, with the face’s size and eye placement determined by the viewport height and designated offsets. The code uses explicit circle elements for the head and eyes.

Mar 25, 2021

Loading thumbnail…

Face 1

A yellow circle with two black circular eyes forms a simple, static face. The SVG canvas is 960 by 500 pixels, and the face is centered by setting the main circle's `cx` and `cy` to half of these dimensions. The code uses raw SVG elements (`circle`) and CSS to remove default page margins. The JavaScript and HTML files provide a minimal page structure, though the visualization itself requires no scripting or external libraries.

Mar 25, 2021