Magdalena Motyl

@za5dwunasta·4 public vizzes

Fork of Smiley Face Part VI

A grid of 18 randomly generated smiley faces demonstrates a modular React component approach, where each face varies in stroke width, eye position, eye radius, and mouth dimensions. The example uses React components for each facial feature and leverages D3’s `arc()` API to draw the curved mouth path within an SVG. All faces are rendered as SVG elements inside a shared container, producing a playful, varied pattern of cartoon faces.

Feb 23, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen yellow smiley face with black stroke, two eyes, and a mouth using React components and D3’s `arc` generator to create mouth and teeth paths as SVG. The face is centered with dimensions tied to the viewport, and the teeth arc is offset slightly downward via a transform. Built with React 16 and D3 v5, the SVG elements are defined declaratively in JSX, with circle radii and arc angles computed from window dimensions.

Feb 23, 2021

Loading thumbnail…

Smiley Face Part II

A smiley face rendered in yellow with black outlines shows a large circle for the head and two smaller circles for the eyes, though it lacks a mouth and is only halfway to a complete face. Built with React and embedded in an HTML page, the SVG graphic is defined declaratively using circle elements with explicit coordinates, sizes, and fill and stroke attributes. The code relies on react and react-dom libraries to render the static vector graphic into the document’s root element, with a commented-out SVG alternative indicating the minimal shape composition.

Feb 23, 2021

Loading thumbnail…

Fork of Hello HTML

This example displays a simple, static vector graphic: a yellow circle with a black outline and two smaller black circles, positioned on a solid red square. The visual is created entirely with inline SVG elements—specifically three `<circle>` shapes—nested inside an `<svg>` tag with a specified width and height. The code uses the SVG API directly within an HTML document, setting the shape’s radius, center coordinates, fill, and stroke properties. No external library or data source is involved; the rendering relies solely on the browser’s built-in SVG support.

Feb 23, 2021