motobernix@gmail.com

@bernidominguez7·4 public vizzes

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt artwork as an interactive SVG visualization. It shows a grid of horizontal and vertical lines masked into two overlapping circular areas, creating a geometric pattern. The code uses the SVG API to create elements programmatically, with `mask` elements defining the circular boundaries for each line set. Rectangles are generated in loops to build the pattern, and a CSS transition on `hover` shifts individual rectangles horizontally, adding a subtle interactive dimension. The rendering relies entirely on native browser SVG support rather than external libraries.

Jul 11, 2024

Loading thumbnail…

Fork of SVG Fundametal

This visualization shows a time series of page load performance metrics, displaying percentile bands (5–95% and 25–75%) as shaded areas alongside a bold median line. Animated circular markers highlight specific events—client releases and server versions—that slide upward from the chart’s baseline. Built with React and D3.js, the code uses `d3.svg.area()` and `d3.svg.line()` with basis interpolation to render smooth paths, while `transition()` animates marker positions. The data is loaded from JSON files containing daily percentile values and event annotations.

Jul 11, 2024

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example shows an animated SVG sunrise and sunset over a layered mountain landscape. The sky is a radial gradient that gradually shifts from aliceblue to indigo, while the sun moves along a vertical path from its center position downward. Three different gradient fills create depth across two landscape paths. The animation is driven by SMIL `<animate>` elements on the SVG attributes, with a 15-second cycle that repeats indefinitely. The visual demonstrates pure SVG fundamentals without external libraries.

Jul 11, 2024

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page using CSS for styling and JavaScript for interactive web content. It displays a centered message and multiple heading elements with varying colors, including inline styles and class-based rules. The code relies on standard HTML elements, CSS selectors, and JavaScript for structure and presentation, with no external libraries or data sources.

Jul 11, 2024