<div class="mark"><p>Scrollen Sie nach unten! </p></div>
<!-- SVG -->
<div class="main-container height">
<div class="illustration">
<svg viewBox="0 0 744 1052">
<g fill="none">
<path class="path" d="M 721.95,718.21
C 721.95,718.21 714.68,718.21 714.68,718.21
707.90,718.21 707.41,718.01 707.41,715.28
707.41,713.36 708.35,712.13 710.14,711.70
712.81,711.05 712.79,710.93 709.29,705.73
702.36,695.43 700.83,694.02 689.80,687.75
683.68,684.26 678.13,681.41 677.47,681.41
676.80,681.41 675.33,683.76 674.19,686.62
672.15,691.75 672.18,691.92 675.86,697.36
677.92,700.39 679.62,703.38 679.63,703.99
679.65,704.60 677.26,708.05 674.33,711.66
669.53,717.56 668.50,718.21 663.98,718.21
661.21,718.21 658.62,717.90 658.22,717.52
656.69,716.11 658.92,712.07 661.22,712.07
662.54,712.07 664.94,710.35 666.56,708.24
666.56,708.24 669.50,704.40 669.50,704.40
669.50,704.40 666.77,702.41 666.77,702.41
665.27,701.32 661.36,698.49 658.09,696.13
652.92,692.39 651.94,690.92 650.52,684.78
648.71,676.90 649.42,677.18 635.58,679.09
625.87,680.43 625.72,680.51 623.38,685.31
621.35,689.49 621.29,690.34 622.91,691.30
623.96,691.91 625.52,692.42 626.39,692.43
629.23,692.46 629.74,695.01 627.38,697.43
624.43,700.46 622.93,700.42 615.60,697.11
609.72,694.46 609.61,694.31 609.61,688.44
609.61,682.65 609.50,682.49 605.98,682.86
605.98,682.86 602.34,683.25 602.34,683.25
602.34,683.25 601.98,700.79 601.98,700.79
601.98,700.79 601.61,718.32 601.61,718.32
601.61,718.32 593.39,717.96 593.39,717.96
586.24,717.64 585.16,717.28 585.16,715.20
585.16,713.65 586.33,712.54 588.47,712.08
592.64,711.17 592.89,709.36 590.81,694.90
590.81,694.90 589.13,683.25 589.13,683.25
589.13,683.25 583.84,680.80 583.84,680.80
580.93,679.45 578.31,678.21 578.00,678.04
577.70,677.87 578.13,675.69 578.95,673.19
579.97,670.13 580.08,669.55 579.42,669.20
579.02,668.99 578.81,669.38 577.67,669.99
577.28,670.20 576.48,669.30 575.98,669.60
573.41,671.16 573.72,671.50 571.69,668.55
571.44,668.18 569.38,668.58 569.07,668.10
568.68,667.49 569.13,665.96 568.63,665.17
568.19,664.47 568.15,663.14 567.80,662.50
567.39,661.76 565.98,663.21 565.68,662.51
565.30,661.61 565.72,660.56 565.52,659.66
565.35,658.88 565.83,657.08 565.63,656.00
565.56,655.63 563.28,656.05 563.34,655.45
563.41,654.70 565.10,652.41 565.04,651.91
564.94,650.99 563.45,651.69 563.46,650.75
563.47,649.85 565.00,648.77 565.17,647.93
565.44,646.61 566.48,646.55 566.90,644.92
567.57,642.31 567.21,642.16 560.34,642.16
552.86,642.16 550.65,640.65 552.29,636.67
552.41,636.39 554.25,636.19 554.16,635.67
554.10,635.28 552.15,634.59 551.99,634.11
551.80,633.56 551.55,632.98 551.25,632.39
550.97,631.83 550.64,631.27 550.28,630.72
550.28,630.72 547.53,626.58 547.53,626.58
547.53,626.58 557.42,618.76 557.42,618.76
562.87,614.46 567.32,610.48 567.32,609.91
567.32,609.35 566.74,607.87 566.03,606.64
565.00,604.85 565.64,603.47 569.14,599.93
569.14,599.93 573.54,595.46 573.54,595.46
573.54,595.46 575.46,598.14 575.46,598.14
575.46,598.14 577.37,600.82 577.37,600.82
577.37,600.82 580.95,599.64 580.95,599.64
580.95,599.64 585.83,596.21 585.83,596.21
585.83,596.21 585.75,598.76 585.75,598.76
585.75,598.76 589.21,595.76 589.21,595.76
589.21,595.76 591.78,596.73 591.78,596.73
591.78,596.73 593.00,594.26 593.00,594.26
593.74,594.64 595.37,594.25 596.13,594.60
596.13,594.60 595.92,595.71 595.92,595.71
596.54,596.01 598.60,595.85 599.31,596.19
599.31,596.19 600.48,597.11 600.48,597.11
601.57,597.64 604.29,596.90 605.45,597.47
604.41,598.49 612.78,597.28 613.64,598.39
613.51,598.67 614.00,598.25 613.93,598.44
613.75,598.94 614.12,598.43 614.31,598.41
614.44,598.39 615.52,600.03 615.84,599.77
616.10,599.57 616.19,600.81 616.56,600.46
616.96,600.80 616.10,601.34 616.16,601.63
616.22,601.92 615.64,602.26 615.42,602.68
615.26,602.99 616.91,602.98 616.62,603.31
616.44,603.52 615.53,603.94 615.30,604.14
615.09,604.33 614.28,604.94 614.03,605.11
614.03,605.11 612.66,605.91 612.66,605.91
612.66,605.91 615.26,605.58 615.26,605.58
615.26,605.58 617.21,605.40 617.21,605.40
617.21,605.40 617.54,607.33 617.54,607.33
618.07,607.40 618.55,607.46 618.98,607.52
619.64,607.61 620.47,607.12 620.95,607.22
621.35,607.30 622.32,606.93 622.64,607.04
623.36,607.28 622.78,608.68 623.44,609.18
623.70,609.38 624.20,608.61 624.50,608.87
624.82,609.15 625.43,609.22 625.87,609.59
626.14,609.81 628.69,610.88 628.99,611.13
629.27,611.38 627.13,612.02 627.43,612.30
627.54,612.35 628.14,612.59 628.84,612.80
629.10,613.09 630.92,613.93 631.17,614.23
631.40,614.52 633.40,615.41 633.62,615.68
633.91,616.03 631.02,616.29 631.29,616.62
631.60,617.01 634.47,619.36 634.75,619.72
635.13,620.21 632.17,621.91 632.49,622.34
632.89,622.87 630.91,623.33 631.21,623.78
631.46,624.13 632.77,624.21 632.96,624.51
633.32,625.10 634.32,625.56 634.47,625.98
634.76,626.78 634.05,627.90 634.11,628.35
634.17,628.84 634.36,630.52 633.26,630.78
631.41,631.21 629.46,632.24 629.52,632.76
629.60,633.54 627.08,633.22 631.44,634.35
634.79,635.22 635.64,634.97 636.48,636.22
637.83,638.23 639.91,638.48 654.93,638.48
654.93,638.48 671.85,638.48 671.85,638.48
671.85,638.48 682.69,644.31 682.69,644.31
691.59,649.09 695.72,650.48 705.73,652.06
712.44,653.12 718.43,653.68 719.04,653.29
722.21,651.30 737.44,644.60 731.51,638.33
731.51,638.33 725.18,631.63 725.18,631.63
725.18,631.63 722.87,632.91 722.87,632.91
722.87,632.91 721.43,634.55 721.43,634.55
721.43,634.55 719.71,633.68 719.71,633.68
719.71,633.68 717.25,635.20 717.25,635.20
717.25,635.20 715.48,636.00 715.48,636.00
715.48,636.00 714.11,636.15 714.11,636.15
714.11,636.15 712.98,637.13 712.98,637.13
712.98,637.13 711.38,636.47 711.38,636.47
711.38,636.47 710.06,636.01 710.06,636.01
710.06,636.01 708.31,635.40 708.31,635.40
708.31,635.40 703.70,634.04 703.70,634.04
703.70,634.04 704.65,633.06 704.65,633.06
704.65,633.06 703.21,632.85 703.21,632.85
703.21,632.85 701.61,631.17 701.61,631.17
701.61,631.17 699.59,631.13 699.59,631.13
699.59,631.13 697.71,628.76 697.71,628.76
697.71,628.76 700.31,628.86 700.31,628.86
700.31,628.86 699.71,627.88 699.71,627.88
699.71,627.88 703.11,627.51 703.11,627.51
703.11,627.51 702.57,625.95 702.57,625.95
702.57,625.95 704.70,625.47 704.70,625.47
704.70,625.47 706.83,624.29 706.83,624.29
706.83,624.29 708.67,623.98 708.67,623.98
708.67,623.98 710.84,623.20 710.84,623.20
710.84,623.20 711.18,621.83 711.18,621.83
711.18,621.83 713.60,622.62 713.60,622.62
713.60,622.62 714.71,622.94 714.71,622.94
714.71,622.94 716.19,623.37 716.19,623.37
716.19,623.37 716.36,622.18 716.36,622.18
716.36,622.18 718.61,623.62 718.61,623.62
719.18,623.78 720.35,624.53 720.87,624.70
721.40,624.88 720.78,623.31 721.27,623.50
721.71,623.67 723.52,625.71 723.94,625.90
724.40,626.11 724.85,626.33 725.29,626.56
728.42,628.22 731.46,630.73 736.45,635.42
737.66,636.92 738.22,638.56 738.35,641.11
738.72,643.10 738.65,645.28 736.82,647.66
733.75,650.12 734.58,651.97 727.66,656.25
727.66,656.25 721.84,659.52 721.84,659.52
714.54,662.18 714.49,661.10 711.01,661.79
711.01,661.79 698.41,662.40 698.41,662.40
698.41,662.40 710.15,686.32 710.15,686.32
717.11,700.48 721.91,711.86 721.92,714.22
721.92,714.22 721.95,718.21 721.95,718.21 Z" />
<path class="path" d="M 28.94,718.46
C 28.94,718.46 36.09,718.46 36.09,718.46
42.76,718.46 43.24,718.26 43.24,715.58
43.24,713.69 42.33,712.48 40.56,712.05
37.94,711.42 37.95,711.30 41.40,706.18
48.22,696.04 49.72,694.66 60.58,688.48
66.60,685.05 72.07,682.24 72.72,682.24
73.37,682.24 74.82,684.55 75.94,687.37
77.95,692.42 77.93,692.59 74.30,697.94
72.27,700.92 70.60,703.86 70.59,704.47
70.57,705.07 72.92,708.47 75.81,712.01
80.53,717.82 81.54,718.46 86.00,718.46
88.71,718.46 91.27,718.16 91.67,717.79
93.17,716.39 90.98,712.42 88.71,712.42
87.41,712.42 85.04,710.72 83.45,708.65
83.45,708.65 80.56,704.87 80.56,704.87
80.56,704.87 83.24,702.91 83.24,702.91
84.72,701.84 88.57,699.05 91.79,696.73
96.88,693.05 97.84,691.60 99.24,685.56
101.02,677.81 100.32,678.08 113.95,679.96
123.50,681.27 123.65,681.35 125.95,686.08
127.95,690.19 128.01,691.03 126.41,691.97
125.38,692.58 123.85,693.08 122.99,693.09
120.19,693.12 119.69,695.63 122.01,698.01
124.92,700.99 126.40,700.95 133.61,697.70
139.40,695.09 139.50,694.94 139.50,689.17
139.50,683.47 139.61,683.30 143.08,683.67
143.08,683.67 146.66,684.05 146.66,684.05
146.66,684.05 147.02,701.31 147.02,701.31
147.02,701.31 147.38,718.57 147.38,718.57
147.38,718.57 155.47,718.21 155.47,718.21
162.50,717.90 163.57,717.55 163.57,715.50
163.57,713.97 162.41,712.88 160.31,712.43
156.20,711.53 155.96,709.75 158.01,695.52
158.01,695.52 159.66,684.06 159.66,684.06
159.66,684.06 164.87,681.64 164.87,681.64
167.73,680.31 170.31,679.09 170.61,678.92
170.91,678.76 170.49,676.61 169.68,674.15
168.68,671.14 168.57,670.57 169.22,670.22
169.61,670.02 169.82,670.41 170.94,671.00
171.33,671.21 172.11,670.32 172.60,670.62
175.13,672.16 174.83,672.49 176.82,669.58
177.08,669.22 179.10,669.61 179.40,669.14
179.79,668.54 179.34,667.04 179.84,666.26
180.27,665.57 180.31,664.26 180.65,663.63
181.05,662.91 182.45,664.33 182.74,663.64
183.11,662.75 182.70,661.72 182.90,660.84
183.07,660.07 182.59,658.30 182.79,657.23
182.86,656.87 185.10,657.29 185.05,656.69
184.98,655.95 183.31,653.70 183.37,653.21
183.47,652.30 184.94,652.99 184.93,652.06
184.92,651.18 183.41,650.12 183.24,649.29
182.98,647.99 181.95,647.93 181.54,646.33
180.88,643.76 181.24,643.61 188.00,643.61
195.36,643.61 197.54,642.13 195.92,638.21
195.80,637.93 193.99,637.74 194.08,637.23
194.14,636.84 196.05,636.16 196.22,635.69
196.40,635.15 196.65,634.58 196.94,634.00
197.22,633.44 197.54,632.89 197.89,632.36
197.89,632.36 200.61,628.28 200.61,628.28
200.61,628.28 190.87,620.58 190.87,620.58
185.51,616.35 181.13,612.43 181.13,611.87
181.13,611.32 181.70,609.87 182.40,608.65
183.41,606.90 182.78,605.53 179.34,602.05
179.34,602.05 175.00,597.65 175.00,597.65
175.00,597.65 173.12,600.29 173.12,600.29
173.12,600.29 171.23,602.92 171.23,602.92
171.23,602.92 167.71,601.77 167.71,601.77
167.71,601.77 162.90,598.39 162.90,598.39
162.90,598.39 162.99,600.90 162.99,600.90
162.99,600.90 159.58,597.95 159.58,597.95
159.58,597.95 157.05,598.90 157.05,598.90
157.05,598.90 155.85,596.47 155.85,596.47
155.12,596.84 153.51,596.45 152.77,596.81
152.77,596.81 152.98,597.90 152.98,597.90
152.37,598.19 150.34,598.03 149.64,598.37
149.64,598.37 148.49,599.27 148.49,599.27
147.42,599.79 144.73,599.07 143.60,599.63
144.62,600.63 136.39,599.44 135.54,600.53
135.66,600.81 135.19,600.39 135.25,600.59
135.42,601.07 135.07,600.57 134.88,600.55
134.74,600.54 133.69,602.15 133.37,601.89
133.12,601.69 133.03,602.92 132.66,602.57
132.27,602.90 133.11,603.44 133.05,603.72
133.00,604.00 133.57,604.34 133.78,604.75
133.94,605.06 132.32,605.05 132.60,605.38
132.78,605.58 133.68,605.99 133.90,606.19
134.11,606.38 134.91,606.98 135.15,607.15
135.15,607.15 136.51,607.93 136.51,607.93
136.51,607.93 133.95,607.61 133.95,607.61
133.95,607.61 132.02,607.43 132.02,607.43
132.02,607.43 131.70,609.34 131.70,609.34
131.17,609.40 130.70,609.46 130.28,609.52
129.63,609.61 128.82,609.12 128.34,609.22
127.95,609.30 126.99,608.94 126.68,609.05
125.97,609.28 126.54,610.66 125.89,611.15
125.63,611.35 125.14,610.59 124.85,610.85
124.54,611.12 123.93,611.19 123.50,611.55
123.24,611.77 120.72,612.82 120.43,613.07
120.15,613.32 122.26,613.95 121.96,614.22
121.85,614.27 121.27,614.50 120.58,614.72
120.32,615.00 118.53,615.82 118.28,616.13
118.06,616.41 116.09,617.28 115.87,617.55
115.59,617.90 118.43,618.15 118.17,618.48
117.86,618.86 115.03,621.18 114.76,621.52
114.38,622.00 117.30,623.68 116.98,624.10
116.59,624.62 118.54,625.08 118.24,625.52
118.00,625.87 116.71,625.94 116.53,626.24
116.17,626.82 115.18,627.27 115.03,627.69
114.75,628.47 115.45,629.57 115.39,630.02
115.33,630.50 115.14,632.16 116.22,632.41
118.05,632.83 119.97,633.85 119.91,634.37
119.83,635.13 122.31,634.81 118.02,635.93
114.72,636.78 113.88,636.54 113.06,637.76
111.73,639.74 109.68,639.99 94.90,639.99
94.90,639.99 78.24,639.99 78.24,639.99
78.24,639.99 67.57,645.72 67.57,645.72
58.81,650.43 54.75,651.80 44.90,653.36
38.30,654.40 32.40,654.95 31.80,654.57
28.68,652.61 13.69,646.02 19.53,639.84
19.53,639.84 25.76,633.25 25.76,633.25
25.76,633.25 28.03,634.51 28.03,634.51
28.03,634.51 29.45,636.12 29.45,636.12
29.45,636.12 31.14,635.26 31.14,635.26
31.14,635.26 33.56,636.77 33.56,636.77
33.56,636.77 35.31,637.55 35.31,637.55
35.31,637.55 36.65,637.70 36.65,637.70
36.65,637.70 37.76,638.66 37.76,638.66
37.76,638.66 39.34,638.01 39.34,638.01
39.34,638.01 40.64,637.56 40.64,637.56
40.64,637.56 42.36,636.95 42.36,636.95
42.36,636.95 46.90,635.62 46.90,635.62
46.90,635.62 45.96,634.65 45.96,634.65
45.96,634.65 47.38,634.45 47.38,634.45
47.38,634.45 48.95,632.80 48.95,632.80
48.95,632.80 50.94,632.76 50.94,632.76
50.94,632.76 52.79,630.42 52.79,630.42
52.79,630.42 50.23,630.52 50.23,630.52
50.23,630.52 50.83,629.56 50.83,629.56
50.83,629.56 47.48,629.19 47.48,629.19
47.48,629.19 48.01,627.66 48.01,627.66
48.01,627.66 45.92,627.18 45.92,627.18
45.92,627.18 43.82,626.02 43.82,626.02
43.82,626.02 42.00,625.72 42.00,625.72
42.00,625.72 39.88,624.95 39.88,624.95
39.88,624.95 39.53,623.60 39.53,623.60
39.53,623.60 37.15,624.38 37.15,624.38
37.15,624.38 36.06,624.70 36.06,624.70
36.06,624.70 34.60,625.12 34.60,625.12
34.60,625.12 34.43,623.95 34.43,623.95
34.43,623.95 32.22,625.36 32.22,625.36
31.66,625.52 30.51,626.26 29.99,626.43
29.47,626.60 30.09,625.06 29.60,625.24
29.17,625.41 27.39,627.43 26.97,627.61
26.53,627.82 26.09,628.03 25.65,628.26
22.57,629.89 19.58,632.36 14.67,636.98
13.47,638.46 12.92,640.07 12.79,642.58
12.43,644.54 12.50,646.68 14.30,649.02
17.32,651.44 16.51,653.27 23.31,657.48
23.31,657.48 29.05,660.70 29.05,660.70
36.23,663.31 36.28,662.25 39.70,662.93
39.70,662.93 52.11,663.53 52.11,663.53
52.11,663.53 40.55,687.07 40.55,687.07
33.70,701.01 28.98,712.21 28.96,714.54
28.96,714.54 28.94,718.46 28.94,718.46 Z" />
<path class="path" d="M 219.61,708.60
C 219.61,708.60 219.61,646.40 219.61,646.40
219.61,646.40 264.40,708.60 264.40,708.60
264.40,708.60 275.98,708.60 275.98,708.60
275.98,708.60 275.98,629.45 275.98,629.45
275.98,629.45 265.16,629.45 265.16,629.45
265.16,629.45 265.16,691.59 265.16,691.59
265.16,691.59 220.36,629.45 220.36,629.45
220.36,629.45 208.78,629.45 208.78,629.45
208.78,629.45 208.78,708.60 208.78,708.60
208.78,708.60 219.61,708.60 219.61,708.60 Z" />
<path class="path" d="M 327.33,677.56
C 327.33,677.56 352.40,677.56 352.40,677.56
352.40,677.56 352.40,692.30 352.40,692.30
350.00,694.28 346.47,696.15 341.81,697.91
337.16,699.64 332.39,700.50 327.50,700.50
321.88,700.50 316.56,699.35 311.56,697.05
306.56,694.74 302.74,691.22 300.10,686.46
297.50,681.71 296.20,675.81 296.20,668.75
296.20,663.03 297.29,657.72 299.46,652.83
300.74,649.98 302.52,647.37 304.81,645.00
307.14,642.62 310.18,640.71 313.95,639.27
317.71,637.80 322.17,637.06 327.33,637.06
331.63,637.06 335.55,637.76 339.08,639.17
342.61,640.53 345.32,642.37 347.22,644.67
349.12,646.98 350.71,650.15 351.99,654.18
351.99,654.18 362.17,651.59 362.17,651.59
360.70,646.26 358.55,641.94 355.72,638.63
352.89,635.32 348.97,632.74 343.96,630.91
339.00,629.03 333.43,628.10 327.27,628.10
318.77,628.10 311.27,629.72 304.75,632.96
298.24,636.20 293.23,641.16 289.74,647.86
286.29,654.52 284.57,661.70 284.57,669.40
284.57,677.18 286.31,684.21 289.80,690.51
293.29,696.81 298.45,701.64 305.28,704.98
312.14,708.30 319.76,709.95 328.14,709.95
334.35,709.95 340.40,708.93 346.29,706.87
352.19,704.79 357.91,701.69 363.45,697.59
363.45,697.59 363.45,668.21 363.45,668.21
363.45,668.21 327.33,668.27 327.33,668.27
327.33,668.27 327.33,677.56 327.33,677.56
327.33,677.56 327.33,677.56 327.33,677.56 Z" />
<path class="path"
d="M 507.97,708.60
C 507.97,708.60 507.97,675.07 507.97,675.07
507.97,675.07 542.00,629.45 542.00,629.45
542.00,629.45 528.85,629.45 528.85,629.45
528.85,629.45 512.33,652.72 512.33,652.72
508.68,657.90 505.58,662.56 503.02,666.70
500.35,662.24 497.46,657.78 494.35,653.31
494.35,653.31 477.54,629.45 477.54,629.45
477.54,629.45 463.81,629.45 463.81,629.45
463.81,629.45 496.68,675.07 496.68,675.07
496.68,675.07 496.68,708.60 496.68,708.60
496.68,708.60 507.97,708.60 507.97,708.60 Z" />
<svg class="rau" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 744 1052">
<path fill="transparent"
d="M 412.00,618.00
C 413.26,622.12 415.23,630.78 412.83,634.62
411.19,637.24 405.78,639.83 403.00,641.24
399.25,643.15 392.07,647.62 388.00,646.83
382.96,645.84 376.59,641.93 375.00,637.00
375.00,637.00 412.00,618.00 412.00,618.00 Z
M 456.00,638.00
C 453.00,641.53 444.87,647.78 440.00,647.15
437.27,646.80 429.68,642.52 427.00,641.00
424.51,639.59 418.71,637.06 417.79,634.61
416.15,631.55 417.06,621.31 417.79,618.00
427.34,620.52 447.41,632.41 456.00,638.00 Z
M 392.00,658.00
C 392.02,648.61 392.70,649.48 403.00,644.06
406.29,642.33 410.24,639.77 414.00,639.42
418.62,638.99 434.32,646.51 437.43,649.90
440.00,652.72 439.07,665.81 439.00,670.00
438.85,678.06 435.82,677.58 428.00,681.86
424.25,683.91 417.29,688.06 413.00,687.26
413.00,687.26 392.00,677.00 392.00,677.00
392.00,677.00 392.00,658.00 392.00,658.00 Z
M 387.40,652.10
C 388.23,654.15 388.00,659.58 387.97,662.00
388.00,664.90 388.98,672.85 387.97,674.79
386.03,678.33 374.95,682.62 371.00,684.00
371.00,684.00 370.00,666.00 370.00,666.00
370.00,666.00 371.00,642.00 371.00,642.00
375.46,643.27 385.60,647.68 387.40,652.10 Z
M 442.93,675.61
C 440.85,672.21 442.36,660.19 442.93,656.00
443.10,653.66 442.93,651.53 444.60,649.63
446.53,647.45 455.96,643.15 459.00,642.00
459.00,642.00 460.00,663.00 460.00,663.00
460.00,663.00 459.00,684.00 459.00,684.00
455.41,682.66 444.92,678.59 442.93,675.61 Z
M 418.74,690.63
C 420.03,689.14 427.76,685.11 430.00,683.86
432.60,682.41 438.20,678.91 441.00,679.06
443.92,679.22 453.96,685.25 457.00,687.00
457.00,687.00 457.00,689.00 457.00,689.00
457.00,689.00 418.00,708.00 418.00,708.00
416.86,703.98 415.86,693.97 418.74,690.63 Z
M 391.00,679.49
C 393.67,679.81 400.35,683.38 403.00,684.78
405.10,685.89 410.77,688.84 412.00,690.63
414.06,693.60 412.98,704.55 412.00,708.00
402.07,705.19 384.50,694.31 375.00,689.00
377.45,684.28 385.41,678.83 391.00,679.49 Z" /></svg>
</g>
</svg>
</div>
</div>
<!-- Github and Twitter Links -->
<div class="social">
<a href="https://ngoy.de" target="_blank">
<svg class="rau" viewBox="0 0 512 512">
<path d="M 193.32,260.00
C 193.32,260.00 244.42,372.37 244.42,372.37
244.42,372.37 137.58,260.00 137.58,260.00
137.58,260.00 193.32,260.00 193.32,260.00 Z
M 305.24,260.00
C 305.24,260.00 256.32,371.20 256.32,371.20
256.32,371.20 207.41,260.00 207.41,260.00
207.41,260.00 305.24,260.00 305.24,260.00 Z
M 268.37,372.37
C 268.37,372.37 319.33,260.00 319.33,260.00
319.33,260.00 371.53,260.00 371.53,260.00
371.53,260.00 268.37,372.37 268.37,372.37 Z
M 257.35,201.29
C 257.35,201.29 301.22,247.10 301.22,247.10
301.22,247.10 213.49,247.10 213.49,247.10
213.49,247.10 257.35,201.29 257.35,201.29 Z
M 312.68,243.09
C 312.68,243.09 268.90,197.37 268.90,197.37
268.90,197.37 332.79,197.37 332.79,197.37
332.79,197.37 312.68,243.09 312.68,243.09 Z
M 245.81,197.37
C 245.81,197.37 200.62,244.57 200.62,244.57
200.62,244.57 179.86,197.37 179.86,197.37
179.86,197.37 245.81,197.37 245.81,197.37 Z
M 325.00,247.10
C 325.00,247.10 343.55,204.94 343.55,204.94
343.55,204.94 371.66,247.10 371.66,247.10
371.66,247.10 325.00,247.10 325.00,247.10 Z
M 169.51,205.88
C 169.51,205.88 187.65,247.10 187.65,247.10
187.65,247.10 141.66,247.10 141.66,247.10
141.66,247.10 169.51,205.88 169.51,205.88 Z
M 121.00,258.16
C 121.00,258.16 255.47,400.00 255.47,400.00
255.47,400.00 389.95,256.32 389.95,256.32
389.95,256.32 345.74,190.00 345.74,190.00
345.74,190.00 167.05,190.00 167.05,190.00
167.05,190.00 121.00,258.16 121.00,258.16 Z" />
</svg>
</a>
</div>
//
// style.scss
//
$gold : #c0a062;
$line-width : 2px;
$text-color: rgba(0,0,0,0.75);
@mixin transition($num) {
-webkit-transition: $num all ease;
-moz-transition: $num all ease;
-ms-transition: $num all ease;
transition: $num all ease;
}
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,200,500,600);
$font-family : 'Raleway', serif;
body {
font-family: $font-family;
background: white;
overflow-x: hidden;
}
body::-webkit-scrollbar-track {
background-color: #fff;
}
body::-webkit-scrollbar {
width: 3px;
background-color: #fff;
}
body::-webkit-scrollbar-thumb {
background-color: $gold;
}
::selection {
background: #fff; /* WebKit/Blink Browsers */
}
.rau path {
stroke: #00c2e1;
stroke-opacity: 0;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
animation: offset .5s linear forwards,
fill-it 5s 1s forwards,
shine .3s 2.5s ease-in;
}
.rau path:nth-of-type(1) {
stroke-dasharray: 233;
stroke-dashoffset: 233;
}
@keyframes offset {
10% {
}
100% {
stroke-opacity: 0;
stroke-dashoffset: 0;
}
}
@keyframes fill-it {
100% {
fill: #00c2e1;
}
}
::-moz-selection {
background: #fff; /* Gecko Browsers */
}
.mark {
position: fixed;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 60%;
max-width: 580px;
max-height: 440px;
z-index: 2;
background-color: white;
p {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
font-size : 20px;
}
}
.height {
height: 2000px;
}
.illustration {
svg {
position: fixed;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 580px;
max-height: 440px;
z-index: 1;
g {
stroke: $gold;
stroke-width: 3;
fill: none;
}
}
}
.social {
position: fixed;
top: 20px;
right: 30px;
a {
outline: 0;
text-decoration: none;
&:hover, :link , :visited, :active {
outline: 0;
text-decoration: none;
}
svg {
width: 100px;
height: 100px;
margin: 10px 5px;
path {
fill: $gold;
@include transition(400ms);
}
}
}
}
//
// playwithme.js
//
$(document).ready(function() {
var showed = false
var path = document.querySelector('.path')
var length = path.getTotalLength()
var $dashOffset = length + 50
$('.path').css({'stroke-dasharray':length})
$(window).scroll(function() {
if ($(window).scrollTop() > 5) {
$('.mark').css({display:'none'})
} else {
$('.mark').css({display:'block'})
}
//calculate how far down the page the user is
var $percentageComplete = (($(window).scrollTop() / ($("html").height() - $(window).height())) * 100)
//convert dashoffset pixel value to interger
var $newUnit = parseInt($dashOffset, 10)
//get the value to be subtracted from the 'stroke-dashoffset'
var $offsetUnit = $percentageComplete * ($newUnit / 100)
//set the new value of the dashoffset to create the drawing effect
$(".illustration svg g path").css("stroke-dashoffset", $newUnit - $offsetUnit)
})
})
Also see: Tab Triggers