Gecko-css svg icons

by Petr Haluza

HTML

<section id="svg-icons-demo">
	
<svg id="icon-car-r" viewBox="0 0 60 60">
  <path d="M 20 10 40 30 20 50" stroke-width="8" stroke-linecap="round" stroke="currentcolor" />
</svg>

<svg id="icon-check" viewBox="0 0 60 60">
  <path d="M 8 30 25 45 50 15" stroke-width="8" stroke-linecap="round" stroke="currentcolor" />
</svg>

<svg id="icon-loader" viewBox="0 0 60 60">
  <defs><circle id="c1" cx="30" cy="30" r="24" stroke-width="8" stroke-linecap="round" pathLength="100" /></defs>
  <use href="#c1" stroke="#2563eb" />
  <use href="#c1" stroke="#bbcbf0" class="rotateMe1" />
</svg>



<svg viewBox="0 0 60 60">
  <defs>
		<circle id="c1" cx="30" cy="30" r="24" stroke-width="8" stroke-linecap="round" pathLength="100" />
  </defs>
  <use href="#c1" stroke="LightBlue" />
  <use href="#c1" stroke="CornflowerBlue" class="fillMe1" />
</svg>



</section>

CSS

/* 
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
*/

#svg-icons-demo { display: flex; gap: 1em; flex-wrap: wrap}
#svg-icons-demo svg { height: 50px; fill: none; border: 1px solid lightblue}

.fillMe1 { stroke-dasharray:100; animation: fill 1s linear alternate infinite; transform-origin: 50% 50%;}
	@keyframes fill {	from { stroke-dashoffset: 0 }	to { stroke-dashoffset: 100 }	}
	
	.rotateMe1 { stroke-dasharray:100; stroke-dashoffset: 30; animation: rotate360 .75s linear infinite; transform-origin: 50% 50%;}
	@keyframes rotate360 { from { transform: rotate(0deg)} to { transform: rotate(360deg)} }