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

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

HTML

JS

CSS

SVG

CSS

HTML

JS

SVG

SVG

CSS

HTML

JS

CSS

SVG

masking

clipping

HTML

HTML

JS

filters

CSS

SVG

masking

clipping

filters

HTML

HTML

JS

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.

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

JS

SVG

SVG

CSS

HTML

JS

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