jeremyyq@gmail.com

@jeremyyq·3 public vizzes

Sol LeWitt in JS

This example renders a full-screen SVG of 100 vertical rectangles, spaced incrementally across the width, to approximate a minimalist scatterplot or grid composition reminiscent of Sol LeWitt’s geometric art. The page sets up an SVG namespace using `document.createElementNS` and dynamically appends each `rect` element with fixed width and height equal to the viewport. The code directly uses the `window.innerWidth` and `window.innerHeight` properties to size the canvas, with no external libraries. The result is a clean, repeating pattern that emphasizes structure and rhythm over data variation.

Jun 30, 2024

Loading thumbnail…

Pseudo Scatterplot

This pseudo scatterplot uses four gray rectangles to approximate the positions of plotted points, hinting at a bar-chart-like distribution rather than displaying actual data values. The SVG is drawn directly in HTML with explicit `width`, `height`, and `viewBox` attributes, and each rectangle is positioned via absolute `x` and `y` coordinates. The minimal styling, including a white background and uniform gray fills, suggests a static, non-interactive prototype for exploring layout fundamentals without any JavaScript libraries or data binding.

Jun 30, 2024

Loading thumbnail…

Fork of HTML Starter

This example demonstrates fundamental SVG shapes and attributes for building vector graphics in a web page. A single SVG canvas contains a red circle, a blue outlined rectangle, a navy line, and a black path, each positioned with explicit coordinates. The code uses raw HTML markup with inline SVG elements, including `<circle>`, `<rect>`, `<line>`, and `<path>`, styled through basic presentation attributes like `fill`, `stroke`, and `stroke-width`. No additional JavaScript libraries are employed, relying purely on the browser’s native SVG rendering to display the geometric primitives.

Jun 30, 2024