Yi Ning

@yining-w·5 public vizzes

Sol Lewitt Walkthrough

The Sol Lewitt Walkthrough is a demonstration of SVG shapes that recreates the geometric wall drawings of artist Sol LeWitt. It presents a clean, minimalist composition of black lines and forms on a white background, filling a 960 by 500 pixel canvas. The visualization uses raw SVG elements within an HTML document, structuring the artwork through static shape tags rather than dynamic data. The code relies on the browser’s native SVG rendering and the `document` API for layout, with no external libraries or animation logic, emphasizing the algorithmic nature of LeWitt’s instructions.

Jan 7, 2023

Loading thumbnail…

Episode 3 notes

This is a minimal SVG demonstration that sets up a blank 960-by-500 canvas with overlapping circles intended, though none are drawn in the final markup. The embedded JavaScript logs variable assignments, object properties, for loops, and ES6 arrow functions for addition and object construction, but contains syntax errors (e.g., `conole.log`, missing `const` in the person function) that prevent execution. The page includes a YouTube embed linking to tutorial content, but the primary output is the static SVG shell and console-based code examples.

Jan 7, 2023

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example shows a stylized sunrise and sunset scene. The animation has a sun circle moving vertically across the canvas, and a multi-layered landscape formed by quadratic and cubic Bézier paths. The sky and land use SVG gradients whose colors continuously cycle from light to dark. The implementation relies on SVG's native `<animate>` elements and radial and linear gradients, with no external JavaScript libraries.

Jan 3, 2023

Loading thumbnail…

Fork of SVG Fundamentals

A grid of dark red curving path lines emanates from the left edge, fanning outward diagonally across a white canvas. The paths use SVG `path` elements with quadratic Bézier curves (`Q` commands) and relative `t` commands to repeat horizontal offsets, creating a woven, ripple-like pattern. The strokes are set to `fill="none"` with varying dark red hex colors, while a single red circle appears at the top center. The SVG viewport is 960 by 500 pixels, and the body uses `margin: 0` and `overflow: hidden` to frame the graphic cleanly.

Jan 3, 2023

Loading thumbnail…

Smiley Face Part II

A yellow smiley face fills the browser window, rendered with layered SVG circles for the head, eyes, and pupils, plus D3 arc paths for the mouth and a maroon eyeshadow shape. The React component uses `d3.arc()` to construct the curved mouth and eyeshadow with configurable inner/outer radii and start/end angles. The face is centered by translating a group element to the viewport midpoint, and the pupil colors demonstrate layered fills. The visualization adapts to the window size, with the head radius based on half the viewport height.

Aug 1, 2022