Basics for SVG

SVG Patterns and Gradients

Currated List of SVG

Using SVG with CSS

Example of SVG Blocks

Example of SVG Markers

Examples of Kiwi image
png version kiwi png
svg version kiwi svg

Example of embedding the SVG

Example of SVG Data

Example of Icon
codepen

Interactive SVG

An Interactive Timeline A DAY IN THE LIFE of a Common House Cat 3-5AM PLAYTIME! MAKES A RUCKUS IN THE HOUSE ALL NIGHT. A gray kitten tangled in a ball of yarn. 30 MIN BEFORE YOUR ALARM WAKE UP! DECIDES YOU’VE HAD ENOUGH SLEEP. An orange kitten meowing loudly. WHEN YOU LEAVE TILL 5 MIN BEFORE YOU’RE HOME SLEEPY TIME LITERALLY SLEEPS THE WHOLE TIME YOU’RE GONE. A gray kitten curled up in a tight little ball, sleeping. 6PM GUILT FEEDING POOR, POOR KITTY. HOME ALONE ALL DAY. A sad, orange kitten staring down at an empty food bowl. 8PM CUDDLE TIME HELPS YOU WITH YOUR WORK EMAIL A gray kitten stretched out on a laptop.

Return to Main Section