Aaron Dake

@aarondake·3 public vizzes

HTML Starter

This example demonstrates basic SVG path drawing within an HTML page, using red, green, and blue strokes to form line segments and a quadratic Bézier curve between labeled points A, B, and C. The SVG markup defines paths with the `d` attribute and circles for markers, styled with inline CSS for centered, oversized text. It renders directly in the browser without external JavaScript libraries, serving as a minimal template for static vector graphics.

Feb 5, 2020

Loading thumbnail…

Smiley Face Part III

A smiling face is rendered as a yellow circle with black outlines, featuring two eyes with offset pupils, a red nose, and a curved mouth with a tongue. The visualization is built using React components for each facial feature, composed within an SVG canvas. D3’s `arc()` generator creates the mouth path, while the entire drawing is centered via a translated `<g>` group. The code defines fixed dimensions and offsets to position all elements precisely.

Jan 26, 2020

Loading thumbnail…

Smiley Face Part VI

A yellow smiley face with black-stroked circular eyes and a dark mouth arc is drawn on a light background. The face is built using React components that render SVG elements, including circles for the head and eyes and a path for the mouth. The mouth path is generated with D3’s `arc()` function, which sets its inner and outer radii and angle range. The entire face is centered and positioned using an SVG transform, with dimensions fixed at 960 by 500 pixels.

Jan 26, 2020