-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsvg-test.html
62 lines (51 loc) · 5.4 KB
/
svg-test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>svg-test</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Open+Sans+Condensed:wght@300&display=swap"
rel="stylesheet">
</head>
<body>
<section class="sec1">
<h1>svg test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, laborum incidunt. Sunt
atque placeat
eius? Mollitia sunt vitae provident commodi, voluptatem explicabo nesciunt deleniti quasi, sed inventore,
animi velit maiores!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur, dignissimos.</p>
</section>
<section class="sec2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolore repellendus totam eius
distinctio suscipit ullam cum amet veniam? Eius, obcaecati ipsa magnam dolor distinctio non necessitatibus
iusto deleniti provident. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex saepe tenetur aliquid
recusandae sed molestiae nam eligendi tempore magni dignissimos dicta exercitationem, asperiores, dolorum
vero earum doloribus praesentium illo consequuntur. Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Praesentium in enim rerum ducimus aperiam assumenda sint qui aspernatur, eius, odit iusto inventore,
repellat exercitationem blanditiis velit soluta tempore ipsum ex?</p>
</section>
<section class="sec3">
<svg width="307" height="94" viewBox="0 0 307 94" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="sig"
d="M72 20C69.5499 14.2351 65.0163 8.50362 58.5 7.05555C53.2745 5.89433 48.4796 3 43 3C38.1233 3 31.2253 1.72134 26.5556 3.05555C24.4397 3.6601 23.3731 6 21 6C18.3217 6 16.4111 8.4711 14.5 10C6.31078 16.5514 3 23.8311 3 35C3 37.7857 1.42188 49.3375 3.5 51C4.87458 52.0997 5.37724 55.4039 6.22222 57C7.32873 59.0901 9.42605 61.1672 9.94444 63.5C10.4097 65.5935 12.4098 67.1843 13.0556 69.4444C13.1041 69.6144 16.2346 73.679 16.7778 74.2222C20.2917 77.7362 25.2456 79.0433 28.7778 82.2222C30.7528 83.9998 32.9508 83.3952 34.7778 85.2222C36.4023 86.8467 38.3325 87.5739 40.5 88.0555C45.2569 89.1126 49.6654 92 54.5 92C65.8961 92 74.3687 89.5934 84 84.7778C87.9952 82.7802 91.4555 79.0842 95.4444 77.9444C96.4065 77.6696 100.067 74.489 100.778 73.7778C102.544 72.0113 105.72 70.7953 107 68.5555C109.083 64.9101 112.878 62.1519 115.222 59.2222C118.151 55.5618 123.063 55 127.5 55C138.09 55 147.879 53.9786 152.778 65C154.668 69.2528 156 76.0332 156 80.5C156 86.298 150 75.1068 150 72.5C150 69.8333 150 67.1667 150 64.5C150 61.8107 146.018 60.9848 144.778 59C143.959 57.6895 139.809 56.4456 138.444 56.0556C136.24 55.4258 133.17 53.1206 131 53C121.23 52.4572 113.559 63.0227 105.5 67.5C102.369 69.2396 103.688 78.75 106.222 80.7778C107.063 81.4507 110.53 83.6516 111.556 83.9444C112.804 84.3011 114.231 83.7735 115.5 84.0555C116.866 84.3592 117.746 85.8433 119 86C123.341 86.5426 129.329 86.7368 133.556 87.9444C135.353 88.4579 140.3 88.5333 142 87.7778C142.823 87.412 145.268 87.2878 145.778 86.7778C146.509 86.0463 146.471 84.8236 147.5 84C150.79 81.3679 149.768 72.9378 150 69C150.35 63.0441 155.741 74.7959 156 77C156.513 81.3585 165.105 84.0853 168.5 81.4444C172.702 78.1764 174.389 74.5432 177.778 70.7778C180.381 67.8856 184.029 62.1495 185.056 58.5556C186.058 55.0468 198.611 60.6357 200.5 61.0556C204.709 61.9909 208.152 66.5967 210.778 69.2222C213.028 71.4727 212.107 72.9924 213.5 75.5C214.226 76.8072 214.76 82.7433 212.778 79C208.863 71.6056 203.02 61 193.5 61C189.424 61 182.291 61.0606 182 66C181.947 66.8983 180.857 67.8929 180 68C178.239 68.2201 179.606 70.115 178.5 71C176.334 72.7327 177 75.436 177 78C177 86.317 198.162 87 204.5 87C207.534 87 216.545 84.6403 217 81C217.556 76.554 223.724 73.6842 224 69C224.111 67.1148 226.884 64.9682 227 63C227.148 60.4786 228 57.6212 228 55.5C228 50.4029 229.806 44.6229 230.944 39.5C232.004 34.73 231.123 28.4039 228.222 24.7778C226.307 22.3836 226.704 22 223 22C219.088 22 220 24.1314 220 27.5C220 38.1741 224.771 48.327 232.222 55.7778C235.457 59.0121 238.051 61.2407 241.5 64C242.938 65.1506 245.226 66.2832 247 67.2222C249.165 68.3684 252.814 69.2444 254.5 70.5555C258.282 73.4975 264.283 74.7225 269 75C274.682 75.3342 277.725 78.8307 282.778 73.7778C286.363 70.1926 289 66.9035 289 61.5C289 55.4659 287.298 52.7279 281.444 51.0556C277.524 49.9353 269.744 50.4051 266.778 52.7778C264.051 54.9596 258.248 60.5389 258 65C257.726 69.9394 257 75.7498 260 79.5C260.362 79.9519 265.249 81.9116 266 82C268.334 82.2746 272.725 84.0639 274.5 85.4444C281.985 91.2661 295.576 89 305 89"
stroke="black" stroke-width="3" stroke-linecap="round" />
</svg>
</section>
<section class="sec4">
<div class="shape"></div>
<div class="circle"></div>
</section>
<section class="sec5">
<div class="background"></div>
</section>
<section class="sec6">
<div class="grsblk"></div>
</section>
</body>
</html>