SVG First Attempt Fork, inpired by the Windows 95 Logo

100%

SVG First Attempt Fork, inpired by the Windows 95 Logo

✓ Published1🌍 Public

Last edited Aug 29, 2021

Created on Aug 29, 2021

This example recreates the Windows 95 logo using only colored SVG `<rect>` elements positioned and rotated on a darkcyan background. The rectangles form the iconic four-pane window and a staggered pixel-like grid of colored and black squares, suggesting the logo’s waving flag effect. The code uses raw SVG attributes (`x`, `y`, `width`, `height`, `fill`, and `transform="rotate(-67)"`) within an inline `<svg>` container, with no JavaScript or external libraries. It demonstrates a beginner’s manual approach to geometric composition and pseudo-3D perspective through rotation.

AI-generated description

An beginner's attempt at making the window's 95 logo using just rectangles

MIT Licensed

Similar vizzes

Loading thumbnail…

Trying out some SVG

This example demonstrates two distinct SVG compositions. First, a simple hazard symbol—an orange square with two thick black diagonal lines—is drawn using primitive SVG elements within a fixed viewBox. Second, a larger, full-width SVG applies a linear gradient as a mask over a blue rectangle positioned atop a magenta one, creating a grayscale fade effect that reveals both colors. The code relies on native SVG tags including rect, line, linearGradient, and mask, with no external JavaScript libraries.

Ddmr

70% match

Loading thumbnail…

SVG creation setup https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_path

This example demonstrates how to construct a custom two-color logo using SVG path commands within an HTML document. It shows a stylized letterform or geometric design composed of two distinct filled shapes: one rendered in deep blue and the other in red-orange. The setup relies on raw SVG elements and the `path` API with absolute and relative drawing commands, including arcs, lines, and horizontal/vertical segments. Gray guide lines overlay the 16×16 viewBox to illustrate the coordinate grid, making the construction process visible, and the rendering approach uses standard inline SVG without any external libraries.

NN0taN3rd

70% match

Loading thumbnail…

Fork of Fork of Fork of SVG Creation

This example generates a colorful, geometric composition of overlapping, distorted quadrilateral polygons on a black background, creating a hypnotic, spiral-like visual effect. Each of the 60 polygons has its stroke color hue shifted incrementally, cycling through the spectrum. The code uses vanilla JavaScript to create SVG elements via `document.createElementNS` and sets attributes like `points`, `fill-opacity`, and `stroke` directly. No external libraries are used; the SVG is appended to the body, with the canvas size set to the full window dimensions.

RRahulray12

70% match

Loading thumbnail…

Fork of Fork of SVG Creation

This example generates a geometric animation using raw SVG polygons, constructing 60 quadrilateral shapes that shrink and shift diagonally across the viewport. Each polygon’s vertices are calculated from a moving center point, with size and position modified by index-based formulas. The code uses the DOM `document.createElementNS` API to append SVG elements directly—no D3 library is imported—and applies a rainbow stroke color via HSL values that increment per shape. The page fills the entire browser window with a black background, rendering the hollow outlines without fill.

CChartat aGlance

70% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates basic SVG shape composition by layering a rounded rectangle, a circle, and rotated text to create a simple monogram-like graphic. The code uses the SVG `<rect>`, `<circle>`, and `<text>` elements directly within an HTML document, with the text element anchored at the center and rotated slightly via the `transform` attribute. Styling is applied through CSS, setting a black stroke, a white fill for the circle, and the Averia Serif Libre font. The rendering approach is static SVG, with fixed dimensions of 250 by 250 pixels, showing a fundamental layout of overlapping geometric forms.

MMika Kutila

70% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes and positioning within a fixed 960×500 viewport. It shows a house-like structure composed of rectangles—a cyan-tinted door, two windows, and a larger body—all outlined in navy, beneath a red triangular roof formed by three connected line segments. The code uses plain SVG elements such as `rect` and `line` with explicit `x`, `y`, and `stroke-width` attributes, rendered directly in the HTML without any JavaScript or external libraries.

HHieuVu179

69% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates foundational techniques for creating vector graphics using native SVG elements embedded in HTML. The page displays a grid of alternating blue and red rectangles, overlaid with white, blue, and red circles, and a large red stroked circle, all constructed with explicit SVG tags. The code uses CSS to define a transition effect on rectangle elements, which animates their properties, and a hover rule that is invalidly written with an equals sign instead of a colon. The rendering is fully client-side through the SVG specification, with no external JavaScript libraries involved.

Dd-schwabe

69% match

Loading thumbnail…

SVG Creation

This example generates an abstract, colorful spiral of concentric quadrilateral polygons directly on a blank black page. It creates an SVG namespace using `document.createElementNS`, sets its dimensions to the full window, and appends it to the body. A loop of 60 iterations positions and sizes each polygon, with its stroke color derived from a hue value that increments by 5 per step. The polygons are rendered with transparent fills and thin, brightly colored outlines.

HHelip3

69% match