eugorgomes@gmail.com

@Bissander·5 public vizzes

Sol LeWitt Reproduction by Igor

This example reproduces a Sol LeWitt-style drawing using raw SVG elements created programmatically. Alternating black and white concentric circles radiate from the center of the viewport, while a series of vertical black rectangles overlay the rings. A single SVG mask, defined with a white background and a central black rectangle, clips both the circles and the vertical bars. The code uses the Document Object Model API to create and append SVG tags, with no external libraries.

Jun 28, 2026

Loading thumbnail…

Pseudo Non-ribbon Chord Diagram

This example shows a circular layout of twenty blue nodes, with a set of randomly generated straight connections drawn between them to suggest a chord diagram without the usual curved ribbons. The visualization is built entirely with the native SVG API, creating circles for nodes and line elements for links. Node positions are computed manually using trigonometric functions to place each point evenly around a 150-pixel radius, while links are generated by selecting random pairs of nodes from the array. A solid blue color and consistent stroke width keep the rendering simple and compact.

Jun 28, 2026

Loading thumbnail…

Pseudo Treemap

A pseudo treemap uses nested rectangles to represent a flat list of values, dividing the rectangular canvas into proportional areas. The static SVG visualization groups data into three color-coded segments, with all rectangles sharing either a vertical or horizontal split. The visualization uses plain SVG `rect` elements positioned and sized by hardcoded coordinates, without JavaScript or a layout library, to approximate a treemap's visual hierarchy.

Jun 27, 2026

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates foundational SVG drawing elements using a static, hardcoded scene of rectangles and circles arranged in a grid-like composition. The visualizations, including overlapping shapes and a diagonal arrangement, are created directly with SVG elements such as `<rect>`, `<circle>`, and `<svg>`, styled with CSS for a clean presentation. It shows how absolute coordinates and basic shape attributes like `cx`, `cy`, `r`, `width`, and `height` define the layout, while stroke and fill properties control appearance. The code serves as a concise tutorial on constructing vector graphics without any external libraries.

Jun 25, 2026

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG drawing primitives, including circles, lines, and paths, all rendered within a single scalable vector graphic. It shows overlapping red and green circles, a navy diagonal line, and a third-path element with a complex filled shape. The visualization also contains a hidden rect element commented out, plus a separate stroked path. It uses the raw SVG API with shapes like `circle`, `line`, and `path`, configured via attributes such as `fill`, `stroke`, and `stroke-width` to display basic vector graphics output.

Jun 24, 2026