# Cloudinary SVG Placeholder

Dynamic SVG image placeholders, powered by Cloudinary & Potrace

Animated Outline

(Image from unsplash.com )

Try these images:

- Camera
- Surprised Cat
- Mountains

## How it works

1. Loads the Potrace Lib (6KB min+gzip)
2. Starts loading the full res source image
3. Meanwhile...
4. 1. Grabs a low res thumbnail from Cloudinary (~5KB)
   2. Uses Potrace to generate an svg from the thumbnail
   3. Colours and fades the SVG in as a crisp, full-size placeholder
5. Once full res loaded, overlays the svg with a nice fadein transition

## FAQs

- 🚫 No build step required!
- 🦉 The SVG is generated on the fly from the source image
- 🎒 It requires an extra network round trip (to fetch the thumb from Cloudinary)
- 🌈 You can pick any colour for the svg
- 💅 The SVG can be animated / styled however you want

Note: This demo artificially delays image loading by 1 second

Created by @jesstelford