wasti

@wasti·6 public vizzes

Sol LeWitt Reproduction

This generative art reproduction displays a series of vertical SVG rectangles, each with a fixed width of 10 pixels, spaced 20 pixels apart across the full height of the browser window. It draws a minimalist, grid-based pattern reminiscent of Sol LeWitt’s wall drawings, created procedurally using the JavaScript DOM API `document.createElementNS` to build SVG elements. The code loops to place each rectangle, setting its `x` and `height` attributes dynamically based on the window dimensions, though a loop condition error prevents full execution. The piece relies on raw SVG manipulation rather than a charting library.

Jan 28, 2023

Loading thumbnail…

Fork of SVG shapes and animation sandbox

This example is a sandbox for playing with SVG shapes and animations. It depicts a colorful landscape of layered blue rectangles forming a stylized sky, with two distinct cloud groups moving along animated paths. A single pink flower is drawn with SVG paths and circles. The animation is built using SVG’s built-in `<animateMotion>` element to move the clouds over time, while the static shapes are defined with basic SVG primitives like `<rect>`, `<circle>`, `<ellipse>`, and `<path>`.

Jan 22, 2023

Loading thumbnail…

Adil-sunRise-svg

A sunrise and sunset are depicted through an animated SVG landscape. A central sun circle moves vertically, while the sky and two layered landmasses use gradients that cycle between aliceblue and steelblue or indigo. The animation relies on SVG’s `<animate>` elements to alter the sun’s `cy` position and gradient stop colors over 15 seconds, creating a continuous day-night transition without external libraries or data sources.

Jan 22, 2023

Loading thumbnail…

Fork of SVG Animations using CSS transitions

A single red SVG rectangle transitions its fill color and stroke width over three seconds when hovered. The example demonstrates CSS transitions applied directly to SVG elements via the `transition` property, with the `rect:hover` pseudo-class triggering the change. This static, inline HTML file uses no external JavaScript libraries, relying purely on CSS present in the style block. The rectangle starts with a thick black stroke and red fill, then shifts to green with a much thicker stroke on mouseover.

Jan 22, 2023

Loading thumbnail…

Fork of The Vision!

The Vision! is a static SVG portrait of the Marvel character’s face, built entirely with raw SVG primitives—circles, a rectangle, and a path—inside an HTML body. It recreates the character’s iconic green head, red face, and yellow forehead gem using layered geometric shapes with a white-to-cyan linear gradient for the eyes. The code relies on the SVG namespace and inline styling, with no external JavaScript libraries, and draws from the WandaVision series’ visual style as its data source.

Jan 22, 2023

Loading thumbnail…

vizhub_svg_basics

This example demonstrates the fundamental building blocks of SVG graphics, showing how basic shapes like circles, rectangles, and lines are rendered directly in an HTML page. The visualization uses inline SVG within an `index.html` file, illustrating both simple geometric elements and more complex paths constructed using SVG path commands. The code highlights CSS styling properties such as fill colors, stroke widths, and stroke colors, while the paths demonstrate both absolute coordinates (capital letters) and relative coordinates (lowercase letters) alongside various curve commands like cubic Bézier (C), elliptical arcs (A), and quadratic Bézier (Q). The example serves as a hands-on tutorial for creating vector graphics without external libraries.

Jan 21, 2023