Skip to main content
SimilarExport ZIP
100%

Fork of Episode 1:Creating SVG of Wassily Kandinsky art

✓ Published0🌍 Public
JJetlinZ
Last edited May 28, 2022
Created on May 28, 2022

This example recreates a Wassily Kandinsky painting as an interactive SVG illustration, pairing the original artwork with a vector recreation built from geometric primitives. The composition uses layered shapes—triangles, lines, rectangles, and circles—filled with radial and linear gradients to mimic the painter’s abstract style. Written in React, the code renders directly to SVG using static JSX elements, with styling defined in CSS. It demonstrates how simple SVG shapes and gradient definitions can approximate a complex fine-art composition without external data or JavaScript libraries.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Episode 1:Creating SVG of Wassily Kandinsky art

This example recreates Wassily Kandinsky’s abstract art using hand-coded SVG shapes, including triangles, lines, rectangles, and circles, alongside gradient definitions. It juxtaposes the original image with the SVG rendering, demonstrating how geometric compositions and color gradients can be replicated programmatically. The code uses native SVG elements like `linearGradient`, `radialGradient`, `path`, and `circle`, all embedded within a static React-rendered page. No external visualization library is used; the artwork is built directly from SVG markup in the HTML file.

Kkavitha G
87% match
Loading thumbnail…

Fork of d3-svg-play-2

This example uses React to render a static SVG scene composed of basic geometric shapes, including circles, a rectangle, lines, and a custom path. The SVG elements are defined directly in JSX-like markup within the `index.html` file, with CSS transitions applied to circles inside a `<g>` group, causing them to smoothly change fill color on hover. The visualization demonstrates the interplay between SVG primitives, CSS styling, and interactive hover effects, rendered at a fixed 960 by 700 pixel viewport.

JJP Adams
79% match
Loading thumbnail…

Fork of Fork of HTML Startewr

This example shows a simple, hand-drawn composition of two circles and two rectangles inside an SVG canvas, using basic shapes with explicit coordinates and styling. The visualization serves as a minimal demonstration of SVG rendering, where a yellow-filled circle with a blue stroke and a red circle sit alongside a filled rectangle with a thick navy border. The code uses raw SVG elements directly in the HTML, while a second React-based implementation draws a stylized face with two eyes, showcasing how React can generate SVG markup programmatically. No external data is involved; it highlights fundamental shape primitives.

SShane Gibney
79% match
Loading thumbnail…

Fork of SVG Fundamental

This example demonstrates the foundational structure of an SVG-rendered visualization, using a minimal HTML page as its shell. It shows how an otherwise empty document body can serve as the canvas for scalable vector graphics, with no external data or interaction logic present. The code relies on plain SVG elements and attributes, with no JavaScript libraries or frameworks—neither D3 nor React—applied. Instead, it emphasizes the raw potential of CSS and JavaScript hooks that might later be added, as hinted by the linked starter resources. The rendering approach is purely static, reflecting a bare-bones starting point for more complex charting.

Ccatherine.kravchuk@gmail.com
78% match
Loading thumbnail…

Fork of Introduction of SVG

This example displays an abstract geometric composition built from layered SVG rectangles and circles. Seven horizontal color bands form a gradient-like background, while a vertical brown bar and five overlapping circles create a simple landscape or abstract figure. The graphic uses inline SVG markup with static positioning, and defines three linearGradient elements with different rotation angles to fill the circles with varied color transitions. The code relies solely on core SVG APIs, with no external JavaScript libraries or data sources.

AAsherpranayp
78% match
Loading thumbnail…

Fork of Svg exercise

This example uses React and inline SVG to render a fixed composition: a red circle centered at (350, 350) with three black lines radiating outward, a navy-bordered rectangle spanning the left region, and the italicized red text "Titan" positioned to the right. The SVG elements are styled using a CSS class defined in the page’s `<style>` block, which sets the text’s font size, fill, stroke, and stroke width. The code directly declares SVG shapes (`circle`, `line`, `rect`, `text`) with explicit coordinate attributes, demonstrating a static vector graphic created without external libraries or data binding.

RRakshith0405
78% match
Loading thumbnail…

Fork of Fork of HTML Starter with SVG

This example presents a basic SVG scene composed of circles, rectangles, lines, and a path, rendered within a 960x500 viewport. The graphic demonstrates primitive shapes and SVG grouping via the `<g>` element, with some elements transformed using the `translate` attribute. CSS styling applies a black stroke to the line group and a blue stroke with rounded joins to the path. The code uses plain HTML, SVG, and CSS, with no JavaScript libraries or data sources, serving as a minimal starter template for visualization work.

Vvmakker
78% match
Loading thumbnail…

Fork of HTML Starter

This example is a fork of the HTML starter, presenting a static SVG composition of overlapping rectangles, circles, lines, and text. It demonstrates the raw use of SVG elements alongside inline CSS and JavaScript within a single HTML file. The visualization is rendered entirely through SVG, with shapes defined by fixed coordinates and attributes, and the text element displays a message about the author's affinity for the format. It serves as a minimal, hand-coded illustration of SVG’s vector graphics capabilities without any external libraries or data.

Aamp1enator@gmail.com
77% match