Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published5🌍 Public

Last edited Mar 11, 2021

Created on Mar 11, 2021

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.

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

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

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

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

80% match

Loading thumbnail…

Fork of HTML Starter

This example shows a large, centered Chinese character rendered as an SVG path, with two strokes animating in sequence from blue to black. The animation uses CSS `@keyframes` and `stroke-dashoffset` to create a drawing effect, with each stroke clipped to its shape. A lightgray grid of dashed lines provides a background, while the SVG `viewBox` and transforms scale and flip the coordinate system for display. The page is minimal HTML with embedded styles and a console.log, serving as a basic starter template.

JJack Elsey

79% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a simple SVG composition rendered directly in HTML, featuring a blurred pink circle, a curved stroked path, and a filled wedge shape arranged on a 500 by 500 canvas. The code uses native SVG elements such as `<circle>`, `<path>`, and `<defs>` with a `<feGaussianBlur>` filter to apply a soft glow effect. Styling is handled through inline CSS, while the shapes are positioned manually via `transform` attributes. No external libraries are used; the visualization relies purely on the browser’s built-in SVG rendering capabilities.

LLouise Høpfner

79% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG shapes and transformations within an HTML page. A circle and rect are rendered at their original positions, then duplicated with a vertical translation, blue fill, and red stroke. A group with class "lines" contains a line and a path, with CSS rules applying stroke styling to all line elements and a custom teal color to the path. It uses plain SVG markup with CSS classes and inline attributes, and does not employ JavaScript or external libraries.

Kkaddindr

78% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a hand-coded SVG composition of basic geometric shapes—circles, rectangles, lines, and a path—styled with CSS and rendered within an HTML page. It shows how SVG elements respond to presentation attributes like fill, stroke, stroke-width, and grouping via `<g>` tags. The code uses no external libraries, relying on native SVG and a small JavaScript console log. The dark background and vibrant shapes highlight how inline styles and CSS classes interact with SVG rendering.

Jjakesilly

78% match