cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

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

})
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console