Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>Scroll to Draw</h1>

<svg class="kraken" width="256px" height="274px" viewBox="0 0 256 274">
        <path fill="none" stroke="#fff" stroke-width="3" d="M225.129651,185.61219 C224.727365,182.869333 223.605841,180.278857 222.136889,178.178032 C220.663873,176.069079 218.904381,174.360381 217.061587,172.968635 C213.357714,170.191238 209.340952,168.48254 205.269333,167.419937 C204.938159,167.332571 204.606984,167.251302 204.271746,167.172063 C205.293714,165.839238 206.222222,164.48 207.081651,163.065905 C208.816762,160.184889 210.271492,157.104762 211.252825,153.803175 C212.21181,150.507683 212.660825,146.95619 212.232127,143.455492 C211.819683,139.958857 210.490921,136.604444 208.501841,133.914413 C207.52254,132.557206 206.413206,131.338159 205.224635,130.247111 L204.318476,129.452698 C204.007619,129.19873 203.696762,128.950857 203.37981,128.705016 L202.406603,127.989841 L201.45981,127.351873 C201.033143,127.065397 200.452063,127.099937 200.064,127.467683 C199.612952,127.892317 199.596698,128.601397 200.021333,129.050413 L200.805587,129.879365 L201.512635,130.690032 L202.195302,131.533206 L202.841397,132.390603 C203.672381,133.55073 204.38146,134.765714 204.936127,136.015238 C206.053587,138.516317 206.520889,141.13727 206.329905,143.689143 C206.145016,146.247111 205.332317,148.738032 204.131556,151.084698 C202.942984,153.433397 201.372444,155.652063 199.584508,157.685841 C198.694603,158.701714 197.74781,159.678984 196.774603,160.577016 C196.532825,160.800508 196.289016,161.017905 196.04927,161.219048 C195.931429,161.318603 195.813587,161.42019 195.709968,161.499429 L195.671365,161.527873 L195.659175,161.533968 C195.640889,161.54819 195.809524,161.389714 195.72419,161.466921 C195.72419,161.464889 195.726222,161.462857 195.726222,161.460825 C195.736381,161.448635 195.716063,161.464889 195.709968,161.466921 L195.561651,161.564444 C195.10654,161.861079 194.56,162.198349 194.01346,162.501079 C191.802921,163.728254 189.401397,164.703492 187.005968,165.296762 C184.600381,165.90019 182.194794,166.127746 179.868444,166.020063 C177.538032,165.914413 175.286857,165.418667 173.125079,164.634413 C173.027556,164.599873 172.930032,164.56127 172.832508,164.522667 C173.283556,164.457651 173.732571,164.384508 174.189714,164.293079 C175.609905,164.006603 177.066667,163.588063 178.511238,162.984635 C179.949714,162.383238 181.382095,161.590857 182.682413,160.601397 C183.988825,159.618032 185.161143,158.45181 186.138413,157.19619 C187.115683,155.942603 187.904,154.607746 188.503365,153.272889 C189.110857,151.940063 189.549714,150.60927 189.882921,149.308952 C190.197841,148.012698 190.409143,146.740825 190.533079,145.505524 C190.780952,143.028825 190.730159,140.692317 190.549333,138.437079 L190.47619,137.589841 L190.378667,136.71619 C190.344127,136.431746 190.315683,136.120889 190.277079,135.862857 L190.163302,135.125333 L190.106413,134.755556 L190.077968,134.572698 L190.063746,134.48127 L190.057651,134.43454 L190.053587,134.41219 C190.053587,134.422349 190.039365,134.243556 190.04546,134.308571 L189.929651,133.601524 L189.704127,132.187429 C189.40546,130.299937 189.151492,128.414476 188.944254,126.524952 C188.822349,125.578159 188.767492,124.639492 188.676063,123.692698 C188.596825,122.747937 188.554159,121.80927 188.487111,120.862476 C188.411937,118.985143 188.350984,117.095619 188.418032,115.230476 C188.42819,114.29181 188.50946,113.369397 188.552127,112.436825 C188.63746,111.518476 188.700444,110.583873 188.83454,109.673651 C189.072254,107.845079 189.415619,106.036825 189.919492,104.297651 C190.421333,102.558476 191.09181,100.890413 191.959365,99.3584762 C192.812698,97.816381 193.897651,96.4286984 195.232508,95.351873 C195.896889,94.8073651 196.630349,94.360381 197.414603,94.0251429 C197.804698,93.8565079 198.211048,93.7142857 198.625524,93.6045714 C198.832762,93.5456508 199.009524,93.5192381 199.208635,93.4704762 C199.426032,93.4339048 199.696254,93.4196825 199.938032,93.3912381 L199.97054,93.3892063 C200.480508,93.3323175 200.899048,92.928 200.955937,92.3977143 C201.020952,91.784127 200.576,91.2335238 199.962413,91.1685079 C199.708444,91.1420952 199.482921,91.1034921 199.204571,91.0852063 C198.907937,91.0791111 198.590984,91.0628571 198.30654,91.0770794 C197.737651,91.0973968 197.16673,91.1624127 196.605968,91.2700952 C195.486476,91.4895238 194.399492,91.8816508 193.389714,92.4038095 C191.36,93.44 189.612698,94.9353651 188.16,96.6176508 C186.70527,98.3060317 185.526857,100.181333 184.539429,102.119619 C183.556063,104.059937 182.765714,106.067302 182.101333,108.101079 C181.751873,109.116952 181.481651,110.140952 181.189079,111.169016 C180.937143,112.195048 180.677079,113.231238 180.475937,114.265397 C180.035048,116.337778 179.734349,118.414222 179.453968,120.496762 C179.206095,122.575238 179.023238,124.65981 178.905397,126.738286 C178.785524,128.816762 178.718476,130.893206 178.702222,132.965587 L178.70019,134.519873 L178.70019,135.298032 C178.706286,135.379302 178.692063,135.216762 178.694095,135.241143 L178.694095,135.265524 L178.694095,135.312254 L178.692063,135.405714 L178.692063,135.592635 L178.690032,135.966476 L178.683937,136.712127 C178.681905,136.949841 178.663619,137.132698 178.655492,137.346032 L178.620952,137.959619 L178.57219,138.599619 C178.440127,140.310349 178.192254,141.952 177.789968,143.39454 C177.588825,144.113778 177.353143,144.78019 177.101206,145.385651 C176.837079,145.974857 176.550603,146.499048 176.247873,146.929778 C175.634286,147.803429 175.014603,148.238222 174.364444,148.518603 C173.718349,148.794921 172.913778,148.97981 171.820698,149.014349 C170.73981,149.052952 169.427302,148.922921 168.031492,148.622222 C167.832381,148.581587 167.63327,148.538921 167.430095,148.49219 C167.430095,148.49219 162.336508,146.696127 164.010667,140.867048 C165.146413,138.756063 167.224889,136.582095 171.058794,136.015238 C171.058794,136.015238 179.236571,72.6897778 127.993905,31.983746 C127.961397,31.9593651 127.926857,31.983746 127.926857,31.983746 C76.6902857,72.6836825 84.8680635,136.009143 84.8680635,136.009143 C88.9559365,136.612571 91.0526984,139.046603 92.1295238,141.279492 C93.3566984,146.401524 89.2363175,148.234159 88.6674286,148.459683 C88.4297143,148.516571 88.1940317,148.571429 87.9624127,148.616127 C86.5645714,148.916825 85.2520635,149.046857 84.1711746,149.008254 C83.080127,148.971683 82.2755556,148.788825 81.6274286,148.512508 C80.9793016,148.230095 80.3575873,147.795302 79.7460317,146.923683 C79.4453333,146.492952 79.1568254,145.968762 78.8926984,145.379556 C78.6407619,144.772063 78.4050794,144.107683 78.2039365,143.388444 C77.8036825,141.945905 77.5578413,140.302222 77.423746,138.593524 L77.3749841,137.953524 L77.3424762,137.339937 C77.3323175,137.128635 77.3160635,136.945778 77.312,136.706032 L77.3079365,135.960381 L77.3059048,135.58654 L77.303873,135.399619 L77.303873,135.306159 L77.303873,135.259429 L77.303873,135.235048 C77.3059048,135.210667 77.2916825,135.373206 77.2977778,135.291937 L77.2977778,134.513778 L77.295746,132.959492 C77.2794921,130.887111 77.2144762,128.810667 77.0925714,126.73219 C76.9747302,124.653714 76.791873,122.569143 76.544,120.490667 C76.263619,118.408127 75.9629206,116.331683 75.5220317,114.259302 C75.3249524,113.225143 75.0628571,112.188952 74.8088889,111.162921 C74.5183492,110.134857 74.2460952,109.110857 73.8986667,108.094984 C73.232254,106.063238 72.4439365,104.053841 71.4585397,102.113524 C70.4731429,100.17727 69.2926984,98.3019683 67.8379683,96.6115556 C66.3873016,94.9292698 64.6379683,93.4339048 62.6062222,92.3977143 C61.5964444,91.8755556 60.5114921,91.4854603 59.3899683,91.264 C58.8292063,91.1583492 58.2603175,91.0913016 57.6893968,91.0709841 C57.4049524,91.0567619 57.0859683,91.0730159 56.7913651,91.0791111 C56.5130159,91.0973968 56.2874921,91.1339683 56.0335238,91.1624127 C55.4199365,91.2274286 54.9749841,91.7780317 55.04,92.391619 C55.0948571,92.9219048 55.5154286,93.3262222 56.0253968,93.3831111 L56.0579048,93.3851429 C56.2996825,93.4135873 56.5699048,93.4278095 56.7873016,93.464381 C56.9864127,93.5131429 57.1652063,93.5395556 57.3704127,93.5984762 C57.7848889,93.7081905 58.1871746,93.848381 58.5793016,94.0190476 C59.3635556,94.3542857 60.0990476,94.8012698 60.7613968,95.3457778 C62.0982857,96.4226032 63.1812063,97.8102857 64.0345397,99.352381 C64.9020952,100.882286 65.5705397,102.552381 66.0744127,104.291556 C66.5782857,106.03073 66.9216508,107.838984 67.1593651,109.667556 C67.2934603,110.577778 67.3584762,111.512381 67.4417778,112.43073 C67.4844444,113.365333 67.567746,114.285714 67.5738413,115.224381 C67.6429206,117.087492 67.5819683,118.979048 67.5088254,120.856381 C67.439746,121.803175 67.3970794,122.741841 67.3178413,123.686603 C67.2264127,124.633397 67.1715556,125.572063 67.0496508,126.518857 C66.8444444,128.408381 66.5904762,130.293841 66.2897778,132.181333 L66.0622222,133.595429 L65.9504762,134.302476 C65.9545397,134.23746 65.9403175,134.416254 65.9403175,134.406095 L65.9382857,134.428444 L65.9321905,134.475175 L65.9179683,134.566603 L65.8874921,134.74946 L65.8306032,135.119238 L65.7188571,135.856762 C65.6822857,136.114794 65.6497778,136.427683 65.6172698,136.710095 L65.5217778,137.583746 L65.4486349,138.430984 C65.2678095,140.68419 65.2129524,143.02273 65.4628571,145.499429 C65.5888254,146.73473 65.7980952,148.006603 66.1150476,149.302857 C66.448254,150.605206 66.8850794,151.933968 67.4905397,153.266794 C68.0919365,154.599619 68.880254,155.934476 69.8595556,157.190095 C70.8347937,158.445714 72.0091429,159.609905 73.3135238,160.595302 C74.615873,161.584762 76.0462222,162.377143 77.4867302,162.97854 C78.9292698,163.581968 80.3860317,164.000508 81.8062222,164.286984 C82.2633651,164.378413 82.7164444,164.451556 83.1634286,164.516571 C83.0659048,164.555175 82.968381,164.593778 82.8708571,164.628317 C80.7090794,165.412571 78.4579048,165.908317 76.1295238,166.013968 C73.8031746,166.121651 71.3955556,165.892063 68.9940317,165.290667 C66.5945397,164.697397 64.1970794,163.722159 61.9824762,162.494984 C61.4379683,162.192254 60.8914286,161.857016 60.4363175,161.558349 L60.288,161.460825 C60.2819048,161.458794 60.2615873,161.44254 60.2697143,161.45473 C60.2697143,161.456762 60.2737778,161.458794 60.2737778,161.460825 C60.1884444,161.383619 60.3570794,161.542095 60.3387937,161.527873 L60.3286349,161.52381 L60.2920635,161.495365 C60.1904762,161.416127 60.0706032,161.31454 59.9527619,161.214984 C59.7150476,161.01181 59.4692063,160.796444 59.2274286,160.572952 C58.2542222,159.676952 57.3074286,158.697651 56.4175238,157.681778 C54.6295873,155.648 53.0590476,153.429333 51.8704762,151.080635 C50.6697143,148.736 49.8549841,146.243048 49.6700952,143.685079 C49.4791111,141.133206 49.9464127,138.512254 51.063873,136.011175 C51.6205714,134.761651 52.3296508,133.546667 53.1606349,132.38654 L53.8067302,131.529143 L54.4893968,130.685968 L55.1964444,129.875302 L55.9806984,129.046349 C56.4053333,128.597333 56.3870476,127.888254 55.9380317,127.463619 C55.5499683,127.095873 54.9668571,127.061333 54.5401905,127.34781 L53.5933968,127.985778 L52.6201905,128.700952 C52.3032381,128.946794 51.9944127,129.196698 51.6835556,129.448635 L50.7773968,130.243048 C49.5888254,131.334095 48.4794921,132.553143 47.4981587,133.910349 C45.5090794,136.602413 44.1823492,139.956825 43.767873,143.451429 C43.3391746,146.952127 43.7881905,150.503619 44.7492063,153.799111 C45.7285079,157.100698 47.1832381,160.180825 48.9183492,163.061841 C49.7777778,164.475937 50.7083175,165.837206 51.7302857,167.172063 C51.3950476,167.24927 51.0618413,167.326476 50.7286349,167.413841 C46.6590476,168.476444 42.6422857,170.185143 38.9384127,172.96254 C37.0976508,174.356317 35.336127,176.062984 33.8631111,178.171937 C32.3961905,180.272762 31.2746667,182.86527 30.872381,185.606095 C30.4457143,188.350984 30.8256508,191.118222 31.6200635,193.475048 C32.0304762,194.649397 32.5323175,195.742476 33.0930794,196.754286 C33.6680635,197.74781 34.2775873,198.698667 34.9460317,199.537778 C35.6022857,200.40127 36.3032381,201.177397 37.0123175,201.927111 L37.5913651,202.504127 L37.8819048,202.792635 C37.9794286,202.890159 38.0789841,202.987683 38.152127,203.050667 L39.2005079,203.98527 C40.6308571,205.21854 42.1241905,206.364444 43.648,207.437206 C46.7139048,209.564444 49.9342222,211.352381 53.1850159,212.870095 C56.1615238,214.267937 59.1664762,215.430095 62.1267302,216.537397 C62.1429841,216.580063 62.1592381,216.620698 62.1754921,216.663365 L62.4111746,217.218032 C62.4965079,217.398857 62.5960635,217.571556 62.6915556,217.750349 C62.8825397,218.101841 63.079619,218.44927 63.2827937,218.794667 L63.4351746,219.050667 L63.6058413,219.290413 L63.9532698,219.769905 C64.1889524,220.082794 64.4226032,220.40381 64.6684444,220.704508 C66.704254,223.075556 69.2784762,224.707048 71.8994286,225.670095 C74.5305397,226.639238 77.2307302,226.954159 79.7927619,226.832254 C80.111746,226.816 80.4347937,226.807873 80.7537778,226.78146 L81.6924444,226.659556 L82.6270476,226.529524 C82.935873,226.482794 83.2365714,226.403556 83.5393016,226.336508 L84.4434286,226.12927 C84.5958095,226.088635 84.7400635,226.064254 84.8985397,226.015492 L85.3780317,225.869206 L86.3268571,225.566476 L86.7982222,225.410032 C86.9546667,225.357206 87.1233016,225.300317 87.2187937,225.253587 L88.5699048,224.670476 L88.7385397,224.597333 C88.8340317,224.55873 88.5820952,224.65219 88.9640635,224.507937 L89.0006349,224.491683 L89.0758095,224.457143 L89.3724444,224.318984 L89.9657143,224.040635 C90.359873,223.843556 90.7641905,223.676952 91.1664762,223.508317 C91.5707937,223.339683 91.9730794,223.158857 92.3875556,223.016635 C94.0271746,222.380698 95.7155556,221.876825 97.4303492,221.505016 C100.855873,220.763429 104.421587,220.481016 107.845079,220.988952 C109.551746,221.242921 111.217778,221.691937 112.753778,222.37054 C114.287746,223.053206 115.701841,223.959365 116.825397,225.13981 C116.963556,225.290159 117.111873,225.434413 117.248,225.588825 L117.623873,226.070349 L117.814857,226.312127 L117.979429,226.570159 L118.310603,227.090286 C118.692571,227.815619 119.054222,228.575492 119.255365,229.402413 C119.306159,229.609651 119.37727,229.812825 119.415873,230.024127 L119.521524,230.664127 L119.576381,230.985143 C119.588571,231.092825 119.590603,231.204571 119.600762,231.312254 L119.649524,231.972571 C119.675937,232.41346 119.64546,232.829968 119.651556,233.268825 C119.610921,233.742222 119.543873,234.242032 119.493079,234.727619 L119.493079,234.73981 C119.426032,235.355429 119.870984,235.904 120.484571,235.969016 C121.029079,236.025905 121.522794,235.68254 121.673143,235.174603 C121.813333,234.701206 121.963683,234.246095 122.097778,233.754413 C122.203429,233.222095 122.339556,232.671492 122.406603,232.133079 L122.496,231.326476 C122.510222,231.192381 122.526476,231.056254 122.534603,230.920127 L122.540698,230.509714 L122.544762,229.684825 C122.54273,229.406476 122.502095,229.13219 122.481778,228.855873 C122.40254,227.740444 122.118095,226.637206 121.760508,225.554286 L121.435429,224.761905 L121.266794,224.363683 L121.067683,223.983746 L120.659302,223.221841 C120.513016,222.976 120.350476,222.744381 120.192,222.502603 C119.88927,222.008889 119.515429,221.58019 119.157841,221.129143 C118.983111,220.895492 118.775873,220.70654 118.580825,220.495238 C118.381714,220.290032 118.19073,220.074667 117.983492,219.879619 C117.144381,219.115683 116.25854,218.394413 115.311746,217.797079 C113.428317,216.569905 111.382349,215.655619 109.285587,214.991238 C105.081905,213.676698 100.681143,213.290667 96.3575873,213.58527 C94.1937778,213.729524 92.0380952,214.036317 89.9210159,214.511746 C89.3866667,214.615365 88.8645079,214.757587 88.3382857,214.891683 C87.8100317,215.021714 87.2817778,215.157841 86.7657143,215.322413 L85.9855238,215.560127 L85.5954286,215.68 L85.4979048,215.712508 L85.4491429,215.72673 C85.8006349,215.594667 85.5222857,215.696254 85.5893333,215.671873 L85.4125714,215.718603 L83.992381,216.11073 C83.8603175,216.153397 83.7892063,216.153397 83.7099683,216.161524 L83.4702222,216.192 L82.9988571,216.259048 L82.7652063,216.295619 C82.6859683,216.30781 82.5864127,216.309841 82.4970159,216.317968 L81.9545397,216.356571 C81.775746,216.36673 81.5949206,216.395175 81.416127,216.393143 L80.887873,216.380952 L80.3636825,216.376889 C80.1930159,216.362667 80.024381,216.334222 79.855746,216.317968 C78.5086984,216.17981 77.2815238,215.787683 76.304254,215.235048 C75.3249524,214.684444 74.6179048,213.965206 74.2176508,213.262222 C73.839746,212.536889 73.752381,211.862349 73.8214603,211.130921 C73.9027302,210.401524 74.1709206,209.550222 74.7255873,208.603429 C75.280254,207.660698 76.0807619,206.661079 77.0742857,205.689905 C79.128381,203.765841 81.8245079,201.97181 84.8152381,200.478476 L85.3658413,200.189968 L85.9489524,199.92381 L87.1131429,199.395556 C87.8689524,199.023746 88.7060317,198.735238 89.5004444,198.402032 L92.2412698,197.276444 L93.6025397,196.717714 L93.7711746,196.650667 L93.9641905,196.559238 L94.3563175,196.380444 L94.3583492,196.378413 L95.1385397,196.01473 C96.0914286,195.569778 97.0565079,195.124825 97.9525079,194.649397 C103.998984,191.90654 116.656762,186.863746 127.997968,186.863746 C139.339175,186.863746 151.996952,191.90654 158.04546,194.649397 C158.937397,195.124825 159.904508,195.569778 160.857397,196.01473 L161.641651,196.380444 L162.031746,196.559238 L162.226794,196.648635 L162.395429,196.717714 L163.756698,197.276444 L166.497524,198.402032 C167.293968,198.735238 168.131048,199.02781 168.886857,199.395556 L170.049016,199.92381 L170.630095,200.189968 L171.180698,200.478476 C174.171429,201.97181 176.867556,203.765841 178.923683,205.689905 C179.917206,206.661079 180.717714,207.660698 181.272381,208.603429 C181.827048,209.550222 182.093206,210.401524 182.174476,211.130921 C182.245587,211.860317 182.15619,212.534857 181.780317,213.262222 C181.380063,213.965206 180.673016,214.682413 179.693714,215.235048 C178.718476,215.787683 177.48927,216.17981 176.142222,216.317968 C175.973587,216.336254 175.804952,216.362667 175.634286,216.376889 L175.110095,216.380952 L174.57981,216.393143 C174.405079,216.395175 174.222222,216.36673 174.043429,216.356571 L173.498921,216.317968 C173.409524,216.309841 173.309968,216.30781 173.232762,216.295619 L172.999111,216.259048 L172.529778,216.192 L172.290032,216.161524 C172.210794,216.153397 172.141714,216.151365 172.007619,216.11073 L170.587429,215.718603 L170.410667,215.671873 C170.477714,215.698286 170.197333,215.594667 170.548825,215.72673 L170.500063,215.712508 L170.40254,215.68 L170.012444,215.560127 L169.232254,215.322413 C168.714159,215.157841 168.187937,215.023746 167.661714,214.891683 C167.13346,214.759619 166.611302,214.615365 166.076952,214.511746 C163.959873,214.036317 161.80419,213.729524 159.640381,213.58527 C155.314794,213.290667 150.914032,213.67873 146.712381,214.991238 C144.615619,215.655619 142.569651,216.567873 140.686222,217.797079 C139.737397,218.394413 138.851556,219.115683 138.014476,219.879619 C137.807238,220.074667 137.616254,220.290032 137.417143,220.495238 C137.224127,220.70654 137.016889,220.895492 136.842159,221.129143 C136.484571,221.58019 136.11073,222.008889 135.805968,222.502603 C135.647492,222.744381 135.486984,222.976 135.340698,223.221841 L134.932317,223.983746 L134.733206,224.363683 L134.566603,224.761905 L134.239492,225.554286 C133.881905,226.637206 133.599492,227.740444 133.520254,228.855873 C133.497905,229.13219 133.459302,229.406476 133.459302,229.684825 L133.463365,230.509714 L133.46946,230.920127 C133.475556,231.056254 133.493841,231.192381 133.508063,231.326476 L133.59746,232.133079 C133.664508,232.671492 133.804698,233.222095 133.906286,233.754413 C134.040381,234.246095 134.192762,234.701206 134.330921,235.174603 C134.483302,235.68254 134.974984,236.025905 135.521524,235.969016 C136.135111,235.904 136.580063,235.351365 136.513016,234.73981 L136.510984,234.727619 C136.46019,234.244063 136.391111,233.744254 136.35454,233.268825 C136.358603,232.829968 136.328127,232.41346 136.356571,231.972571 L136.403302,231.312254 C136.41346,231.204571 136.415492,231.092825 136.427683,230.985143 L136.48254,230.664127 L136.586159,230.024127 C136.628825,229.812825 136.697905,229.609651 136.746667,229.402413 C136.94781,228.577524 137.30946,227.815619 137.69346,227.090286 L138.026667,226.570159 L138.187175,226.312127 L138.38019,226.070349 L138.758095,225.588825 C138.89219,225.436444 139.040508,225.29219 139.178667,225.13981 C140.304254,223.959365 141.718349,223.053206 143.250286,222.37054 C144.788317,221.691937 146.452317,221.242921 148.161016,220.988952 C151.584508,220.478984 155.150222,220.763429 158.575746,221.505016 C160.29054,221.878857 161.978921,222.380698 163.614476,223.016635 C164.028952,223.158857 164.431238,223.339683 164.837587,223.508317 C165.243937,223.676952 165.64419,223.843556 166.038349,224.040635 L166.633651,224.318984 L166.930286,224.457143 L167.003429,224.491683 L167.042032,224.507937 C167.424,224.65219 167.172063,224.55873 167.267556,224.595302 L167.43619,224.670476 L168.787302,225.253587 C168.880762,225.300317 169.049397,225.357206 169.207873,225.410032 L169.677206,225.564444 L170.626032,225.869206 L171.103492,226.015492 C171.261968,226.062222 171.406222,226.088635 171.558603,226.12927 L172.464762,226.336508 C172.76546,226.401524 173.066159,226.47873 173.374984,226.529524 L174.309587,226.659556 L175.250286,226.78146 C175.567238,226.809905 175.890286,226.818032 176.213333,226.832254 C178.773333,226.954159 181.473524,226.637206 184.104635,225.670095 C186.727619,224.705016 189.301841,223.075556 191.337651,220.704508 C191.583492,220.40381 191.817143,220.082794 192.054857,219.769905 L192.402286,219.290413 L192.574984,219.050667 L192.725333,218.794667 C192.926476,218.44927 193.123556,218.101841 193.31454,217.750349 C193.410032,217.571556 193.511619,217.398857 193.594921,217.218032 L193.828571,216.663365 C193.846857,216.620698 193.861079,216.580063 193.877333,216.537397 C196.839619,215.430095 199.844571,214.267937 202.821079,212.870095 C206.069841,211.350349 209.290159,209.564444 212.356063,207.437206 C213.877841,206.364444 215.371175,205.21854 216.801524,203.98527 L217.849905,203.050667 C217.923048,202.987683 218.024635,202.890159 218.122159,202.792635 L218.412698,202.504127 L218.991746,201.927111 C219.702857,201.177397 220.399746,200.40127 221.058032,199.537778 C221.726476,198.698667 222.338032,197.74781 222.910984,196.754286 C223.471746,195.742476 223.973587,194.649397 224.386032,193.475048 C225.174349,191.124317 225.554286,188.357079 225.129651,185.61219 L225.129651,185.61219 Z M75.4610794,187.879619 C75.2274286,188.040127 74.9937778,188.186413 74.7621587,188.357079 L74.0713651,188.877206 L72.6979048,189.919492 C72.4683175,190.088127 72.2427937,190.275048 72.0193016,190.470095 L71.3467937,191.043048 C70.9018413,191.429079 70.4548571,191.800889 70.016,192.205206 L68.7258413,193.475048 C68.5125079,193.690413 68.2991746,193.897651 68.0899048,194.117079 L67.472254,194.820063 C67.0659048,195.291429 66.6554921,195.74654 66.2613333,196.240254 C64.6989206,198.231365 63.2706032,200.498794 62.232381,203.133968 C61.712254,204.448508 61.312,205.874794 61.072254,207.368127 L60.928,208.505905 C60.9239365,208.556698 60.9178413,208.611556 60.911746,208.660317 C59.5809524,207.835429 58.2786032,206.996317 57.0168889,206.122667 C54.3166984,204.285968 51.8217143,202.288762 49.5664762,200.126984 C48.4469841,199.042032 47.376254,197.920508 46.3827302,196.74819 L45.6431746,195.850159 C45.5639365,195.760762 45.5233016,195.697778 45.4786032,195.636825 L45.3445079,195.44381 L45.072254,195.063873 C44.6902857,194.499048 44.3245714,193.938286 44.0340317,193.377524 C43.7191111,192.822857 43.4976508,192.274286 43.2904127,191.748063 C43.1075556,191.223873 42.9815873,190.724063 42.9064127,190.262857 C42.7926349,189.336381 42.871873,188.606984 43.1299048,187.991365 C43.383873,187.377778 43.7719365,186.804825 44.3834921,186.199365 C44.9930159,185.597968 45.8057143,184.992508 46.7890794,184.468317 C48.7497143,183.409778 51.2609524,182.684444 53.863619,182.349206 C56.4764444,182.005841 59.2071111,182.072889 61.848381,182.471111 C64.495746,182.861206 67.0618413,183.621079 69.4146032,184.695873 C70.0058413,184.96 70.5787937,185.25054 71.1395556,185.559365 L71.9685079,186.034794 L72.679619,186.40254 L73.1875556,186.646349 L73.6792381,186.869841 C74.3456508,187.164444 75.0405079,187.434667 75.7577143,187.680508 L75.4610794,187.879619 L75.4610794,187.879619 Z M112.548571,143.849651 C110.268952,143.849651 108.422095,142.002794 108.422095,139.723175 C108.422095,137.445587 110.268952,135.596698 112.548571,135.596698 C114.82819,135.596698 116.675048,137.445587 116.675048,139.723175 C116.675048,142.002794 114.82819,143.849651 112.548571,143.849651 L112.548571,143.849651 Z M143.451429,143.849651 C141.17181,143.849651 139.324952,142.002794 139.324952,139.723175 C139.324952,137.445587 141.17181,135.596698 143.451429,135.596698 C145.731048,135.596698 147.577905,137.445587 147.577905,139.723175 C147.579937,142.002794 145.733079,143.849651 143.451429,143.849651 L143.451429,143.849651 Z M213.089524,190.260825 C213.014349,190.724063 212.888381,191.223873 212.707556,191.746032 C212.500317,192.272254 212.276825,192.818794 211.963937,193.375492 C211.671365,193.936254 211.305651,194.497016 210.925714,195.061841 L210.65346,195.441778 L210.519365,195.634794 C210.476698,195.695746 210.434032,195.760762 210.356825,195.848127 L209.61727,196.746159 C208.623746,197.918476 207.550984,199.04 206.433524,200.124952 C204.180317,202.28673 201.683302,204.283937 198.985143,206.120635 C197.723429,206.994286 196.421079,207.833397 195.092317,208.660317 C195.086222,208.609524 195.080127,208.554667 195.074032,208.503873 L194.929778,207.366095 C194.692063,205.872762 194.289778,204.446476 193.769651,203.131937 C192.731429,200.496762 191.305143,198.231365 189.74273,196.238222 C189.350603,195.744508 188.938159,195.289397 188.53181,194.818032 L187.91619,194.115048 C187.704889,193.895619 187.491556,193.688381 187.280254,193.473016 L185.986032,192.203175 C185.549206,191.798857 185.10019,191.427048 184.65727,191.041016 L183.984762,190.468063 C183.763302,190.273016 183.535746,190.086095 183.306159,189.91746 L181.932698,188.875175 L181.241905,188.355048 C181.012317,188.184381 180.776635,188.038095 180.542984,187.877587 L180.244317,187.676444 C180.963556,187.430603 181.656381,187.158349 182.322794,186.865778 L182.814476,186.642286 L183.322413,186.398476 L184.033524,186.03073 L184.862476,185.555302 C185.423238,185.248508 185.998222,184.955937 186.587429,184.69181 C188.94019,183.619048 191.508317,182.859175 194.153651,182.467048 C196.796952,182.070857 199.527619,182.001778 202.138413,182.345143 C204.741079,182.680381 207.254349,183.403683 209.212952,184.464254 C210.194286,184.988444 211.011048,185.593905 211.616508,186.195302 C212.230095,186.800762 212.618159,187.373714 212.870095,187.987302 C213.124063,188.602921 213.205333,189.334349 213.089524,190.260825 L213.089524,190.260825 Z"></path>
    </g>
</svg>

              
            
!

CSS

              
                body {
  height: 5000px;
  background: linear-gradient(to bottom, #6BB9F0, #446CB3);
}

h1 {
  font-family: sans-serif;
  color: #fff;
  text-align: center;
}

.kraken {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 250px;
  margin: -125px 0 0 -125px;
}
              
            
!

JS

              
                // Seleciona o path do nosso desenho
var path = document.querySelector('path');

// Pega o tamanho total dele
var pathLength = path.getTotalLength();

// Faz com que o stroke-dasharray fique com o tamanho total
path.style.strokeDasharray = pathLength;

// Faz com que o stroke-offset fique com o tamanho total
// Escondendo assim o desenho
path.style.strokeDashoffset = pathLength;

// Adiciona o evento de Scroll
window.addEventListener("scroll", function(e) {
 
  // determina a porcentagem do quanto o usuário já scrollou na tela
  var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
    
  // Determinando o tamanho do desenho pela porcentagem
  var drawLength = pathLength * scrollPercentage;
  
  // Diminuindo o valor do offset para criar o desenho
  path.style.strokeDashoffset = pathLength - drawLength;
  
});
              
            
!
999px

Console