Skip to main content
SimilarExport ZIP
100%

THE SVG WIZARD

✓ Published1🌍 Public
Hhassanaqeelkhan
Last edited Sep 11, 2023
Created on Aug 18, 2023

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.

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.

Hassan: Added the svg of a Gaussian curve taken from wikimedia to see how it is created using svg paths.

MIT Licensed

Similar vizzes

Loading thumbnail…

THE SVG WIZARD

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.

MMunisbek-design
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
78% 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
74% match
Loading thumbnail…

SVG Fundamentals

A stylized vector illustration of a creature’s face is rendered using raw SVG path data, featuring layered curves and detailed interior shapes. The code defines two complex `<path>` elements directly in an HTML file, with an `<svg>` canvas sized at 1000 by 1000 pixels. The example demonstrates fundamental SVG rendering without relying on external libraries or data sources, showcasing the manual construction of intricate geometric forms through path commands.

SSam
71% match
Loading thumbnail…

SVG Demo

This example demonstrates basic Scalable Vector Graphics (SVG) shapes, including circles, rectangles, lines, and paths, rendered directly in an HTML page. The visualization uses inline SVG elements within an `index.html` file, with styling applied via an external `styles.css` stylesheet. The SVG canvas is scaled and translated using SVG transform attributes, while CSS classes like `.lines` and `.c3` control stroke colors, widths, and fill properties for grouped elements. The code highlights how SVG’s native coordinate system and CSS cascading rules combine to define a static, vector-based graphic.

GGabrz
71% match
Loading thumbnail…

SVG

This example shows basic SVG shapes—circles, rectangles, lines, and a path—arranged in a static composition with varied fill colors and stroke styles. The code uses plain Scalable Vector Graphics (SVG) elements directly in the HTML, including a `<g>` group with `transform` attributes for scaling and translation. A CSS class named `.lines` applies black strokes and rounded line joins to the path, demonstrating how styles can style SVG geometry. No JavaScript libraries are used, and no data is loaded; the rendering relies solely on static markup and CSS.

GGloria Higley
71% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamentals of SVG rendering and interactivity using a simple heart shape drawn with SVG path commands. The heart’s geometry is defined with arcs and quadratic Bézier curves within a 100×100 viewBox, while CSS handles layout centering and a hover effect that scales the shape and changes its fill color. The code uses inline SVG elements and CSS transitions for smooth animations. It shows how basic vector graphics can be created and styled without additional libraries, relying purely on the browser’s native SVG and CSS support.

IIndranil Biswas
71% match
Loading thumbnail…

SVG

A set of basic SVG shapes—circles, rectangles, lines, and a path—demonstrates vector rendering with inline styling and CSS classes. The example defines a `<g>` scale transform and nested groups to position shapes, using SVG presentation attributes like `fill`, `stroke`, and `stroke-width`. A CSS rule styles the `.lines` group and its path child. This simple gallery piece shows how SVG primitives combine with transforms and cascading styles without any JavaScript libraries.

DDD
70% match