peter.sime@gmail.com

Fork of React & D3 Starter

Fork of React & D3 Starter

Fork of Smiley Face Max: React

Fork of Sol LeWitt Reproduction with D3

Fork of Blank Slate with Hot Reloading

Fork of Fork of Fork of Basic Circle Pack (Matthias) und Juliane

Starting off

This example demonstrates fundamental SVG shapes and CSS styling, showing how circles, ellipses, rects, and paths render in a 600x400 viewport. It uses the SVG `circle`, `ellipse`, `rect`, and `path` elements with attributes like `cx`, `cy`, `r`, `fill`, and `stroke`. A `<style>` block applies CSS transitions to circles and paths, making them animate on hover or active states, changing fill and stroke width over 5000ms. The markup is hand-written HTML with embedded SVG, rendered statically without JavaScript libraries or data sources.

Sol de Witt inverse masks

This example reproduces a Sol LeWitt-inspired drawing using two SVG masks to create inverse color effects. It shows a grid of horizontal and vertical black bars that intersect around a central circular area, where the bars appear inverted. The code builds the visualization entirely with SVG elements and the `createElementNS` API, defining two masks—one with a black rectangle and white circle, the other with a white rectangle and black circle—to control which bars display in each region. The bars are generated programmatically in loops, with no external libraries or data sources.

Fork of Sol LeWitt Reproduction - join them

This example reproduces a Sol LeWitt wall drawing using two overlapping SVG masks to create a circular composition of alternating black and white bars. The code applies one mask to a set of horizontal rectangles and a second, inverted mask to vertical rectangles, so the bars switch colors inside the central circle. All elements are generated dynamically with the SVG DOM API, and the work directly references LeWitt’s instruction-based art through code.

Sol LeWitt Reproduction - Vertical

This SVG reproduction of Sol LeWitt’s *Vertical* artwork overlays a grid of horizontal and vertical black bars on a white background, with a circular mask revealing the central intersection. Using the raw SVG DOM API, the code creates 99 horizontal and 99 vertical rectangles, each 10 pixels thick and spaced 20 pixels apart, then applies a `<mask>` containing a centered white circle on a black rectangle to clip the bars, leaving only the circular region visible.

Fork of Sol LeWitt Reproduction

A fork of a Sol LeWitt reproduction renders a minimalist grid of vertical black rectangles on a white background. All 100 rectangles share a fixed line width of 10 pixels and are spaced 20 pixels apart, extending the full height of the 960-by-600 viewport. The code constructs the SVG dynamically using the `document.createElementNS` API, setting width, height, and fill attributes without external libraries. The script’s commented-out sections reveal an unused mask-based variant, but the active visualization displays only the simple striped pattern.

Fork of Line Chart with Multiple Lines

This example shows daily air surface temperatures from 1940 through 2024, with one line per year plotted against day of year. The current year (2024) is highlighted in red with a thicker stroke, while historical years fade into a plasma color scale. The code uses d3.scaleLinear, d3.scaleSequential, d3.flatGroup, and d3.line with a defined accessor. The @curran/responsive-axes library renders the axes, while @curran/daily-surface-air-temperature provides the dataset.

Fork of Fork of Fork of Adil-sunRise-svg

This example shows an animated sunrise over a stylized landscape, using layered SVG paths and gradients to create a dynamic sky and terrain. The code relies on SVG’s native `<radialGradient>` and `<linearGradient>` elements, along with `<animate>` tags to cycle colors and sun position over 10- and 15-second intervals. Two bezier curve paths render the foreground hills, while a circle represents the sun, moving vertically across the scene. The piece is a self-contained HTML document, using no external JavaScript libraries, and is rendered entirely through SVG markup.