Dominik Fin

@DominikFin·2 public vizzes

Fork of Fork of Let's Make a Face Part I

This example shows a static smiley face built with two eyes and a circular head, rendered as Scalable Vector Graphics (SVG) directly in HTML. It uses raw SVG circle elements—not a JavaScript library—to draw a yellow face with a black stroke and two smaller black circles for eyes. The face’s center and eye positions are computed from explicit coordinate values (e.g., 480, 250 for the head, 350, 180 and 600, 180 for the eyes), with commented notes indicating how to center elements using width, height, and stroke-width. The work is a fork of a prior “Let’s Make a Face” exercise, focused on basic SVG shape placement.

Dec 12, 2023

Loading thumbnail…

Hello HTML

This example renders a simple yellow circle with two black-outlined circles as eyes directly onto an SVG canvas, creating a basic smiling face. The SVG elements are hardcoded in the HTML with explicit coordinates and styling attributes. The code loads React 18.2.0 and ReactDOM from unpkg CDN, and the JavaScript file imports React and ReactDOM, logging the ReactDOM object to the console. The page uses minimal CSS to reset body margin and relies on static SVG markup rather than dynamic React rendering for the visualization.

Nov 17, 2023