Skip to main content
SimilarExport ZIP
100%

Episode 1:Creating SVG of Wassily Kandinsky art

✓ Published1🌍 Public
Kkavitha G
Last edited May 23, 2022
Created on May 22, 2022
Forked from Hello VizHub

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Episode 1:Creating SVG of Wassily Kandinsky art

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.

JJetlinZ
87% match
Loading thumbnail…

Introduction of SVG

This example introduces SVG graphics by constructing a simple abstract composition. It shows a series of colored horizontal bands forming a background, overlaid with a vertical rounded rectangle and several circles arranged in a flower-like pattern. The piece uses pure SVG elements, including `rect` and `circle`, with colors defined through `linearGradient` defs. These gradients use different rotation angles to create varied shading on the circles. The code is authored specifically for a React environment, but the rendering is handled entirely by the browser's native SVG support, with no external libraries involved.

SSimran
79% match
Loading thumbnail…

Episode 1: SVG Fundamentals

This example presents a minimal HTML page that introduces SVG fundamentals, with an empty inline `<style>` block and an `<svg>` element placed directly in the body. It demonstrates the basic structure for embedding SVG in a web document, using plain HTML and CSS without any JavaScript libraries. The page serves as a starting point for learning how to create and style vector graphics, referencing the React Starter as a companion resource. The code shows no interactive behavior or data binding, focusing solely on the static scaffolding required for SVG rendering.

PPaul B
77% match
Loading thumbnail…

Fork of Introduction of SVG

This example demonstrates the visual possibilities of raw SVG path data, presenting a grid of abstract, gradient-filled geometric polygons and overlapping shapes across a 906x548 canvas. It showcases how SVG elements, including `<path>`, `<defs>`, and animated gradients with `<animate>`, can create complex layered compositions without external charting libraries. The code, part of a React project, uses declarative SVG markup with CSS and JavaScript in an HTML page, featuring rotating radial and linear gradients (e.g., `rebeccapurple` to `aliceblue`) for dynamic color transitions. The rendering is purely SVG, relying on hand-coded path coordinates to construct an intricate visual collage.

Eelisabet@pitch.io
77% match
Loading thumbnail…

SVG Introduction

An SVG introduction demonstrates basic shape drawing within an HTML page, featuring rectangles, circles, a polygon, and a line rendered directly via SVG markup. The example uses raw SVG elements like `<rect>`, `<circle>`, `<polygon>`, and `<line>` with CSS styling properties for fill, stroke, opacity, and rounded corners. No external libraries are used; the visualization relies solely on static SVG attributes and inline styles, showcasing fundamental vector graphics capabilities in a React-agnostic HTML context.

Kkwambokar
77% match
Loading thumbnail…

SVG fundamentals_Episode 1

This example demonstrates the foundational structure of an SVG-based data visualization page. It renders a minimal HTML document that links to external CSS and JavaScript resources, establishing the scaffolding for drawing with SVG elements. The code relies on standard browser technologies—HTML, CSS, and JavaScript—without any external data sets or charting libraries. The page currently contains only the document skeleton with an empty body, serving as a starter template for future SVG graphics. The implementation uses raw markup and scripting rather than a framework, though the accompanying README references a React starter alternative for comparison.

SSadhana Arunkumar
77% match
Loading thumbnail…

SVG Shapes

This example demonstrates basic SVG shapes—circles, rectangles, and lines—rendered directly in a React application using plain SVG markup. The code creates a static composition with various colored fills, strokes, and a grouped transformation that offsets and recolors shapes. It also includes minimal CSS styling for the page layout and a highlighted text class. The visualization uses no external libraries, relying solely on the built-in SVG elements and attributes defined in the HTML file, making it a simple illustration of declarative vector graphics.

HHeath Wilkinson
76% match
Loading thumbnail…

SVG fundamentals

This example demonstrates the foundational building blocks of SVG rendering with React, visualizing graphical primitives and basic shapes within an HTML page. The code sets up a minimal structure using a CSS-styled body and JavaScript, with React managing the DOM. It uses SVG elements to display geometric figures, showcasing how vector graphics integrate seamlessly into web components. The implementation relies on React’s component-based architecture to organize the SVG markup, providing a clear starting point for more complex data visualizations built on React and SVG APIs.

Aalshehi12087@gmail.com
76% match