https://cassie.codes

lt me

https://cassie.codes

What animation library did you use for that?

What animation library should I learn?

it depends...

How do I do that?

SVG...

tell me...

SVG...

illustrations

animation!

Vectors

flat graphics

icons!

illustrations

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1377.8 1217.05">
  <g id="Layer_2" data-name="Layer 2">
    <g id="_ÎÓÈ_1" data-name="‘ÎÓÈ_1">
      <g>
        <g>
          <rect x="556.69" y="950.46" width="247.19" height="235.53" fill="#e8e8e8"/>
          <rect width="1377.8" height="968.51" rx="23.35" fill="#fff"/>
          <rect x="35.12" y="25.66" width="1306.21" height="869.9" fill="#6a67ce"/>
          <rect x="469.23" y="1163.02" width="422.12" height="54.03" fill="#fff"/>
        </g>
        <rect x="181.41" y="131.27" width="966.27" height="661.8" fill="#dde7fe"/>
        <path d="M183.43,350.21s126.47-75.37,346.18-31.43,421.84,35.83,426.24-187.51h191.83V759H181.41Z" fill="#fc636b"/>
        <path d="M1147.68,653.39V793.07H181.41V460.75c65.8-29.31,152.18-45.87,255.92-17.83,264.2,71.4,136.22,227.76,380.1,275.73C985.94,751.8,1039.5,677.26,1147.68,653.39Z" fill="#f77986"/>
        <path d="M896.68,729.15c-23.64,0-49.91-2.49-79.67-8.34-122-24-151.72-74.95-183.19-128.9C602,537.27,569,480.78,436.76,445c-88.66-24-174.27-18-254.46,17.71l-1.78-4c81.13-36.14,167.72-42.18,257.38-17.95C497.81,457,543,479.07,576,508.31c29.26,25.91,45.71,54.11,61.62,81.38,31,53.07,60.19,103.19,180.23,126.81,51.08,10,96.13,10.93,137.73,2.7,37.12-7.33,68.27-21.12,98.41-34.45,28.67-12.69,58.31-25.81,93.21-33.51l1,4.29c-34.47,7.61-63.91,20.64-92.39,33.24C1010.7,708.7,964.5,729.15,896.68,729.15Z" fill="#fff"/>
        <g>
          <rect x="338.46" y="416.92" width="26.51" height="26.51" fill="#fff"/>
          <rect x="365.49" y="204.57" width="4.39" height="453.84" transform="translate(-98.94 753.4) rotate(-84.17)" fill="#fff"/>
          <path d="M134.33,408.42a7.62,7.62,0,1,1,7.61,7.61A7.62,7.62,0,0,1,134.33,408.42Z" fill="#fff"/>
          <circle cx="593.43" cy="454.55" r="7.61" fill="#fff"/>
        </g>
        <g>
          <rect x="952.3" y="706.46" width="26.51" height="26.51" transform="translate(-127.78 214.84) rotate(-11.91)" fill="#fff"/>
          <rect x="864.72" y="718.26" width="201.69" height="2.9" transform="translate(-120.27 198.87) rotate(-11.07)" fill="#fff"/>
          <path d="M859.14,740.63a7.61,7.61,0,1,1,9,5.87A7.6,7.6,0,0,1,859.14,740.63Z" fill="#fff"/>
          <path d="M1056.36,700.55a7.61,7.61,0,1,1,9,5.88A7.61,7.61,0,0,1,1056.36,700.55Z" fill="#fff"/>
        </g>
        <g>
          <path d="M498.41,729.21H273V645.14H498.41Zm-221-4.4H494V649.54H277.43Z" fill="#fff"/>
          <path d="M267.08,647.34a8.15,8.15,0,1,1,8.15,8.15A8.15,8.15,0,0,1,267.08,647.34Z" fill="#fff"/>
          <circle cx="496.21" cy="647.34" r="8.15" fill="#fff"/>
          <path d="M267.08,727a8.15,8.15,0,1,1,8.15,8.15A8.15,8.15,0,0,1,267.08,727Z" fill="#fff"/>
          <path d="M488.06,727a8.15,8.15,0,1,1,8.15,8.15A8.15,8.15,0,0,1,488.06,727Z" fill="#fff"/>
        </g>
        <path d="M1149.7,795.09H179.39V129.25H1149.7Zm-966.27-4h962.23V133.28H183.43Z" fill="#0c0c4c"/>
      </g>
    </g>
  </g>
</svg>

aaaah

graphics and code

SVG

<svg viewBox="0 0 100 100">
 <rect x="0" y="0" fill="white" width="100" height="100">
</svg>

SVG is an alternate universe version of HTML, focused on graphics instead of documents.

- Richard Westenra

Illustrations that you can manipulate with code!?

🤩

- smol Cassie, probably

https://codepen.io/cassie-codes/pen/BMXENG

https://css-tricks.com/

https://codepen.io/aaroniker/full/oNgPOwo

HTML

CSS

SVG

CSS

HTML

SVG

CSS

HTML

CSS

SVG

masking

clipping

HTML

filters

CSS

SVG

masking

clipping

filters

HTML

patterns

gradients

paths

CSS

Structural

HTML

SVG

<defs>

<g>

CSS

Structural

HTML

SVG

<image>

<foreignObject>

CSS

semantic meaning

HTML

SVG

<foreignObject>

<description>

<title>

https://css-tricks.com/your-brain-on-front-end-development/

Time to put on our SVG hat.

Hi. I'm a tooltip.

.tooltip {
 border-radius: 20px;
 background: white;
}

<div class="tooltip">
 Hi. I'm a tooltip
</div>

Hi. I'm a tooltip.

.tooltip {
 border-radius: 20px;
 background: white;
}

.tooltip:after {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  border-right:10px solid white; 
}

<div class="tooltip">
 Hi. I'm a tooltip
</div>

<svg viewBox="0 0 100 100">

</svg>

<svg viewBox="0 0 100 100">
 <polygon points="0,0 100,0 50,100"/>
</svg>

<svg viewBox="0 0 100 100">

</svg>

please make this image component, thanks!

- designer

<svg viewBox="0 0 100 100">
  <image x="60" y="60" width="40" height="40" href="pup.jpg"/>
  <image x="30" y="0" width="70" height="40" href="pup.jpg"/>
  <image x="0" y="30" width="50" height="70" href="pup.jpg"/>
</svg>


<image preserveAspectRatio="xMidYMid slice"/>

<svg viewBox="0 0 322.38 329.61">
 <clipPath id="clip">
  <path d="M147.15 89.58h108.94v96....6.75z"></path>
 </clipPath>
	...a lot of shapes...
    
 <image clip-path="url(#clip)" href="puppy.jpg" x="50" y="80" width="210" height="220"></image>
</svg>

<path fill="var(--primary)" d="M147.15 89.58h108.94v96....6.75z"></path>

https://clearleft.com/what-we-do

<svg>
 ..some graph code here

 <foreignObject x="10%" y="62%" width="80%" height="40%">
  	<h1>This is some very important graph info</h1>
    
	<p>It's actually HTML inside an SVG. You can access this 
    information with a screenreader because SVG is hella cool</p>
    
	<button>this is a glorious tabbable button element</button>
 </foreignObject>
 
</svg>

<svg viewBox="0 0 800 1000">
 <clipPath id="clip">
  <path id="wobble" d="M53.48-414.83C-36.84.83Z"/>
 </clipPath>
 
 <image clip-path="url('#clip')" href="pup.jpg" height="100%" width="100%" />
</svg>

<svg>
 ..some graph code here

 <foreignObject x="10%" y="62%" width="80%" height="40%">
  	<h1>This is some very important graph info</h1>
    
	<p>It's actually HTML inside an SVG. You can access this 
    information with a screenreader because SVG is hella cool</p>
    
	<button>this is a glorious tabbable button element</button>
 </foreignObject>
 
</svg>

.image {
 clip-path: url(#blobbyClip)
}

<svg class="hidden" viewBox="0 0 191 210">
 <clipPath id="blobbyClip" clipPathUnits="objectBoundingBox">
  <path d="M0 150.08l4.14-42.18c1...z"></path>
 </clipPath>
</svg>

191 210

.image {
 clip-path: url(#blobbyClip)
}

<svg class="hidden" viewBox="0 0 191 210">
 <clipPath id="blobbyClip">
  <path d="M0 150.08l4.14-42.18c1...z"></path>
 </clipPath>
</svg>

191

210

.image {
 clip-path: url(#blobbyClip)
}

<svg class="hidden" viewBox="0 0 191 210">
 <clipPath id="blobbyClip" transform="scale(0.005235 0.004762)">
  <path d="M0 150.08l4.14-42.18c1...z"></path>
 </clipPath>
</svg>

1/191 = 0.005235..

1/210 = 0.004762..

.image {
 clip-path: url(#blobbyClip)
}

<svg class="hidden" viewBox="0 0 191 210">
 <clipPath id="blobbyClip" transform="scale(0.005235 0.004762)">
  <path d="M0 150.08l4.14-42.18c1...z"></path>
 </clipPath>
</svg>

.image {
 clip-path: path('M0 150.08l4.14-42.18c1...z')
}

https://codepen.io/georgedoescode/pen/YzGBoYz

https://getwaves.io/

https://codepen.io/cassiecodes

.button:active #path {
 d: path("M286.5,62.5c0,27.89891,15z");
}

button.addEventListener("mousedown", (e) => {
  gsap.to("#squish", {
    duration: 0.15,
    morphSVG: path
  });
});

https://codepen.io/cassie-codes

https://codepen.io/cassie-codes/pen/87c6877f61ea3259a561d017017d3ac5

https://codepen.io/cassie-codes

.button:active #path {
 d: path("M286.5,62.5c0,27.89891,15z");
}

.button:active #path {
 d: path("M286.5,62.5c0,27.89891,15z");
}

https://codepen.io/cassie-codes/pen/87c6877f61ea3259a561d017017d3ac5

https://codepen.io/cassie-codes

<svg>
 ..some graph code here

 <foreignObject x="10%" y="62%" width="80%" height="40%">
  	<h1>This is some very important graph info</h1>
    
	<p>It's actually HTML inside an SVG. You can access this 
    information with a screenreader because SVG is hella cool</p>
    
	<button>this is a glorious tabbable button element</button>
 </foreignObject>
 
</svg>

https://codepen.io/cassie-codes/pen/87c6877f61ea3259a561d017017d3ac5

https://2021.uxlondon.com

https://codepen.io/cassie-codes/pen/87c6877f61ea3259a561d017017d3ac5

https://codepen.io/cassie-codes

.stroke {
 stroke-dasharray: 1;
 stroke-dashoffset: 1;
 animation: draw 2s linear forwards;
}

@keyframes draw {
 to {
  stroke-dashoffset: 0;
 }
}

<path class="stroke" pathLength="1" clip-path="url('#strokeClip')" d="M.5 3.9s10.3-2.1 15.8-2..." />

<svg>
 ..some graph code here

 <foreignObject x="10%" y="62%" width="80%" height="40%">
  	<h1>This is some very important graph info</h1>
    
	<p>It's actually HTML inside an SVG. You can access this 
    information with a screenreader because SVG is hella cool</p>
    
	<button>this is a glorious tabbable button element</button>
 </foreignObject>
 
</svg>

<svg viewBow="0 0 100 100">
 <defs>
  <pattern id="myPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
   <circle cx="10" cy="10" r="5" fill="white" />
  </pattern>
 </defs>

 <rect x="0" y="0" width="100" height="100%" fill="url(#myPattern)" />
</svg>

<svg>
 ..some graph code here

 <foreignObject x="10%" y="62%" width="80%" height="40%">
  	<h1>This is some very important graph info</h1>
    
	<p>It's actually HTML inside an SVG. You can access this 
    information with a screenreader because SVG is hella cool</p>
    
	<button>this is a glorious tabbable button element</button>
 </foreignObject>
 
</svg>

<svg viewBow="0 0 100 100">
 <defs>
  <pattern id="myPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
   <circle cx="10" cy="10" r="3" fill="white" />
  </pattern>
 </defs>
</svg>

<svg>
 ..some graph code here

 <foreignObject x="10%" y="62%" width="80%" height="40%">
  	<h1>This is some very important graph info</h1>
    
	<p>It's actually HTML inside an SVG. You can access this 
    information with a screenreader because SVG is hella cool</p>
    
	<button>this is a glorious tabbable button element</button>
 </foreignObject>
 
</svg>

<svg viewBow="0 0 100 100">
 <defs>
  <pattern id="myPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
   <circle cx="10" cy="10" r="3" fill="white" />
  </pattern>
 </defs>

 <rect x="0" y="0" width="100" height="100%" fill="url(#myPattern)" />
</svg>

https://codepen.io/cassie-codes/pen/pobpmWm

https://www.heropatterns.com/

background-image: url("data:image/svg+xml,%3Csvg...");

<svg viewBow="0 0 100 100">
 <defs>
  <pattern id="myPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
   <circle cx="10" cy="10" r="5" fill="white" />
  </pattern>
 </defs>

 <rect x="0" y="0" width="100" height="100%" fill="url(#myPattern)" />
</svg>

https://svgfilters.com/

https://codepen.io/cassie-codes

wooo duotone

https://codepen.io/lbebber/pen/LELBEo

wooo blobbyness

https://codepen.io/cassie-codes/pen/87c6877f61ea3259a561d017017d3ac5

https://codepen.io/cassie-codes

wooo text effects!

<svg>
 ..some graph code here

 <foreignObject x="10%" y="62%" width="80%" height="40%">
  	<h1>This is some very important graph info</h1>
    
	<p>It's actually HTML inside an SVG. You can access this 
    information with a screenreader because SVG is hella cool</p>
    
	<button>this is a glorious tabbable button element</button>
 </foreignObject>
 
</svg>

https://codepen.io/cassie-codes/pen/OJWrZwz

<svg aria-labelledby="graphTitle graphDesc" role="group" viewBox="0 0 233 184">
 <title id="graphTitle">Infographic</title>
 <desc id="graphDesc">An important infographic.</desc>
 
 ..some graph code here

 <foreignObject x="10%" y="62%" width="80%" height="40%">
  <h1>This is some very important graph info</h1>
    
  <p>It's actually HTML inside an SVG. You can access this 
  information with a screenreader because SVG is hella cool</p>
    
  <button>this is a glorious tabbable button element</button>
 </foreignObject>
 
</svg>

https://codepen.io/cassie-codes/pen/OJWrZwz

<svg>
 ..some graph code here

 <foreignObject x="10%" y="62%" width="80%" height="40%">
  	<h1>This is some very important graph info</h1>
    
	<p>It's actually HTML inside an SVG. You can access this 
    information with a screenreader because SVG is hella cool</p>
    
	<button>this is a glorious tabbable button element</button>
 </foreignObject>
 
</svg>

CSS

HTML

SVG

CSS

HTML

https://codepen.io/cassie-codes/pen/87c6877f61ea3259a561d017017d3ac5

https://www.cassie.codes

Thank you for listening!

@cassiecodes - twitter & codepen

Unlocking SVG’s Superpowers

By Cassie Evans

Unlocking SVG’s Superpowers

When most people think of SVG, they picture icons and illustrations, but it’s a magical language that’s capable of so much more! When you stop viewing it purely as a way to make vector graphics, a whole world of UI styling opens up. Come with me as we dig a little deeper and unlock some of SVG’s superpowers.

2,555

Cassie Evans PRO

Brighton based front-end dev & designer. disOrganiser @GeneratorBtn. Has a particular fondness for web animation.

What animation library did you use for that?

What animation library should I learn?

it depends...

How do I do that?

SVG...

SVG...

SVG...

SVG

🤩

Time to put on our SVG hat.

Unlocking SVG’s Superpowers

More from Cassie Evans