Fork of Fork of HTML Starter

100%

Fork of Fork of HTML Starter

✓ Published0🌍 Public

Last edited May 14, 2023

Created on May 14, 2023

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.

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…

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

86% match

Loading thumbnail…

Fork of HTML Starter

This fork of the HTML Starter renders a smiling, nearly smiling face using inline SVG shapes. It shows a large yellow circle with a black stroke as the head, and two smaller dark circles positioned inside as eyes. The graphic is centered on a 960 by 500 canvas with body text set to a 13em font, though the text is not visible. The example uses raw SVG elements—`<svg>` and `<circle>`—styled with a CSS rule that applies color to SVG circles. The rendering is purely vector, defined directly in the HTML, with no external data or JavaScript libraries involved.

Ccidtalbot

78% match

Loading thumbnail…

Fork of HTML Starter

This example displays a hand-drawn SVG illustration of a face alongside decorative text, rendered in a web page styled with CSS. The JavaScript-free visualization relies on CSS hover effects to change color, while the SVG paths remain static. Fonts are loaded from Google Fonts, and the document structure is defined in a single HTML file with a linked stylesheet. The design demonstrates basic SVG shape composition and interactive styling without additional libraries.

Vvalsorayksterob

77% match

Loading thumbnail…

Fork of Fork of HTML Starter with SVG

This example presents a basic SVG scene composed of circles, rectangles, lines, and a path, rendered within a 960x500 viewport. The graphic demonstrates primitive shapes and SVG grouping via the `<g>` element, with some elements transformed using the `translate` attribute. CSS styling applies a black stroke to the line group and a blue stroke with rounded joins to the path. The code uses plain HTML, SVG, and CSS, with no JavaScript libraries or data sources, serving as a minimal starter template for visualization work.

Vvmakker

77% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG path drawing with a large, centered page title. It uses raw SVG elements with path commands for quadratic Bézier curves (Q and T), cubic Bézier curves (C), and arcs (A), along with a green fill with opacity. The code includes commented-out examples exploring viewBox scaling and coordinate systems, plus a console log statement. The rendering relies entirely on native SVG within an HTML document, with no external libraries.

KKirsten Lund

76% match

Loading thumbnail…

Fork of Hello HTML

A simple SVG face renders in a 960×500 viewport using declarative circles: a yellow head with a black stroke, plus two smaller unfilled circles for eyes. The page uses raw HTML and SVG markup with no JavaScript libraries, instead relying on inline SVG elements and CSS to hide overflow and reset the body margin. It demonstrates basic vector shape composition in a static, self-contained webpage.

Ssimrangajsinghani

76% match

Loading thumbnail…

Fork of fork

A stylized SVG portrait of the Vision from WandaVision recreated by an individual user. The code builds a green face with a red mind stone, silver eye gradients, and a gold forehead gem using raw SVG shape elements like `<circle>`, `<rect>`, and `<path>`. It defines a linear gradient in `<defs>` and applies transforms within a `<g>` group. The design is inspired by a 2020 VizHub course on making a smiley, adapted into a larger 960×500 canvas.

AAnomaly89

76% match

Loading thumbnail…

Fork of Hello HTML

This visualization uses inline SVG to draw a simple, static composition on a 960x500 canvas: a large yellow circle with a black stroke, flanked by two smaller unfilled circles positioned to resemble a face or abstract figure. The code is plain HTML with embedded CSS and SVG elements, requiring no external libraries or data sources. It demonstrates basic SVG shape rendering and styling directly within an HTML page.

MMatt Woods

76% match