-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsvg-font.html
32 lines (29 loc) · 7.41 KB
/
svg-font.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/svg-font.css">
</head>
<body>
<div class="wrapper">
<svg width="768" height="164" viewBox="0 0 768 164" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 76.312C3 67.464 4.74106 59.722 8.22317 53.086C11.7053 46.3447 16.4676 41.1307 22.5101 37.444C28.655 33.7573 35.5168 31.914 43.0955 31.914C49.6501 31.914 55.7438 33.494 61.3766 36.654C67.0095 39.7087 71.3109 43.764 74.281 48.82V3H88.4143V119.92H74.281V103.646C71.5157 108.807 67.4191 113.073 61.9911 116.444C56.5631 119.709 50.2134 121.342 42.9419 121.342C35.4656 121.342 28.655 119.446 22.5101 115.654C16.4676 111.862 11.7053 106.543 8.22317 99.696C4.74106 92.8493 3 85.0547 3 76.312ZM74.281 76.47C74.281 69.9393 73.0008 64.2513 70.4404 59.406C67.88 54.5607 64.3979 50.874 59.994 48.346C55.6926 45.7127 50.9303 44.396 45.7071 44.396C40.484 44.396 35.7216 45.66 31.4202 48.188C27.1188 50.716 23.6879 54.4027 21.1275 59.248C18.5671 64.0933 17.2869 69.7813 17.2869 76.312C17.2869 82.948 18.5671 88.7413 21.1275 93.692C23.6879 98.5373 27.1188 102.277 31.4202 104.91C35.7216 107.438 40.484 108.702 45.7071 108.702C50.9303 108.702 55.6926 107.438 59.994 104.91C64.3979 102.277 67.88 98.5373 70.4404 93.692C73.0008 88.7413 74.281 83.0007 74.281 76.47Z" stroke="black" stroke-width="5"/>
<path d="M188.85 73.31C188.85 76.0487 188.696 78.9453 188.389 82H121.102C121.614 90.532 124.431 97.2207 129.552 102.066C134.775 106.806 141.073 109.176 148.447 109.176C154.49 109.176 159.508 107.754 163.502 104.91C167.599 101.961 170.466 98.0633 172.105 93.218H187.16C184.907 101.539 180.401 108.333 173.641 113.6C166.882 118.761 158.484 121.342 148.447 121.342C140.459 121.342 133.29 119.499 126.94 115.812C120.693 112.125 115.777 106.911 112.192 100.17C108.608 93.3233 106.815 85.4233 106.815 76.47C106.815 67.5167 108.556 59.6693 112.039 52.928C115.521 46.1867 120.385 41.0253 126.633 37.444C132.982 33.7573 140.254 31.914 148.447 31.914C156.436 31.914 163.502 33.7047 169.647 37.286C175.792 40.8673 180.503 45.818 183.78 52.138C187.16 58.3527 188.85 65.41 188.85 73.31ZM174.409 70.308C174.409 64.8307 173.232 60.1433 170.876 56.246C168.521 52.2433 165.294 49.2413 161.198 47.24C157.204 45.1333 152.749 44.08 147.833 44.08C140.766 44.08 134.724 46.3973 129.705 51.032C124.789 55.6667 121.973 62.092 121.256 70.308H174.409Z" stroke="black" stroke-width="5"/>
<path d="M238.642 106.648L264.758 33.336H279.659L246.63 119.92H230.346L197.317 33.336H212.372L238.642 106.648Z" stroke="black" stroke-width="5"/>
<path d="M370.227 73.31C370.227 76.0487 370.073 78.9453 369.766 82H302.479C302.991 90.532 305.808 97.2207 310.928 102.066C316.152 106.806 322.45 109.176 329.824 109.176C335.867 109.176 340.885 107.754 344.879 104.91C348.976 101.961 351.843 98.0633 353.482 93.218H368.537C366.284 101.539 361.778 108.333 355.018 113.6C348.259 118.761 339.861 121.342 329.824 121.342C321.836 121.342 314.667 119.499 308.317 115.812C302.07 112.125 297.154 106.911 293.569 100.17C289.985 93.3233 288.192 85.4233 288.192 76.47C288.192 67.5167 289.933 59.6693 293.415 52.928C296.898 46.1867 301.762 41.0253 308.01 37.444C314.359 33.7573 321.631 31.914 329.824 31.914C337.812 31.914 344.879 33.7047 351.024 37.286C357.169 40.8673 361.88 45.818 365.157 52.138C368.537 58.3527 370.227 65.41 370.227 73.31ZM355.786 70.308C355.786 64.8307 354.608 60.1433 352.253 56.246C349.897 52.2433 346.671 49.2413 342.575 47.24C338.581 45.1333 334.125 44.08 329.21 44.08C322.143 44.08 316.1 46.3973 311.082 51.032C306.166 55.6667 303.35 62.092 302.633 70.308H355.786Z" stroke="black" stroke-width="5"/>
<path d="M402.659 3V119.92H388.68V3H402.659Z" stroke="black" stroke-width="5"/>
<path d="M463.201 121.342C455.315 121.342 448.146 119.499 441.694 115.812C435.344 112.125 430.326 106.911 426.639 100.17C423.054 93.3233 421.262 85.4233 421.262 76.47C421.262 67.622 423.105 59.8273 426.792 53.086C430.582 46.2393 435.703 41.0253 442.155 37.444C448.607 33.7573 455.827 31.914 463.815 31.914C471.804 31.914 479.024 33.7573 485.476 37.444C491.928 41.0253 496.998 46.1867 500.685 52.928C504.474 59.6693 506.369 67.5167 506.369 76.47C506.369 85.4233 504.423 93.3233 500.531 100.17C496.742 106.911 491.57 112.125 485.015 115.812C478.461 119.499 471.189 121.342 463.201 121.342ZM463.201 108.702C468.219 108.702 472.93 107.491 477.334 105.068C481.738 102.645 485.271 99.0113 487.934 94.166C490.699 89.3207 492.082 83.422 492.082 76.47C492.082 69.518 490.751 63.6193 488.088 58.774C485.425 53.9287 481.943 50.3473 477.642 48.03C473.34 45.6073 468.68 44.396 463.662 44.396C458.541 44.396 453.83 45.6073 449.529 48.03C445.33 50.3473 441.95 53.9287 439.389 58.774C436.829 63.6193 435.549 69.518 435.549 76.47C435.549 83.5273 436.778 89.4787 439.236 94.324C441.796 99.1693 445.176 102.803 449.375 105.226C453.574 107.543 458.183 108.702 463.201 108.702Z" stroke="black" stroke-width="5"/>
<path d="M538.729 49.294C541.495 44.3433 545.591 40.2353 551.019 36.97C556.55 33.5993 562.95 31.914 570.222 31.914C577.698 31.914 584.458 33.7573 590.5 37.444C596.645 41.1307 601.459 46.3447 604.941 53.086C608.423 59.722 610.164 67.464 610.164 76.312C610.164 85.0547 608.423 92.8493 604.941 99.696C601.459 106.543 596.645 111.862 590.5 115.654C584.458 119.446 577.698 121.342 570.222 121.342C563.053 121.342 556.703 119.709 551.173 116.444C545.745 113.073 541.597 108.913 538.729 103.962V161H524.75V33.336H538.729V49.294ZM595.877 76.312C595.877 69.7813 594.597 64.0933 592.036 59.248C589.476 54.4027 585.994 50.716 581.59 48.188C577.289 45.66 572.526 44.396 567.303 44.396C562.182 44.396 557.42 45.7127 553.016 48.346C548.715 50.874 545.233 54.6133 542.57 59.564C540.01 64.4093 538.729 70.0447 538.729 76.47C538.729 83.0007 540.01 88.7413 542.57 93.692C545.233 98.5373 548.715 102.277 553.016 104.91C557.42 107.438 562.182 108.702 567.303 108.702C572.526 108.702 577.289 107.438 581.59 104.91C585.994 102.277 589.476 98.5373 592.036 93.692C594.597 88.7413 595.877 82.948 595.877 76.312Z" stroke="black" stroke-width="5"/>
<path d="M705.376 73.31C705.376 76.0487 705.223 78.9453 704.916 82H637.629C638.141 90.532 640.957 97.2207 646.078 102.066C651.301 106.806 657.6 109.176 664.974 109.176C671.016 109.176 676.034 107.754 680.029 104.91C684.125 101.961 686.993 98.0633 688.632 93.218H703.687C701.433 101.539 696.927 108.333 690.168 113.6C683.408 118.761 675.01 121.342 664.974 121.342C656.985 121.342 649.816 119.499 643.466 115.812C637.219 112.125 632.303 106.911 628.719 100.17C625.134 93.3233 623.342 85.4233 623.342 76.47C623.342 67.5167 625.083 59.6693 628.565 52.928C632.047 46.1867 636.912 41.0253 643.159 37.444C649.509 33.7573 656.78 31.914 664.974 31.914C672.962 31.914 680.029 33.7047 686.174 37.286C692.318 40.8673 697.03 45.818 700.307 52.138C703.687 58.3527 705.376 65.41 705.376 73.31ZM690.936 70.308C690.936 64.8307 689.758 60.1433 687.403 56.246C685.047 52.2433 681.821 49.2413 677.724 47.24C673.73 45.1333 669.275 44.08 664.359 44.08C657.293 44.08 651.25 46.3973 646.232 51.032C641.316 55.6667 638.499 62.092 637.782 70.308H690.936Z" stroke="black" stroke-width="5"/>
<path d="M737.809 47.398C740.267 42.4473 743.749 38.6027 748.255 35.864C752.864 33.1253 758.445 31.756 765 31.756V46.608H761.313C745.644 46.608 737.809 55.3507 737.809 72.836V119.92H723.829V33.336H737.809V47.398Z" stroke="black" stroke-width="5"/>
</svg>
</div>
<script>
document.querySelectorAll("path").forEach(p => {
console.log(p.getTotalLength());
})
document.querySelectorAll('#heart')[0].addEventListener('click',toggle);
</script>
</body>
</html>