Manuel Häußermann

@mhaeussermann·2 public vizzes

Let's Make a Face Part II

This example renders a yellow smiley face built from primitive SVG shapes, including circles for the face and eyes, an arc for the mouth, a polygon nose, and two lines for eyebrows. The React component composes these elements inside an SVG canvas, using a dynamically generated path from the d3.arc method for the mouth. All geometry is calculated from fixed constants, and the rendering uses React’s declarative JSX syntax with D3 v5 for the arc generator, producing a static two-dimensional vector illustration.

May 18, 2021

Loading thumbnail…

Smiley Face Part I

A hand-drawn yellow circle with two black eye dots forms the beginnings of a smiley face, centered on a blank 960 by 500 SVG canvas. The graphic uses raw SVG elements—a main `<circle>` with a thick black stroke and two smaller filled circles—without any JavaScript libraries or data binding. The rendering is static, relying on hardcoded coordinates to position the face at the canvas center, with the eyes placed symmetrically around it. This example demonstrates basic SVG shape construction in a standalone HTML file.

May 16, 2021