frontend-guide

# # SVG

M A C O B O T

# SVG narzędzia

Prezentacja SVG (opens new window) - SVG - Czyli malowanie kodem

https://jakearchibald.github.io/svgomg/ (opens new window) - Optymalizator SVG

https://boxy-svg.com/app (opens new window) - Edytor SVG

https://www.svgator.com/ (opens new window) - Aplikacja do animowania SVG

https://bennettfeely.com/clippy/ (opens new window) - Generator CSS clip-path

# CSS Codepen

css clip-path tooltip (opens new window) - Fajny efekt tooltip na :hover

css-clip polygon hover (opens new window) - Inny efekt z animowanym clip-path

cool css gradients (opens new window) - Kolor tekstu jako gradient + animacja linear-gradient()

# SVG przykłady

super duper choinka ;D

linearGradient

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 100" width="500">
	<defs>
		<linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1">
			<stop offset="0%" stop-color="tomato" />
			<stop offset="100%" stop-color="skyblue" />
		</linearGradient>
		<radialGradient id="Gradient2">
			<stop class="stop1" offset="0%" stop-color="tomato" />
			<stop class="stop2" offset="100%" stop-color="skyblue" />
		</radialGradient>
	</defs>
	<rect x="0" y="0" width="100" height="100" fill="url(#Gradient1)" />
	<rect x="120" y="0" width="100" height="100" fill="url(#Gradient2)" />
</svg>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

fill-rule

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
	<g x="50">
		<svg x="100">
			<polygon points="50,0 21,90 98,35 2,35 79,90" stroke="green" fill-rule="evenodd" />
		</svg>
	</g>
	<polygon points="50,0 21,90 98,35 2,35 79,90" stroke="tomato" fill-rule="nonzero" />
</svg>
1
2
3
4
5
6
7
8

svg text with gradient stroke

Super stylish text Lorem ipsum dolor sit amet description. Super stylish text 
<svg viewBox="0 0 500 50">
	<title>Super stylish text</title>
	<desc>Lorem ipsum dolor sit amet description.</desc><!-- To jest indexowane -->
	<text x="0" y="40" fill="url(#style1)" stroke-width="2" stroke="url(#stroke1)" font-size="20" style="font: bold 3rem sans-serif">Super stylish text </text><!-- To jest indexowane -->
	<defs>
		<linearGradient id="style1">
			<stop offset="0%" stop-color="gold" />
			<stop offset="100%" stop-color="red" />
		</linearGradient>
		<linearGradient id="stroke1">
			<stop offset="0%" stop-color="red" />
			<stop offset="100%" stop-color="gold" />
		</linearGradient>
	</defs>
</svg>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

stroke-dasharray

<svg viewBox="0 0 200 200" width="200" class="radial" style="transform:rotate(-90deg)">
    <circle cx="100" cy="100" r="80" fill="tomato" stroke="red" stroke-width="15" stroke-dasharray="503" stroke-dashoffset="200" stroke-linecap="round"/> 
</svg>
1
2
3

clip-path

<svg viewBox="0 0 70 70" width="300">
	<clipPath id="clip">
		<circle cx="40" cy="35" r="25" />
	</clipPath>
	<path clip-path="url(#clip)" id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" stroke="blue" />
</svg>
1
2
3
4
5
6

← Spis treści →