Skip to main content
Log in
K

Karreb94

@Karreb94·4 public vizzes

Loading thumbnail…

Loop Colori

Loop Colori generates a full-screen SVG composition of 200 vertical rectangles, each stroked with a thick border, cycling through a fixed palette of orange, red, purple, and blue. The code uses plain JavaScript with the DOM API to create SVG elements via `document.createElementNS`, setting attributes for position, width, height, fill, and stroke. A nested loop condition alternates the fill and stroke colors among the four array values, producing a striped, repeating pattern across the viewport. The example relies on no external libraries, only native browser APIs for rendering.

Nov 2, 2022
Loading thumbnail…

Prova JS

This example creates a full-screen SVG visualization using vanilla JavaScript, without any external libraries. It initializes a rectangular blue shape that spans the height of the viewport, with its width fixed at 10 pixels. The code uses `document.createElementNS` to construct the SVG element and its child rectangle, setting attributes for dimensions and fill color. The visualization demonstrates basic SVG rendering and DOM manipulation within a React framework, though it does not incorporate React components or state management.

Nov 2, 2022
Loading thumbnail…

Fork of SVG Creation

A spiral of nested quadrilateral polygons radiates outward from a shifting center point. Each frame draws one polygon, with its vertices skewed by angle-based transformations, producing a twisted, 3D-like ribbon effect. The polygons are stroked in a rainbow of hues (hue increments by 5 per iteration) on a black background, with fully transparent fills, so only the colored outlines are visible. This entirely uses the SVG DOM API via `document.createElementNS` and `setAttribute` to construct a black-background SVG of about 60 rings directly in the browser window.

Oct 31, 2022
Loading thumbnail…

Ciao Karreb

A simple interactive-free SVG visualization displays a green rectangle with a thick black stroke and a diagonal line crossing it on a 960-by-490 canvas. The example demonstrates basic React rendering of static SVG elements, using inline SVG attributes for positioning and styling. The code directly embeds SVG markup in the HTML body, with no external data or dynamic updates, serving as a minimal starter template for SVG visualization in React.

Oct 31, 2022