prospirity

@19kubyshko88·11 public vizzes

Fork of Full Sol lewitt reproduction with D3 - not using class JVK

This example reproduces a Sol LeWitt wall drawing using D3.js version 7.9.0. It shows a grid of horizontal and vertical black lines overlaid with a circular mask, creating a pattern where the lines are visible only within the circle. The code uses D3’s `select`, `range`, and `symbol` APIs to construct the SVG elements and a star-shaped mask via `symbols[0]`. A second mask with a circle reveals the full line grid. The rendering is fully SVG-based, with dimensions set to the browser window size.

Jan 13, 2025

Loading thumbnail…

Fork of D3 Implementation

This fork of a D3 implementation generates a grid-like pattern of horizontal and vertical bars across the full screen, masked by two overlapping circles to create an intersecting visual effect. The first mask reveals the bars only within a central white circle on a black background, while the second mask inverts this, hiding a circular section of the vertical strips. Built with D3 v7 and rendered as SVG, the code uses `d3.select`, `d3.range`, and chained `.join('rect')` operations to append and position 100 rectangles in each direction, dynamically sized to the browser window’s width and height.

Jan 13, 2025

Loading thumbnail…

Fork of Sol LeWitt Reproduction

A fork of a Sol LeWitt reproduction renders a generative geometric composition in the browser. Two masks define a central circle: one isolates horizontal black rect strips, the other isolates vertical white strips, creating an overlapping grid. The piece uses the SVG API directly, constructing elements with `createElementNS` and applying masks via `setAttribute`. The design is purely algorithmic and responsive, with the SVG canvas sized to the full browser window. No external data source is used; the output is a self-contained parametric drawing.

Jan 13, 2025

Loading thumbnail…

JavaScript Basics

This visualization reproduces a Sol LeWitt art piece using an SVG canvas designed with a 960-by-500 pixel coordinate system. The drawing is generated entirely through JavaScript code that is commented out in the HTML file, with the script containing basic programming examples, such as variable declarations, functions, and object literals. The rendering relies on the raw SVG `<svg>` element and the browser’s JavaScript engine, with no external libraries or data sources; the visual output is determined solely by the geometric arrangement of shapes coded in the script.

Jan 13, 2025

Loading thumbnail…

JS Lesson

This example demonstrates a minimal HTML page that embeds an inline SVG element containing a single circle, while using a JavaScript script to access and log the SVG node via `document.getElementById`. The code renders the circle as static SVG graphics with no interactive or animated behavior, serving as a basic introduction to combining HTML, SVG, and JavaScript. It relies on native browser APIs for DOM selection and console output, with no external JavaScript libraries. The visualization shows how simple geometric shapes can be defined directly in markup and referenced programmatically.

Jan 13, 2025

Loading thumbnail…

Fist Lesson Hello HTML

A single static SVG canvas displays primitive geometric shapes: two circles, a rectangle, a line, and a curved path. The HTML page applies CSS rules that animate shape properties, including fill color transitions and stroke-width changes on hover. The code uses raw SVG elements with inline attributes and styles, leveraging the `transition` property for smooth visual updates. The rendered artwork demonstrates basic vector graphics and interactive styling without any JavaScript libraries or external data.

Jan 10, 2025

Loading thumbnail…

Fork of Fork of Smiley Face Part II

This example uses React and ReactDOM to render a yellow smiley face as a static SVG graphic. The face consists of three circles—one large yellow circle for the head and two smaller black circles for the eyes—positioned using center coordinates derived from the window dimensions. The code defines specific offsets for the eyes and a stroke width for the head’s black outline, but the mouth is only present as commented-out SVG code. The rendering approach relies on JSX to construct the SVG elements dynamically.

Jan 10, 2025

Loading thumbnail…

Fork of Fork of Smiley Face Part II

A responsive smiley face visualization built with React and rendered as SVG, filling the entire browser window. The face is constructed from a large yellow circle for the head, two black eyes positioned symmetrically above the center, and a mouth defined by a stroke arc with a fixed radius. The code uses React 16.9 to declaratively compute the circle positions based on window dimensions, with all geometric values like eye offsets and mouth radius stored as constants. The rendering is handled via ReactDOM rendering JSX elements directly to an SVG container.

Jan 10, 2025

Loading thumbnail…

Fork of HTML Starter

This example displays a single line of text, “выарыер HTML!”, centered on a blank page using cascading style sheets. The content is styled with a large, 13-em font size, and the page’s layout is defined entirely within a single HTML file. The implementation relies on a minimal HTML document structure, using CSS within a `<style>` tag to control the visual presentation of the text. No JavaScript or external libraries are present, and the text is static with no interactive elements.

Jan 10, 2025

Loading thumbnail…

Test Hello HTML

This example shows a minimal HTML page with a hardcoded Cyrillic text fragment and a title. The page loads no external libraries or stylesheets, containing only a static body paragraph. The document includes an embedded YouTube iframe player as part of the source repository’s README, but the rendered page itself displays no interactive or dynamic visualization. The code uses standard HTML5 elements (`<!DOCTYPE html>`, `<html>`, `<head>`, `<body>`) without any JavaScript, CSS, or data-processing APIs. The file is a bare-bones scaffold, demonstrating static content rather than a data-driven graphic.

Jan 10, 2025

Loading thumbnail…

Test Hello HTML

This example demonstrates how to create a minimal HTML page with an embedded YouTube video. The code uses standard HTML elements, including an `iframe` for video embedding and a basic page structure with a title. It serves as a foundational template for adding multimedia content to a web page. The page contains no JavaScript or styling, relying solely on HTML's native capabilities to render the video player and display the document title in the browser tab.

Jan 10, 2025