A RegEx Logo

100%

✓ Published1🌍 Public

Last edited Feb 25, 2020

Created on Feb 25, 2020

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.

AI-generated description

A Regex Logo

MIT Licensed

Similar vizzes

Loading thumbnail…

A RegEx Logo

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.

RRussell Watson

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

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

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

63% match

Loading thumbnail…

SVG

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—positioned and styled directly within an HTML page. The code uses raw SVG markup embedded in the document, with transformations like `scale()` and `translate()` applied to groups, and CSS classes controlling stroke properties. Shapes inherit fill and stroke attributes from parent `<g>` elements, showing how SVG styling cascades. The rendering relies entirely on the browser’s native SVG engine, with no external JavaScript libraries, making it a minimal illustration of vector graphics fundamentals.

YY-oringe

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

63% match

Loading thumbnail…

SVG Me

This example displays two concentric circles rendered directly inside an HTML page using pure SVG. A large blue circle with an orange stroke and a smaller red circle with a teal stroke are positioned together to create a simple layered composition. The code relies on inline SVG markup with standard attributes such as `cx`, `cy`, `r`, and `stroke-width`, avoiding any JavaScript or external libraries. The shape definitions are written directly in the `index.html` file, demonstrating how vector graphics can be embedded without additional frameworks.

Wwgloss

63% match