Martin

@Webinaut·5 public vizzes

Martin's Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using only the SVG API and JavaScript. The artwork shows a grid of horizontal and vertical bars whose visibility is masked by two overlapping triangles, one white and one black, creating a dynamic interplay of line and shape. The code creates an SVG canvas sized to the browser window, then uses `document.createElementNS` to construct 150 horizontal and 150 vertical rectangles. Two SVG masks (`polygon-mask` and `polygon-mask-2`) selectively reveal or hide these bars, with the first mask containing a white triangle on black, and the second a black triangle on white.

Jun 18, 2022

Loading thumbnail…

Pseudo Visualisations

Pseudo Visualisations presents a curious, abstract shape constructed from layered orange, red, and deep blue SVG paths. The composition resembles a stylized, coiled form with irregular protrusions, rendered on a plain white background. The code defines these shapes using explicit path data within an SVG element, with colors applied via inline `fill` styles. The rendering approach relies on hand-coded coordinates and transformations, showcasing a static, artistic interpretation rather than a data-driven visualization. It appears to explore form and color through vector graphics.

Jun 13, 2022

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals - Sunrise

An animated sunrise and sunset scene in pure SVG. The sky’s radial gradient and the two layered landscape paths shift from aliceblue to indigo and steelblue, while a yellow sun circle moves vertically between 250px and 350px using `<animate>`. The gradients use `<stop>` elements with `attributeName` animations, and the land paths are drawn with cubic and quadratic Bézier curves. The composition cycles indefinitely over 15 seconds, simulating a day-night transition.

Jun 11, 2022

Loading thumbnail…

Creative with Basic SVG Shapes

A single rounded square icon, resembling a smiling face, is drawn entirely with an SVG `<path>` element. The example demonstrates how basic vector shapes can be combined into a creative illustration using raw path data. The page is minimal, with the shape centered and styled via embedded CSS. The rendering relies solely on the SVG API within an HTML document, showcasing the flexibility of defining complex forms through path commands. No external JavaScript libraries are used; the result depends entirely on the static SVG markup.

Jun 9, 2022

Loading thumbnail…

HTML Starter SVG Basics

This example demonstrates the minimal setup required to render styled text in a web browser using standard web technologies, displaying "Hello HTML!" centered on the page. The page uses plain HTML for structure, a CSS class for styling the large message, and relies on the browser’s default rendering without JavaScript or external libraries. The code includes a stylesheet section within the HTML file itself, showing how to apply basic text formatting.

Jun 8, 2022