A RegEx Logo

100%

✓ Published0🌍 Public

Last edited Feb 26, 2020

Created on Feb 26, 2020

A rectangular logo built entirely from SVG primitives, layered to create a perspective effect of nested shapes. Four skewed rectangles in yellow, green, dark red, and blue form concentric trapezoids, with the white regular expression `/^$/\1` overlaid on the inner blue block. A skewed “RegEx” text label sits at the bottom. The design uses explicit `transform` attributes with `skewX` and `matrix` operations, rendered directly in inline SVG markup without any JavaScript libraries.

AI-generated description

A Regex Logo - trying to modifiy it but can't do a trapeze-like transform . hmm

MIT Licensed

Similar vizzes

Loading thumbnail…

A RegEx Logo

A RegEx Logo presents a browser-rendered SVG graphic that spells out "RegEx" using skewed, nested rectangles to create a layered, perspective-like design. The visual centers on the text "/^$ g \1," a regular expression pattern, displayed within the nested shapes. Rendered via inline SVG markup, the graphic uses `<rect>` elements with `transform` attributes (including `skewX`) to build the structure, while `<text>` elements apply stroke and fill styling. The illustration directly encodes its subject matter through typography and geometry, making the regex concept visually literal without additional data or interaction.

RRussell Watson

93% match

Loading thumbnail…

SVG First Attempt Fork, inpired by the Windows 95 Logo

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.

RRobert Johnson

67% match

Loading thumbnail…

WebPlatform.org SVG Logo

This example recreates the WebPlatform.org logo as a scalable SVG graphic, combining geometric line shapes and text in the Bitter web font. The logo displays eight colored segments—orange, red, cyan, purple, and blended hues—formed by reusing two path definitions with transforms and clipping paths. The SVG markup uses inline styles, `<use>` elements, and `<clipPath>` to layer the shapes precisely. The result is a crisp, responsive logo suitable for Retina displays, print, and presentation slides, with selectable text and potential for animation or interactivity.

Mmbostock

65% match

Loading thumbnail…

SVG Exercise

A yellow rectangle with thick navy borders forms the frame of this fixed-size SVG composition. Overlapping red and blue circles are centered inside, while four additional navy lines of varying thickness outline the rectangle’s edges using basic SVG primitives. The demonstration uses inline SVG shapes—`rect`, `circle`, and `line`—with explicit pixel coordinates, stroke widths, and fill colors, showing how layered vector elements can create a simple geometric pattern without any JavaScript or data-binding library.

CChristopher Campbell

65% match

Loading thumbnail…

Untitled

This example renders a small, abstract emblem composed of multiple dark navy and blue vector shapes. The SVG paths define a stylized form with curved strokes and a bold, geometric composition, suggesting a logo, crest, or artistic glyph. The page is built with a minimal HTML structure and uses CSS for overall page styling, including a monospace font and hidden overflow. The JavaScript defines the SVG elements, which are filled with specific color values like `#0A0F25` and `#476CEF`.

MMouad Et-tali

65% match

Loading thumbnail…

SVG - The HTML5 Logo

The SVG HTML5 logo demonstrates how vector shapes can be constructed entirely through path commands, with no external libraries. Six paths combine to render the familiar orange shield and white inner shapes using absolute commands like `M`, `H`, and `L`, alongside relative `m`, `h`, and `l` variants. Each path uses fill colors, and the `d` attribute encodes the drawing instructions. The example serves as a standalone illustration of the SVG specification, showing both coordinate systems for creating compact geometric logos.

AAxVa 🐍 💪

65% match

Loading thumbnail…

J Exercise 1

This visualization demonstrates a static composition of overlapping geometric shapes that form an abstract flag-like design, built entirely with Scalable Vector Graphics. The piece combines a large rectangle filled with a white-to-black linear gradient, overlaid with semi-transparent yellow, red, and blue bands, alongside a green circle and a rotated square. The only dynamic element is a thick red line that animates its horizontal endpoints back and forth, while also subtly shifting vertically through an SVG `<animateMotion>` path. The code relies on core SVG elements like `<rect>`, `<line>`, `<circle>`, and `<animate>`, with no external JavaScript libraries.

Zzaioris

64% 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

64% match