zaioris

@zaioris·15 public vizzes

Fork of Get it Right - 3: Sol Lewitssvat (JS)

This animated SVG piece generates Sol LeWitt-inspired geometric art using vanilla JavaScript. Vertical and horizontal bars in darkslateblue with beige strokes fill the canvas, while a mask reveals a horizontal white band across the lower portion. The `render` function rebuilds the SVG every 750 milliseconds, varying bar thickness between 30 and 45 pixels. Using standard SVG elements like `rect` and `mask`, the piece cycles through subtle structural permutations, echoing the minimalist aesthetic of the original exercise.

Dec 3, 2022

Loading thumbnail…

Fork of Fork of Martin's Fork of Sol LeWitt Reproduction

This piece generates a geometric abstraction inspired by Sol LeWitt, displaying a full-window SVG canvas filled with horizontal and vertical stripes. The stripes are masked by two overlapping SVG polygon masks—one triangle exposes horizontal bands, while a second, inverted triangle reveals vertical bands against a white backdrop. The work nests multiple masks and rectangles, creating a dynamic interplay of intersecting line grids. Built with JavaScript’s `document.createElementNS` for SVG elements, it computes layout dynamically from `window.innerWidth` and `window.innerHeight`, drawing 150 horizontal and 150 vertical rectangles to form the final composition.

Dec 3, 2022

Loading thumbnail…

Fork of Martin's Fork of Sol LeWitt Reproduction

This piece reproduces Sol LeWitt’s geometric art using only SVG primitives. A white triangular mask reveals horizontal black stripes, while an inverted mask reveals vertical white stripes, forming an overlapping lattice. The code uses the `document.createElementNS` API to build the SVG, and CSS masks (`url(#polygon-mask)`) to clip 150 horizontal and vertical rectangles. The composition adapts to the browser window dimensions.

Dec 3, 2022

Loading thumbnail…

Fork of Sol LeWitt Exercise 9 x 4

This visualization generates an abstract composition of black and white geometric shapes based on Sol LeWitt’s Exercise 9, using randomized values for varied line widths and circle radii. It renders vertical and horizontal rectangles, along with concentric circles, all masked against a white overlay. The piece is built with raw JavaScript and SVG DOM manipulation, creating elements like `<rect>`, `<circle>`, and `<polygon>` directly in the browser. Randomness is introduced via a custom `getRandomInt` function to vary dimensions and offsets, producing an ever-changing algorithmic artwork.

Dec 3, 2022

Loading thumbnail…

Fork of Curran's Face a Là Sol LeWitt - Getting it Right &B&W Game

This animated game challenges players to stop the screen when all Sol LeWitt-inspired patterns appear in black and white. The visualization uses SVG elements created via `document.createElementNS` with the `http://www.w3.org/2000/svg` namespace, rendering at full window size. Patterns consist of complex path data that flicker at varying speeds; clicking the screen checks whether all patterns are grayscale. Correct guesses increment the score and halve the timer, while wrong guesses reduce lives (displayed as icons). The game resets automatically after losing all lives, with CSS transitions controlling visibility changes.

Dec 3, 2022

Loading thumbnail…

Fork of Curran's Face a Là Sol LeWitt - Click TimerOnOff

This interactive animation presents an abstract portrait inspired by Sol LeWitt's geometric art, constructed from overlapping colored rectangles. A mask and its inverse, both formed from SVG path data of a face, constrain two independent sets of colored bars. Clicking toggles a timer that randomly changes the visibility of four background groups, creating shifting compositions. The piece uses raw JavaScript and the SVG API, with CSS transitions animating the visibility changes of the grouped rectangles.

Dec 3, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example creates a grid of thin horizontal and vertical rectangles using SVG, with two circular masks that reveal and hide portions of the lines. The pattern is generated through two loops that position 100 rectangles each, alternating their orientation. SVG mask elements define the visible area: one mask exposes a central circle of horizontal lines, while the other inverts the circle to show vertical lines outside the center. The rendering uses native JavaScript DOM manipulation via `createElementNS` to build the SVG structure dynamically, with no external libraries.

Dec 3, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using raw SVG and the DOM API. It displays a grid of horizontal and vertical stripes that intersect inside a central circle, creating a woven pattern. The code constructs the SVG via `document.createElementNS` and uses two SVG masks—`circle-mask` and `circle-mask-2`—to selectively reveal the horizontal and vertical bands. No external libraries are used; it relies solely on native browser methods and attributes.

Nov 29, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This fork of a Sol LeWitt reproduction renders a minimalist geometric composition using raw SVG and the DOM API. It shows a circular mask centered on the viewport, with a white outer ring and black inner circle, through which 100 horizontal striped rectangles are displayed. Each rectangle is created with `document.createElementNS`, assigned a fixed height and y-position, and clipped using an SVG `mask` element. The piece relies entirely on JavaScript and SVG primitives rather than any external libraries or datasets.

Nov 20, 2022

Loading thumbnail…

Fork of Fork test 2

This visualization displays a set of geometric shapes, including paths and rectangles, arranged in a static composition. The SVG elements use a defined color palette and some rectangles have hover effects, while a JavaScript script dynamically generates and appends an additional 100 horizontal rectangles, which overlay the existing shapes to create a striped pattern. The page is built with raw HTML, CSS, and JavaScript, using the React framework for the project structure, and renders entirely as SVG.

Nov 20, 2022

Loading thumbnail…

Fork test

This example displays a set of static geometric shapes composed of paths and rectangles rendered as SVG. The visualization uses plain HTML, CSS, and JavaScript, with CSS transitions applied to rectangles that change color and stroke width on hover. The layout shows a large outlined container with smaller filled blocks in orange, green, gray, and blue, using SVG elements like `<path>` and `<rect>` directly in the markup. It demonstrates basic SVG styling and interactivity without any external data or charting libraries.

Nov 20, 2022

Loading thumbnail…

Fork of Bob Ross Painting

This SVG scene depicts a landscape with animated gradients, a sun, and mountain silhouettes, split between a sky and ocean. The rendering uses scalable vector graphics with `<linearGradient>` elements for the sky, mountains, sun, and ocean, and SMIL `<animate>` tags to cycle colors, offsets, and the sun’s vertical position and opacity over a 14- and 20-second loop. The code defines paths with cubic Bézier curves for mountain shapes and a filled circle for the sun, all embedded in a 960×500 canvas without external libraries.

Nov 20, 2022

Loading thumbnail…

Fork of SVG Playing Around and Studying

This example generates a full-screen SVG landscape featuring a gradient sky, a sun, birds, and a tree, all composed with native SVG elements and CSS animations. The scene is built using JavaScript to create SVG nodes via `document.createElementNS`, while the sky and sun colors shift over a 24-second cycle through `animate` elements. Birds are duplicated and transformed using CSS `scale`, `translate`, and `rotate`, and the land and tree shapes are styled with inline CSS classes. The code references external SVG tutorials for the bird, sun, and land designs.

Nov 20, 2022

Loading thumbnail…

J SVG Fundamentals

This example demonstrates fundamental SVG rendering techniques, showcasing a structured diagram with geometric shapes—rectangles, paths, and lines—arranged in a schematic layout. Colored blocks in blue, gray, orange, and green sit within outlined panels, connected by dashed black guide lines with subtle drop shadows. The visualization uses raw SVG elements like `<rect>`, `<path>`, and `<filter>` definitions directly in HTML, with no external JavaScript libraries. It relies on SVG filters for shadow effects and fixed viewBox coordinates to lay out the composition, illustrating how static vector graphics can be constructed purely through declarative markup.

Nov 20, 2022

Loading thumbnail…

J Exercise 1

This visualization demonstrates a static composition of overlapping geometric shapes that form an abstract flag-like design, built entirely with Scalable Vector Graphics. The piece combines a large rectangle filled with a white-to-black linear gradient, overlaid with semi-transparent yellow, red, and blue bands, alongside a green circle and a rotated square. The only dynamic element is a thick red line that animates its horizontal endpoints back and forth, while also subtly shifting vertically through an SVG `<animateMotion>` path. The code relies on core SVG elements like `<rect>`, `<line>`, `<circle>`, and `<animate>`, with no external JavaScript libraries.

Nov 7, 2022