Boye-Sida

@Boye-Sida·3 public vizzes

Let's Make a Face - mood

A yellow smiley face with olive skin and white outlines is rendered as an SVG in a React app, using static hard-coded values for positioning and size. D3's `arc` generator defines the mouth path, with its inner radius, outer radius, and angular range set to produce a downturned curve. The face is centered via a `g` transform, and the eyes are placed using offset coordinates, creating a simple mood-oriented data-less visualization.

Apr 30, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example is a React-based SVG rendering of a smiley face, built as a fork of an earlier visualization. It shows a yellow circular face with two black eyes and a mouth, centered on a full-window canvas. The visualization uses React and ReactDOM to construct and mount the SVG elements, with dimensions derived from `window.innerWidth` and `window.innerHeight`. The face’s features are positioned relative to the center via a `<g>` transform, and the code includes commented-out alternative markup for a static version.

Apr 30, 2022

Loading thumbnail…

Fork of Hello HTML

This example displays an empty SVG canvas with a yellow circle outlined in black, centered at coordinates (480, 250) with a radius of 150 pixels. The circle is drawn using static SVG elements inside an HTML page with no interactivity or dynamic data. The code relies solely on the native SVG API and HTML5 body styling, with commented-out circles indicating an unfinished or exploratory hand-editing process. The visualization is a minimal starting point for rendering shapes in the browser, using fixed dimensions of 960 by 500 pixels.

Mar 18, 2022