koslin

@koslin·4 public vizzes

Fork of Exercise 1: SVG Fundamentals

This example presents an animated landscape with a sun and layered terrain, all rendered as a single SVG graphic. The scene depicts a day-night cycle through a sky gradient and land gradients that transition colors, while the sun moves down and up again. The visualization is built entirely with SVG fundamentals, using `<svg>` elements, `<radialGradient>` and `<linearGradient>` definitions, and `<path>` shapes for the landscape. Animations are driven by SVG's native `<animate>` element, which modifies the sun's vertical position and the gradient stop colors over a 15-second loop. The data source is the embedded SVG code itself, with no external data files.

Jun 14, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction-

A generative SVG artwork reproduces a Sol LeWitt piece by filling a central circular mask with 100 horizontal bars. Two SVG mask elements define the visible circle and a second matching circle used as a cutout. The page constructs each bar as a `rect` element via the browser's `document.createElementNS` API, applying `url(#circle-mask)` to clip the stripes. Bars are evenly spaced at 20-pixel intervals, with a 10-pixel height, against a full-window black background, directly implementing the geometric composition in plain JavaScript and SVG, with no external libraries.

May 12, 2022

Loading thumbnail…

SVG Fundamentals v1

This example demonstrates the fundamentals of SVG rendering within an HTML page. It combines a styled message using CSS with a vector path drawn through the SVG `<path>` element. The path uses arc commands (`A`) with explicit radii, x-axis rotation, and large-arc-flag parameters to create a sequence of connected curves. The SVG canvas is set to 900 by 1100 pixels, and styling is applied directly to the path via the `stroke` and `stroke-width` attributes. The code shows how static SVG graphics can be embedded directly in HTML without external libraries or JavaScript.

May 8, 2022

Loading thumbnail…

Organization Network Graph

This example shows a minimal directed network graph with three nodes and two links, computing their layout through physical force simulation. It uses d3.forceSimulation, d3.forceManyBody, d3.forceLink, and d3.forceCenter to model attraction between connected nodes and repulsion between all nodes. The SVG circles are appended via d3.select, and the simulation emits tick events during layout updates.

Dec 27, 2020