Nico-Nico

@Nico-Nico·9 public vizzes

Sol LeWitt with D3

This example renders a generative art piece inspired by Sol LeWitt, using D3 to create a full-screen SVG composition. It builds a circular mask and overlays alternating horizontal and vertical black bars, demonstrating SVG manipulation through DOM creation methods. The code uses the `selection` import from D3 and constructs elements like `circle`, `rect`, and `mask` programmatically, with the browser’s viewport dimensions determining the canvas size. The result is a geometric pattern that explores the interplay of positive and negative space.

Jan 12, 2023

Loading thumbnail…

Sol LeWitt horizontal

This example renders a generative art piece inspired by Sol LeWitt, composed of horizontal and vertical black bars that intersect within a circular area of the canvas. The visualization uses the raw DOM API `document.createElementNS` to construct SVG elements directly, applying two distinct masks (`circle-mask` and `circle-mask-2`) to confine the bars to a central circle and to create a crosshatch pattern. The page is built with HTML, CSS, and JavaScript, with the SVG sized to the full browser window and the Share Tech font loaded from Google Fonts.

Jan 9, 2023

Loading thumbnail…

Sol LeWitt combined

This example renders a generative art piece inspired by Sol LeWitt, displaying a grid of vertical black bars on a white background. A circular mask, defined via SVG’s `<mask>` element, restricts the bars to appear only within a centered circle, creating a stark, geometric contrast. The code uses raw JavaScript and SVG APIs (`document.createElementNS`, `setAttribute`) to construct the shapes dynamically, with the mask composed of a white rectangle and a black circle. The bar spacing and width are fixed by loop parameters, producing a repeating pattern across the full viewport.

Jan 9, 2023

Loading thumbnail…

Sol LeWitt vertical

This visualization presents a generative art piece inspired by Sol LeWitt's geometric style. It displays a series of vertical black bars distributed across the canvas, but the pattern is interrupted by a central circular region. The circle acts as a mask, selectively revealing or hiding portions of the bars within its radius. The code uses raw SVG and JavaScript, creating elements via `document.createElementNS`, setting a mask with a circle shape, and dynamically generating the bars in a loop. The display is adjusted to fill the browser window's dimensions.

Jan 9, 2023

Loading thumbnail…

Pseudo line chart

This pseudo line chart displays five connected data points as a thick, black, rounded path across a white canvas. The rendering uses raw SVG with a single `<path>` element, leveraging attributes like `stroke-linecap` and `stroke-linejoin` to create the line’s smooth, chunky appearance. The chart relies on hardcoded coordinates within the SVG markup, with the visual styled using the Share Tech font loaded via Google Fonts.

Jan 6, 2023

Loading thumbnail…

Pseudo horizontal bar chart

This pseudo horizontal bar chart is a static SVG composition built directly in HTML. Four labeled bars (A, B, C, D) extend from a common left margin, each with a fixed height and varying widths to represent distinct magnitudes. The visualization relies on raw SVG `<rect>` and `<text>` elements styled with CSS, including a custom Share Tech font. A hover effect is applied to a small circle, changing its fill and stroke color via a CSS transition, though the chart itself is non-interactive.

Dec 31, 2022

Loading thumbnail…

Pseudo bar chart

The visualization presents a pseudo bar chart built from four rectangular bars of varying heights, each rendered as a static SVG element. It uses raw SVG `<rect>` shapes within an HTML page, with CSS styling for hover effects on circles. The chart relies on basic JavaScript and CSS, with no external charting library, instead encoding categorical data through bar lengths. The backdrop is a white canvas, and the bars are positioned to create a simple, unlabeled comparison.

Dec 31, 2022

Loading thumbnail…

Pseudo scatterplot

A pseudo scatterplot presents seven black circles scattered across a white SVG canvas, with a static "Hello world!" text label. The circles are not driven by data but manually placed. Each circle uses CSS hover states via the `hover_circle` class, which turns the circle white with a light blue stroke over 300ms, creating an interactive effect. The rendering is plain SVG within an HTML page, using no JavaScript or external libraries.

Dec 31, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape styling and interactivity through two circles rendered directly in an HTML document. The first circle uses static attributes for fill, stroke, and stroke-width, while the second employs a CSS class with a hover effect that transitions its fill color and adds a stroke over 300 milliseconds. The code uses plain SVG elements, CSS transitions, and inline JavaScript-free markup within a React-free environment, with the SVG canvas placed directly in the body alongside text.

Dec 31, 2022