Repozytorium Web Developera

SVG i Canvas

Przydatne linki

Animacja

How SVG Shape Morphing Works

<svg viewBox="0 0 194.6 185.1">

  <polygon fill="#FFD41D" points=" ... shape 1 points ... ">

    <animate attributeName="points" dur="500ms" to=" ... shape 2 points ... />

  </polygon>

</svg>
<polygon id="shape" points=" ... shape 1 points ... ">

  <animate id="animation-to-check" begin="shape.click" attributeName="points" dur="500ms" to=" ... shape 2 points ... />

</polygon>
animationToCheck = document.getElementById("animation-to-check");

// run this on a click or whenever you want
animationToCheck.beginElement();

Filtry SVG w CSS

Poniżej zamieszczam przykładowe efekty SVG oraz demonstrację tych efektów na osobnych stronach www:

filter:
	contrast(100)
	blur(15px)
	alpha(opacity=60)
	blur()
	brightness()
	contrast()
	url()
	drop-shadow()
	grayscale()
	hue-rotate()
	invert()
	opacity()
	sepia()
	custom()