aigioma

@aigioma·3 public vizzes

Let's Make a Face Part I

A yellow circle with a thick black outline serves as a face, and two smaller unfilled circles mark the eyes, leaving the mouth incomplete. This beginner example from the "Let's Make a Face" series uses raw SVG elements—`circle` nodes with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—to build a static, centered composition on a 960-by-500 canvas. The code relies on inline SVG markup directly in the HTML, with no JavaScript libraries or data sources, and renders in the browser via the SVG format.

Feb 20, 2020

Loading thumbnail…

Hello HTML

This example shows a single yellow circle rendered in an SVG container on a blank HTML page. It demonstrates the minimal structure required to embed SVG graphics directly in a web document, using inline SVG elements like `circle` with attributes for radius, position, fill, and stroke. The page uses no external libraries or JavaScript, relying solely on standard HTML and SVG syntax. The circle is centered slightly off-screen on a 960 by 600 canvas, with a black outline and a fixed stroke width.

Feb 20, 2020

Loading thumbnail…

Smiley Face Part 4

This example shows a stylized smiling face composed of SVG shapes, including a gradient-filled head, eyes, pupils, teeth, tongue, and hoverable eyebrows. Built with React and D3 v5, the face is assembled from reusable components like `Face`, `Eye`, `EyeBrow`, and `Mouth`, with the mouth and tongue shaped using D3’s `arc` generator. The eyebrows change fill and stroke width on hover via CSS custom properties. The design uses a radial layout, rotation transforms, and a linear gradient defined in SVG, all rendered in a React component with D3 utilities.

Feb 20, 2020