Tatjana Dzambazova

@wildcattat·10 public vizzes

TD_SVG FUndamentals

This example demonstrates fundamental SVG shapes and animation within a single static HTML page. A green rectangle acts as the background and spins via an `animateTransform` rotation while its corner radius animates through an `animate` element. Overlaid on this are a blue line and three concentric circles in red, yellow, and green. The rendering uses raw SVG markup within `index.html`, with animation driven by native SVG animation elements rather than external libraries.

Oct 29, 2022

Loading thumbnail…

Fork of Fork of TD_Sol_Lewitt_animated

This example recreates Sol LeWitt’s geometric wall drawings using SVG and the Document Object Model (DOM) API. It displays a grid of horizontal and vertical stripes, masked by two overlapping circular regions that produce an inverted, framed effect. Two SVG `mask` elements, one with a black rectangle and white circle, the other with a white rectangle and black circle, alternately reveal the stripes within and outside the circle. The code generates 100 rectangles in each direction, setting their size and position programmatically.

Oct 29, 2022

Loading thumbnail…

Fork of TD_Sol_Lewitt_D3_c0ndensed

A generative art piece inspired by Sol LeWitt renders a grid of horizontal SVG rectangles, clipped by a circular mask to reveal a central disc of lines. Using an inverted second mask, vertical rectangles appear only outside the circle. The code employs D3’s `select`, `range`, and chained `join` methods to create and style the shapes, with the SVG `mask` element handling the clipping. The visualization relies on static data generation, filling the viewport with a minimalist, geometric pattern.

Oct 22, 2022

Loading thumbnail…

TD_Sol_Lewitt_D3

This example recreates a Sol LeWitt-inspired drawing as alternating horizontal bands of color that are selectively masked by a central circular hole. The visualization uses D3.js (v6.6.1) to generate 100 SVG rectangles, each with the full viewport width and a fixed height, while an SVG mask clips the shapes to reveal a circular area in the middle. The code demonstrates both a declarative D3 data-join approach and commented-out imperative DOM creation, rendering entirely in SVG without external data sources.

Oct 22, 2022

Loading thumbnail…

Fork of TD_Sol_Lewitt_FINAL

This interactive SVG artwork reproduces a Sol LeWitt-style drawing, displaying two overlaid grids of horizontal and vertical black bars. The horizontal bars appear inside a centered circle, while the vertical bars appear outside it, creating a contrast between the two regions. Using inverse masking via the SVG `mask` element, the code defines two complementary circular masks to selectively reveal each grid. The presentation is generated entirely through JavaScript and the native SVG DOM API, with a black-and-white geometric aesthetic.

Oct 21, 2022

Loading thumbnail…

TD_Sol_Lewitt_horizontal

This visualization reproduces a Sol LeWitt-inspired wall drawing using purely abstract geometric forms. It depicts a grid of thin, horizontal and vertical black lines overlaid on the full screen, with a circular white mask that reveals a central region where the horizontal lines are hidden, creating a distinctive circular void. The piece is generated entirely with SVG and the native DOM API, using `createElementNS` to construct shapes and a mask element with a `circle` to achieve the visual effect. No external libraries or datasets are involved.

Oct 21, 2022

Loading thumbnail…

TD_Sol_Lewitt

This example reproduces a Sol LeWitt-inspired drawing using raw SVG and JavaScript, without any external libraries. It renders 100 vertical rectangles, each 10 pixels wide, spaced 20 pixels apart, and filling the full height of the browser window. The rectangles are created dynamically in a loop using the `document.createElementNS` API and appended to an SVG element whose dimensions match `window.innerWidth` and `window.innerHeight`. The resulting pattern demonstrates a minimalist, systematic grid-based composition directly in the browser.

Oct 17, 2022

Loading thumbnail…

TD Smiley Face with React

This example builds a simple smiley face inside an SVG element using React, rendering a large yellow circle for the head and two smaller black circles for the eyes. The code relies on React 16.9.0 from a UMD build, logging the React object to the console before drawing the shapes with static SVG attributes. The SVG is set to a fixed width of 960 pixels and height of 500 pixels, with the head centered at coordinates (480, 250) and a stroke of 10 pixels. The project demonstrates basic React integration with SVG markup without any interactive or dynamic behavior.

Nov 9, 2021

Loading thumbnail…

td HTML Starter

This example demonstrates a minimal HTML page that renders the text “Hello HTML!” in a large, centered display using CSS. It shows how a static webpage can be styled with inline CSS and requires no external libraries. The code relies on standard HTML elements and CSS properties, such as `font-size` and `text-align`, to achieve the visual layout. No JavaScript or data sources are used, making it a pure static rendering of styled text.

Oct 31, 2021

Loading thumbnail…

TD Hello VizHub

This example demonstrates how to structure a minimal D3.js visualization project in VizHub, displaying the text “Hello VizHub!” in a large, centered font. It shows a complete workflow: loading D3 from a CDN, importing individual `select` from the D3 library, and using a local ES6 module (`myMessage.js`) to supply the text content. The code relies on the `d3.select` API to target a `div#message` element and set its text, while CSS handles the styling. No data manipulation or computing is involved; the focus is on module imports and embedding D3 efficiently.

Oct 31, 2021