Jjavellana

@Jjavellana·5 public vizzes

Smiley Face Part II

This example shows a yellow smiley face drawn as a set of SVG circles, with a large circular face and two eye circles positioned symmetrically around the center. The face is rendered using React and ReactDOM, with all shape properties—such as the face radius, eye offset, and stroke width—defined as JavaScript constants. The code builds an SVG element with a group transform to center the face at the midpoint of a 960 by 500 canvas, and it includes a commented-out static SVG version as an alternative starting point.

Feb 21, 2020

Loading thumbnail…

Let's Make a Face Part I (2nd try)

A smiling face rendered with SVG circles, built using React and ReactDOM. The example draws a yellow head, two black eyes, and sets up the structural constants and positions that would eventually form a smile, though the mouth is not yet drawn. The face is generated declaratively through JSX, with hardcoded numeric values for center, offsets, and radii, and it relies on React’s virtual DOM to update the SVG elements.

Feb 21, 2020

Loading thumbnail…

Let's Make a Face Part I

A single yellow SVG circle with a black stroke forms the head of a smiley face, accompanied by two smaller black circles for eyes. The example demonstrates basic SVG shape rendering within an HTML page, using hard-coded `circle` elements positioned via `cx` and `cy` coordinates. It is the first step toward a complete facial expression, with the mouth intentionally omitted. The code relies on standard SVG markup, not any JavaScript visualization library.

Feb 6, 2020

Loading thumbnail…

Smiley Face Part 1

A yellow circle with a thick black outline forms the base of a smiley face, accompanied by two smaller black circles positioned as eyes on an SVG canvas. The example demonstrates basic SVG shape rendering using the native `circle` element, with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The canvas is 960 by 500 pixels, and the face’s center is offset slightly upward to account for the stroke width. This is the first step toward a fuller smiley face, showing only the head and eyes without a mouth or other features. The rendering uses static, hardcoded coordinates rather than any data-driven or interactive logic.

Jan 18, 2020

Loading thumbnail…

Hello HTML

This example demonstrates a minimal HTML page that renders no visual content, serving as a blank canvas. The page consists of a basic HTML5 document structure with an empty body element. It uses no external libraries, APIs, or data sources—only standard HTML markup with a title. The example highlights the fundamental skeleton required for any web-based visualization, providing a starting point for projects that rely on client-side rendering. It represents the simplest possible starting point before adding any JavaScript, CSS, or data-processing logic.

Jan 18, 2020