THE SVG WIZARD

100%

THE SVG WIZARD

✓ Published0🌍 Public

Last edited Oct 6, 2022

Created on Oct 6, 2022

This engaging visualization presents the face of Curran from a YouTube video, using a portrait pathway turned into a scalable, interactive SVG illustration. The author crafted the image path using GIMP's `To Path` feature, manually fixing the vector data before embedding the complex path `d` attribute into an HTML document. The visualization employs inline SVG with CSS transitions to create a playful hover effect: the face smoothly scales via `transform: scale()` over two seconds, then expands further on mouse hover. This example showcases the meticulous hand-tracing of a digital image into a lightweight, scalable vector graphic that invites interaction.

AI-generated description

A Little Fun with SVG and Curran's Picture from YouTube.

To create the Path I've used GIMP, removed the background, selected everything, Edit-> To Path. Fixed the path by hand. Than exported the Path to SVG.

I've also included mouse over to scale to it.

MIT Licensed

Similar vizzes

Loading thumbnail…

THE SVG WIZARD

This example uses SVG paths to trace a hand-drawn portrait of Curran from a YouTube video. The image data originates from a GIMP-generated path exported to SVG, with the path coordinates embedded directly in the markup. Hovering over the SVG triggers a CSS `:hover` rule that scales the graphic via the `transform` property, while a separate class applies a smooth transition. The page also includes a Gaussian curve SVG sourced from Wikimedia, demonstrating how SVG paths and XML-based vector graphics are constructed and rendered in the browser.

Hhassanaqeelkhan

89% match

Loading thumbnail…

Fork of HTML Starter

This example showcases a hand-crafted SVG path tracing the outline of Curran's face, which scales up smoothly on mouse hover using CSS transitions. The path data was generated in GIMP by converting a selection to a path and then refining it manually. The visualization is built entirely with raw SVG elements and styled with CSS, using the `transform: scale()` property on a `#scale` span to animate the image from 2x to 4x magnification over two seconds.

FFelipe Maion

75% match

Loading thumbnail…

Fork of Fork of HTML Starter

An SVG portrait of a person titled "Curran: The SVG Wizard!" is rendered as a blue vector path with a black outline. The path data was created by tracing a photograph in GIMP, manually fixing it, then exporting it as SVG. The image scales on hover using CSS transitions and transform properties, with a mouseover effect that enlarges it to four times its original size.

Llili463e

75% match

Loading thumbnail…

Curran's Face a La Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired face using a single SVG path that is revealed through an animated mask. The drawing, defined by a complex series of cubic and quadratic Bézier curves, is clipped by a black mask rectangle that grows to expose the face. The visualization relies on raw SVG elements created via the Document Object Model API, with CSS transitions controlling the mask’s expansion. No external libraries are used; the rendering approach is purely native SVG.

FFelipe Maion

72% match

Loading thumbnail…

SVG Playground

This example displays a single icon of two overlapping user silhouettes rendered as an SVG path. The visualization uses a fixed 24×24 viewBox and presents the graphic with a neutral black fill on a blank background. The code relies on raw SVG elements, including the `<svg>`, `<g>`, and `<path>` tags, with the path data defined by a complex `d` attribute. No interactive or data-driven features are present; it serves as a static showcase of hand-authored vector geometry within an HTML document.

CCurran Kelleher

71% match

Loading thumbnail…

Curran's a La Sol LeWitt Reproduction

This interactive SVG reproduction of Sol LeWitt’s “Face à La” uses a hand-drawn SVG path of a face as a mask over the full viewport. The mask’s fill starts black and likely reveals colored or animated content beneath, with CSS transitions on the mask’s transform for smooth movement. The code uses raw DOM APIs like `createElementNS` and `setAttribute` to build the SVG structure, with inline path data defining the face’s contours. Styling comes from an external stylesheet, and the example demonstrates generative geometric art through procedural SVG manipulation.

FFelipe Maion

71% match

Loading thumbnail…

Curran's Face a La Sol LeWitt - Bouncing

Curran's Face a La Sol LeWitt renders a geometric face as an SVG path, which is animated through a series of bouncing color-grid backgrounds. The face path is defined by a large string of cubic Bézier commands (`svgdata()`), scaled and positioned via `transform`. It is used as a mask for two layered groups of colored rectangles, with alternating visibility toggled every 1000ms. The animation uses raw DOM manipulation via `document.createElementNS` and CSS transition properties, with no external libraries.

FFelipe Maion

71% match

Loading thumbnail…

Fork of Curran's Face a La Sol LeWitt Reproduction 'Switchart'

This piece reproduces Curran’s “Face a La Sol LeWitt” artwork as an interactive SVG. The page uses a dynamically created SVG with a mask applied to a detailed path that traces the face’s outline, with tiny geometric shapes forming facial features. The CSS defines transitions on mask elements for potential animation. The visualization is entirely code-generated from path data, with no external data source, using raw SVG and DOM manipulation.

FFelipe Maion

70% match