Repozytorium Web Developera

SVG i Canvas

Przydatne linki

Canvas

Przykład Canvas


// https://www.w3schools.com/tags/canvas_quadraticcurveto.asp
const c = document.getElementById('myCanvas')
const ctx = c.getContext('2d')

ctx.beginPath()
ctx.moveTo(20,20)
ctx.quadraticCurveTo(20,100,200,20)
ctx.stroke()

Interpolacja a Canvas

Przykład interpolacji ruchu między dwoma punktami można zobaczyć jako ruch po łuku/krzywej lub jako LERP - linearna interpolacja.
Rysowanie linii między kilkoma punktami zostało opisane tutaj.

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()