css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <svg viewBox="0 0 100 100">
  <defs>
    <clipPath id="p1">
      <path
            d="m 6.5625,62.1875 c -0.4186614,-0.258123 -0.1463921,-0.03269 0.2232143,-1.116071 0.3696064,-1.083379 1.9883237,-3.912782 2.5446428,-5.133929 0.5563191,-1.221147 0.592824,-1.496041 0.8928569,-2.142857 0.300033,-0.646816 0.564005,-1.072031 0.892857,-1.741071 0.328852,-0.66904 0.631675,-1.332192 1.071429,-2.276786 0.439754,-0.944594 1.133409,-2.509628 1.5625,-3.392857 0.429091,-0.883229 0.490304,-0.903971 0.982143,-1.919643 0.491839,-1.015672 1.488818,-3.132347 1.919643,-4.196429 0.430825,-1.064082 0.507902,-1.627876 0.758928,-2.142857 0.251026,-0.514981 0.417754,-0.848433 0.625,-0.982143 0.207246,-0.13371 0.176565,-0.107162 0.3125,-0.04464 0.135935,0.06252 0.231856,0.258068 0.3125,0.491071 0.08064,0.233003 0.01125,0.568804 0.08929,0.892857 0.07804,0.324053 0.277767,0.565819 0.401786,1.026786 0.124019,0.460967 0.278597,1.0842 0.267857,1.741071 -0.01074,0.656871 -0.18073,1.415693 -0.401786,2.142857 -0.221056,0.727164 -0.623605,1.510709 -0.9375,2.1875 -0.313895,0.676791 -0.4659,1.062348 -0.9375,1.875 -0.4716,0.812652 -1.360093,2.069347 -1.964286,2.946429 -0.604193,0.877082 -1.29268,1.824315 -1.651785,2.321429 -0.359105,0.497114 -0.266996,0.357739 -0.491072,0.669642 -0.224076,0.311903 -0.617324,0.785489 -0.848214,1.205358 -0.23089,0.419869 -0.488746,1.058306 -0.535714,1.294642 -0.04697,0.236336 0.101122,-0.17821 0,0.04464 -0.101122,0.22285 -0.809295,0.575018 -1.071429,0.9375 -0.262134,0.362482 -0.238499,0.785782 -0.491071,1.160714 -0.2525719,0.374932 -0.8627311,0.74409 -1.026786,1.026786 -0.1640549,0.282696 -0.032846,0.347414 -0.1339286,0.491072 -0.1010828,0.143658 -0.2544849,0.07195 -0.4464286,0.3125 -0.1919437,0.240552 -0.1780823,0.791269 -0.4910714,1.205357 -0.3129891,0.414088 -1.009914,1.374195 -1.4285754,1.116072 z" />
    </clipPath>
    <clipPath id="p2">
      <path
            d="m 14.464286,39.241072 c -0.163783,-0.05116 -0.411594,-0.160434 -0.580357,-0.401786 -0.168763,-0.241352 -0.317268,-0.506145 -0.267858,-1.026786 0.04941,-0.520641 0.521341,-1.391157 0.892857,-1.875 0.371516,-0.483843 0.834442,-0.807074 1.205358,-1.026785 0.370916,-0.219711 0.559582,-0.294311 0.9375,-0.357143 0.377918,-0.06283 0.842088,-0.04133 1.294642,0.04464 0.452554,0.08597 0.91378,0.291012 1.383929,0.491071 0.470149,0.200059 1.052209,0.558392 1.428571,0.714286 0.376362,0.155894 0.27208,0.04294 0.803572,0.267857 0.531492,0.224919 1.700449,0.806401 2.321428,1.205357 0.620979,0.398956 1.076525,0.729316 1.428572,1.116071 0.352047,0.386755 0.490752,0.662534 0.714286,1.116072 0.223534,0.453538 0.503179,1.074505 0.580357,1.607143 0.07718,0.532638 -0.04358,1.041442 -0.08929,1.517857 -0.04571,0.476415 -0.07605,0.875851 -0.178571,1.339286 -0.102522,0.463435 -0.262177,1.082145 -0.446429,1.428571 -0.184252,0.346426 -0.278585,0.436282 -0.535714,0.669643 -0.257129,0.233361 -0.624102,0.520262 -1.026786,0.669643 -0.402684,0.149381 -1.05622,0.274398 -1.339286,0.178571 -0.283066,-0.09583 -0.05375,-0.23311 -0.3125,-0.3125 -0.258748,-0.07939 -0.901073,0.245177 -1.160714,0.223214 -0.259641,-0.02196 -0.173143,-0.117933 -0.357143,-0.133928 -0.184,-0.016 -0.556641,0.119276 -0.714286,0.133928 -0.157645,0.01465 -0.170602,0.05261 -0.223214,0 -0.05261,-0.05261 -0.04248,-0.0343 0,-0.223214 0.04248,-0.188912 0.16739,-0.377508 0.401786,-0.848214 0.234396,-0.470706 0.729642,-1.308048 1.026786,-1.964286 0.297144,-0.656238 0.630602,-1.479543 0.758928,-1.964286 0.128326,-0.484743 0.0945,-0.438941 0.133929,-0.892857 0.03943,-0.453916 0.125112,-1.395804 0.04464,-1.830357 -0.08047,-0.434553 -0.158679,-0.493867 -0.3125,-0.758928 -0.153821,-0.265061 -0.419535,-0.62376 -0.625,-0.803572 -0.205465,-0.179812 -0.283932,-0.206889 -0.535715,-0.3125 -0.251783,-0.105611 -0.698007,-0.211647 -0.982143,-0.267857 -0.284136,-0.05621 -0.472463,-0.06135 -0.714285,-0.08929 -0.241822,-0.02794 -0.540739,-0.07029 -0.736607,-0.07813 -0.195868,-0.0078 -0.231341,-0.03515 -0.435268,0.01116 -0.203927,0.04631 -0.508948,0.204137 -0.747768,0.334821 -0.23882,0.130684 -0.48947,0.317667 -0.680804,0.446429 -0.191334,0.128762 -0.276424,0.17174 -0.46875,0.323661 -0.192326,0.151921 -0.467057,0.416461 -0.669642,0.602678 -0.202585,0.186217 -0.393725,0.396522 -0.546875,0.513393 -0.15315,0.116871 -0.228974,0.179047 -0.345983,0.212054 -0.117009,0.03301 -0.15987,0.05117 -0.323653,1.3e-5 z" />
    </clipPath>
    <clipPath id="i1">
      <path
            d="m 31.630401,50.249987 c -0.02482,0.07311 -0.02038,0.193802 -0.112544,0.274567 -0.09217,0.08076 -0.29497,0.10354 -0.424107,0.111607 -0.129137,0.0081 -0.227482,-0.01253 -0.334822,-0.04464 -0.10734,-0.03211 -0.179355,-0.02233 -0.301339,-0.145089 -0.121984,-0.122761 -0.176173,-0.45855 -0.301339,-0.636161 -0.125166,-0.177611 -0.281504,-0.237404 -0.424107,-0.424107 -0.142603,-0.186703 -0.256342,-0.346741 -0.401786,-0.703125 -0.145444,-0.356384 -0.337288,-0.982708 -0.379464,-1.450893 -0.04218,-0.468185 -0.04459,-0.910902 0.100446,-1.316964 0.14504,-0.406062 0.429627,-0.745634 0.725447,-1.037947 0.29582,-0.292313 0.720651,-0.586945 1.015625,-0.691964 0.294974,-0.105019 0.356192,-0.137918 0.647321,-0.0558 0.291129,0.08212 0.701722,0.372363 0.9375,0.691964 0.235778,0.319601 0.351362,0.725254 0.401786,1.149553 0.05042,0.424299 -0.07938,0.915085 -0.133929,1.339286 -0.05455,0.424201 -0.115958,0.880193 -0.189732,1.205357 -0.07377,0.325164 -0.188015,0.506796 -0.223214,0.747768 -0.0352,0.240972 0.0074,0.498436 0,0.680804 -0.0074,0.182368 0.02391,0.318108 -0.03348,0.412946 -0.05739,0.09484 -0.134151,0.135447 -0.212054,0.133929 -0.0779,-0.0015 -0.121538,-0.05615 -0.178571,-0.122768 -0.05703,-0.06662 -0.05492,-0.286226 -0.133929,-0.279018 -0.07901,0.0072 -0.01889,0.08758 -0.04371,0.160695 z" />
    </clipPath>
    <clipPath id="i2">
      <path
            d="m 35.355339,39.5329 c -0.179794,0.01935 -0.404939,-0.03411 -0.583995,-0.157836 -0.179056,-0.123722 -0.317606,-0.328398 -0.410374,-0.568211 -0.09277,-0.239813 -0.133013,-0.589665 -0.0947,-0.836532 0.03831,-0.246867 0.145982,-0.440135 0.268322,-0.599778 0.12234,-0.159643 0.292751,-0.299771 0.426158,-0.34724 0.133407,-0.04747 0.17943,-0.03647 0.299889,0 0.120459,0.03647 0.213957,0.0582 0.378807,0.252538 0.16485,0.194335 0.383226,0.705914 0.441942,0.978585 0.05872,0.272671 0.05466,0.416595 0,0.599778 -0.05466,0.183183 -0.172831,0.342968 -0.299889,0.457725 -0.127058,0.114757 -0.246366,0.201624 -0.42616,0.220971 z" />
    </clipPath>
    <clipPath id="ca">
      <path
            d="m 46.26183,40.57462 c -0.105755,-0.112598 -0.28616,-0.197155 -0.52086,-0.236754 -0.2347,-0.0396 -0.505374,3.67e-4 -0.852316,0.07892 -0.346942,0.07855 -0.822325,0.240297 -1.199557,0.441941 -0.377232,0.201644 -0.749711,0.443944 -1.041719,0.757615 -0.292008,0.313671 -0.467413,0.704714 -0.678697,1.089071 -0.211284,0.384357 -0.480639,0.941149 -0.583994,1.215339 -0.103355,0.27419 -0.04248,0.264521 -0.110486,0.394591 -0.068,0.13007 -0.174884,0.186223 -0.299889,0.363024 -0.125005,0.176801 -0.296862,0.462641 -0.426158,0.710263 -0.129296,0.247622 -0.265919,0.556113 -0.34724,0.773398 -0.08132,0.217285 -0.105224,0.34724 -0.157836,0.52086 -0.05261,0.17362 -0.118646,0.301864 -0.157836,0.52086 -0.03919,0.218996 -0.09175,0.619341 -0.04735,0.789182 0.0444,0.169841 -0.01068,0.03691 0.142053,0.220971 0.152732,0.184058 0.514137,0.565767 0.852316,0.804965 0.338179,0.239198 0.781218,0.407798 1.167989,0.599778 0.386771,0.19198 0.779353,0.446675 1.152205,0.552427 0.372852,0.105752 0.590386,0.101662 1.04172,0.110486 0.451334,0.0088 1.113236,0.01667 1.657281,-0.110486 0.544045,-0.127157 1.161932,-0.460712 1.56258,-0.647129 0.400648,-0.186417 0.622024,-0.286988 0.852316,-0.441941 0.230292,-0.154953 0.180144,-0.171102 0.536644,-0.457726 0.3565,-0.286624 1.192787,-0.914751 1.625714,-1.231123 0.432927,-0.316372 0.689047,-0.408404 0.962801,-0.678696 0.273754,-0.270292 0.471549,-0.61436 0.662913,-0.915451 0.191364,-0.301091 0.275177,-0.624359 0.489293,-0.883884 0.214116,-0.259525 0.565313,-0.565904 0.773398,-0.647129 0.208085,-0.08122 0.239012,-0.03959 0.331456,-0.01578 0.09244,0.02381 0.149142,0.03019 0.205187,0.126269 0.05604,0.09608 0.0078,-0.318392 0.01578,0.426158 0.008,0.74455 -0.193035,3.336477 -0.06313,4.04061 0.129905,0.704133 0.03352,0.179065 0.0947,0.236755 0.06118,0.05769 0.146775,0.07428 0.236755,0.07892 0.08998,0.0046 0.189405,-0.01115 0.284105,-0.06313 0.0947,-0.05198 0.222382,-0.169249 0.252538,-0.252538 0.03016,-0.08329 0.0015,-0.109168 -0.01578,-0.17362 -0.01725,-0.06445 -0.07876,-0.121605 -0.0947,-0.205187 -0.01594,-0.08358 -0.033,-0.129595 0.01578,-0.284106 0.04878,-0.154511 0.199547,-0.35041 0.363024,-0.583994 0.163477,-0.233584 0.437605,-0.621483 0.631345,-0.804965 0.19374,-0.183482 0.350951,-0.234986 0.473509,-0.331457 0.122558,-0.09647 0.118293,-0.03793 0.268322,-0.236754 0.150029,-0.198827 0.331366,-0.699778 0.489293,-1.025936 0.157927,-0.326158 0.360234,-0.653652 0.457725,-0.931235 0.09749,-0.277583 0.143168,-0.44386 0.157836,-0.710263 0.01467,-0.266403 -0.01408,-0.61741 -0.0947,-0.8681 -0.08062,-0.25069 -0.195012,-0.433445 -0.34724,-0.615562 -0.152228,-0.182117 -0.377841,-0.359612 -0.552427,-0.457725 -0.174586,-0.09811 -0.33209,-0.159514 -0.457726,-0.157836 -0.125636,0.0017 -0.09801,0.04243 -0.252538,0.0947 -0.154523,0.05227 -0.470802,0.144896 -0.678696,0.205188 -0.207894,0.06029 -0.438331,0.08206 -0.568211,0.157836 -0.12988,0.07578 -0.151539,0.134113 -0.220971,0.220971 -0.06943,0.08686 -0.156155,0.184983 -0.189403,0.299889 -0.03325,0.114906 0.01125,0.249421 0,0.363023 -0.01125,0.113602 -0.01764,0.226407 -0.06314,0.315673 -0.0455,0.08927 -0.05316,0.09081 -0.189404,0.205187 -0.136243,0.114374 -0.436095,0.266069 -0.662912,0.426158 -0.226817,0.160089 -0.521081,0.371322 -0.69448,0.536644 -0.173399,0.165322 -0.260936,0.285733 -0.363024,0.426158 -0.102088,0.140425 -0.130929,0.232438 -0.252538,0.410375 -0.121609,0.177937 -0.344873,0.477657 -0.489292,0.647128 -0.144419,0.169471 -0.08429,0.137808 -0.363024,0.378808 -0.278737,0.241 -1.053645,0.756701 -1.373176,0.978585 -0.319531,0.221884 -0.269416,0.190217 -0.536644,0.363024 -0.267228,0.172807 -0.69358,0.467203 -1.073287,0.662912 -0.379707,0.195709 -0.801104,0.368791 -1.199556,0.505076 -0.398452,0.136285 -0.827423,0.268976 -1.183772,0.315673 -0.356349,0.0467 -0.662114,0.02482 -0.931235,0 -0.269121,-0.02482 -0.34652,0.0017 -0.678696,-0.126269 -0.332176,-0.127998 -0.888052,-0.517381 -1.231123,-0.757614 -0.343071,-0.240233 -0.617561,-0.508952 -0.836533,-0.662913 -0.218972,-0.153961 -0.39885,-0.196213 -0.457725,-0.284105 -0.05888,-0.08789 -0.02055,-0.05062 -0.01578,-0.0947 0.0048,-0.04408 0.0087,-0.0706 0.06313,-0.157837 0.05444,-0.08723 0.140622,-0.1371 0.299889,-0.331456 0.159267,-0.194356 0.304631,-0.424473 0.631345,-0.852316 0.326714,-0.427843 1.007699,-1.328567 1.341609,-1.704632 0.33391,-0.376065 0.418287,-0.468968 0.599778,-0.599779 0.181491,-0.130811 0.232344,-0.07498 0.441942,-0.22097 0.209598,-0.145993 0.520496,-0.45986 0.757614,-0.710264 0.237118,-0.250404 0.541362,-0.591715 0.662913,-0.789182 0.121551,-0.197467 0.117491,-0.199923 0.142052,-0.331456 0.02456,-0.131533 0.01058,-0.311764 -0.01578,-0.441942 -0.02636,-0.130178 -0.02051,-0.218871 -0.126269,-0.331469 z" />
    </clipPath>
    <clipPath id="as">
      <path
            d="m 55.46875,43.950893 c 0.02691,-0.06496 0.01391,-0.12867 0,-0.200893 -0.01391,-0.07222 -0.03361,-0.151656 -0.08929,-0.223214 -0.05568,-0.07156 -0.112735,-0.117316 -0.245536,-0.178571 -0.132801,-0.06126 -0.337792,-0.104581 -0.558035,-0.133929 -0.220243,-0.02935 -0.45677,-0.0339 -0.758929,-0.02232 -0.302159,0.01158 -0.680335,0.09205 -1.049107,0.111607 -0.368772,0.01956 -0.851914,0.005 -1.160714,0 -0.3088,-0.005 -0.48202,-0.04373 -0.691965,-0.02232 -0.209945,0.02141 -0.283978,0.0093 -0.558035,0.133929 -0.274057,0.124643 -0.730863,0.495501 -1.004465,0.714286 -0.273602,0.218785 -0.501477,0.373182 -0.647321,0.580357 -0.145844,0.207175 -0.159991,0.394335 -0.245536,0.602678 -0.08555,0.208343 -0.218944,0.420388 -0.267857,0.647322 -0.04891,0.226934 -0.03189,0.438306 -0.02232,0.691964 0.0096,0.253658 0.05233,0.636851 0.08928,0.825893 0.03694,0.189042 0.0458,0.192703 0.08929,0.3125 0.04349,0.119797 0.0915,0.243575 0.178571,0.401786 0.08707,0.158211 0.203777,0.391275 0.357143,0.535714 0.153366,0.144439 0.24492,0.173317 0.535715,0.3125 0.290795,0.139183 0.762307,0.330934 1.227678,0.46875 0.465371,0.137816 1.09048,0.284815 1.5625,0.334821 0.47202,0.05001 0.803324,0.01394 1.25,0 0.446676,-0.01394 0.830779,0.01612 1.428572,-0.08928 0.597793,-0.105398 1.539891,-0.458532 2.120535,-0.625 0.580644,-0.166468 0.626059,-0.15276 1.361607,-0.379465 0.735548,-0.226705 2.090495,-0.651807 3.035715,-1.026785 0.94522,-0.374978 1.902692,-0.84406 2.633928,-1.205358 0.731236,-0.361298 1.425573,-0.715354 1.763393,-0.9375 0.33782,-0.222146 0.213725,-0.216723 0.334822,-0.267857 0.121097,-0.05113 0.270852,-0.0454 0.357142,-0.04464 0.08629,7.57e-4 0.114639,-0.02566 0.15625,0.02232 0.04161,0.04798 -0.03245,0.133593 0,0.223214 0.03245,0.08962 0.100856,0.106404 0.223215,0.267857 0.122359,0.161453 0.284333,0.39556 0.491071,0.714286 0.206738,0.318726 0.630598,0.917245 0.736607,1.205357 0.106009,0.288112 0.06874,0.246741 0.06696,0.424107 -0.0018,0.177366 -0.05496,0.426958 -0.111608,0.625 -0.05665,0.198042 -0.13725,0.434842 -0.223214,0.558036 -0.08596,0.123194 -0.119782,0.114315 -0.223214,0.200893 -0.103432,0.08658 -0.280752,0.236222 -0.401786,0.3125 -0.121034,0.07628 -0.2439,0.09763 -0.3125,0.15625 -0.0686,0.05862 -0.102775,0.109739 -0.111607,0.15625 -0.0088,0.04651 -0.0412,0.03679 0.02232,0.08929 0.06352,0.0525 0.174804,0.0081 0.401786,0.02232 0.226982,0.01422 0.669263,0.06099 0.959822,0.06696 0.290559,0.006 0.533081,0.0435 0.78125,-0.02232 0.248169,-0.06582 0.423138,-0.258557 0.669642,-0.357143 0.246504,-0.09859 0.494025,-0.124397 0.803572,-0.223214 0.309547,-0.09882 0.728001,-0.194126 1.049107,-0.379465 0.321106,-0.185339 0.702365,-0.483218 0.848214,-0.714285 0.145849,-0.231067 0.123666,-0.323698 0.133929,-0.513393 0.01026,-0.189695 -0.04139,-0.39723 -0.08929,-0.602679 -0.0479,-0.205449 -0.08965,-0.453689 -0.200893,-0.625 -0.111248,-0.171311 -0.273082,-0.220615 -0.424107,-0.379464 -0.151025,-0.158849 -0.218622,-0.339054 -0.46875,-0.580357 -0.250128,-0.241303 -0.687845,-0.55315 -1.071428,-0.803572 -0.383583,-0.250422 -0.862494,-0.495732 -1.227679,-0.691964 -0.365185,-0.196232 -0.686815,-0.366952 -0.959821,-0.491071 -0.273006,-0.124119 -0.49763,-0.206681 -0.669643,-0.267857 -0.172013,-0.06118 -0.251362,-0.09547 -0.357143,-0.111608 -0.105781,-0.01614 -0.188953,-0.01281 -0.267857,0 -0.0789,0.01281 -0.01184,-0.0081 -0.200893,0.06697 -0.189056,0.07504 -0.48821,0.205691 -0.915179,0.424107 -0.426969,0.218416 -1.14392,0.668634 -1.629464,0.915178 -0.485544,0.246544 -0.888463,0.417854 -1.272321,0.580358 -0.383858,0.162504 -0.500559,0.219669 -1.026786,0.401785 -0.526227,0.182116 -1.49952,0.441595 -2.142857,0.647322 -0.643337,0.205727 -0.996527,0.294311 -1.71875,0.580357 -0.722223,0.286046 -1.943813,0.926844 -2.589286,1.183036 -0.645473,0.256192 -0.984851,0.360766 -1.25,0.424107 -0.265149,0.06334 -0.207476,0.07155 -0.3125,0.04464 -0.105024,-0.02691 0.02712,0.08922 -0.267857,-0.200893 -0.294981,-0.290116 -1.027907,-1.397192 -1.316964,-1.696429 -0.289057,-0.299237 -0.157994,-0.04349 -0.267858,-0.223214 -0.109864,-0.179722 -0.145211,-0.685304 -0.200892,-0.892857 -0.05568,-0.207553 -0.07771,-0.256808 -0.111608,-0.357143 -0.0339,-0.100335 -0.06623,-0.114721 -0.08928,-0.245536 -0.02305,-0.130815 -0.04288,-0.419806 0,-0.535714 0.04288,-0.115908 0.03544,-0.09918 0.133928,-0.15625 0.09849,-0.05707 0.282625,-0.06523 0.46875,-0.08929 0.186125,-0.02406 0.368327,-0.02896 0.647322,-0.04464 0.278995,-0.01568 0.799742,-0.03971 1.026785,-0.04464 0.227043,-0.0049 0.208118,0.0067 0.334822,0 0.126704,-0.0067 0.237626,-0.01683 0.424107,-0.04464 0.186481,-0.02781 0.547327,-0.101878 0.691964,-0.133929 0.144637,-0.03205 0.119825,-0.01138 0.178572,-0.04464 0.05875,-0.03326 0.129352,-0.09131 0.156259,-0.156268 z" />
    </clipPath>
    <clipPath id="s">
      <path
            d="m 76.676891,45.325494 c -0.07708,-0.07631 -0.108715,-0.07944 -0.0947,-0.220971 0.01402,-0.14153 0.171849,-0.194774 0.34724,-0.505076 0.175391,-0.310302 0.418425,-0.979152 0.631346,-1.38896 0.212921,-0.409808 0.422216,-0.774759 0.631345,-1.073287 0.209129,-0.298528 0.424453,-0.577106 0.599778,-0.726047 0.175325,-0.148941 0.255072,-0.175246 0.378807,-0.220971 0.123735,-0.04572 0.260523,-0.07187 0.34724,-0.06314 0.08672,0.0087 0.112458,-0.0039 0.157837,0.06314 0.04538,0.06703 -0.01909,0.198049 0,0.315672 0.01909,0.117623 0.02333,0.08335 0.126269,0.378808 0.10294,0.295454 0.315969,0.920263 0.505076,1.388959 0.189107,0.468696 0.434313,0.899608 0.631345,1.420527 0.197032,0.520919 0.463426,1.228233 0.536644,1.704633 0.07322,0.4764 0.04698,0.733538 0,1.104854 -0.04698,0.371316 -0.150381,0.760923 -0.284106,1.104855 -0.133725,0.343932 -0.318389,0.718931 -0.505076,0.947018 -0.186687,0.228087 -0.368214,0.305228 -0.536643,0.441941 -0.168429,0.136713 -0.228974,0.244289 -0.473509,0.378807 -0.244535,0.134518 -0.763361,0.296903 -1.010153,0.34724 -0.246792,0.05034 -0.357976,0.04826 -0.441942,0.03157 -0.08397,-0.01669 -0.02377,0.0057 -0.06313,-0.03157 -0.03936,-0.03723 -0.03712,-0.174504 -0.126269,-0.22097 -0.08915,-0.04647 -0.109086,-0.0037 -0.34724,0.03157 -0.238154,0.03523 -0.832922,0.207451 -1.073287,0.220971 -0.240365,0.01352 -0.224441,-0.0012 -0.34724,-0.03157 -0.122799,-0.03041 -0.280785,-0.138232 -0.378807,-0.157836 -0.09802,-0.0196 -0.141036,0.01464 -0.189404,0 -0.04837,-0.01464 -0.07085,-0.01857 -0.0947,-0.06313 -0.02385,-0.04456 -0.08385,-0.03462 0,-0.189404 0.08385,-0.154784 0.426845,-0.28808 0.726047,-0.473509 0.299202,-0.185429 0.766802,-0.384236 1.073287,-0.631345 0.306485,-0.247109 0.574692,-0.528902 0.757615,-0.820749 0.182923,-0.291847 0.265957,-0.629834 0.34724,-0.883884 0.08128,-0.25405 0.135491,-0.408132 0.157836,-0.631345 0.02235,-0.223213 0.01084,-0.466056 -0.03157,-0.69448 -0.04241,-0.228424 -0.147314,-0.441942 -0.220971,-0.662913 -0.07366,-0.220971 -0.197259,-0.516794 -0.220971,-0.662912 -0.02371,-0.146118 0.03911,-0.161219 0,-0.189404 -0.03911,-0.02819 -0.01084,-0.0281 -0.0947,0.03157 -0.08386,0.05967 -0.198142,0.294269 -0.315672,0.410375 -0.11753,0.116106 -0.254027,0.223077 -0.378808,0.284105 -0.124781,0.06103 -0.219121,0.102946 -0.34724,0.0947 -0.128119,-0.0082 -0.301732,-0.08153 -0.378814,-0.157842 z" />
    </clipPath>
    <clipPath id="o">
      <path
            d="m 92.207987,41.663691 c -0.169252,-0.05953 -0.195954,-0.318309 -0.315673,-0.34724 -0.119719,-0.02893 -0.10286,-0.01918 -0.252538,0.0947 -0.149678,0.113876 -0.31065,0.431233 -0.505077,0.69448 -0.194427,0.263247 -0.388597,0.51085 -0.662912,0.883883 -0.274315,0.373033 -0.596068,0.861235 -0.978585,1.357393 -0.382517,0.496158 -0.95475,1.101729 -1.325826,1.60993 -0.371076,0.508201 -0.668407,0.933108 -0.91545,1.420527 -0.247043,0.487419 -0.468257,1.050682 -0.568211,1.483662 -0.09995,0.43298 -0.08379,0.825555 -0.0947,1.073287 -0.01091,0.247732 -0.0383,0.278844 0,0.410374 0.0383,0.13153 0.09321,0.260822 0.220971,0.34724 0.127762,0.08642 0.234262,0.08501 0.505076,0.0947 0.270814,0.0097 0.483967,-0.0082 1.104854,-0.126269 0.620887,-0.118093 1.767822,-0.456946 2.588516,-0.69448 0.820694,-0.237534 1.866779,-0.491584 2.335978,-0.726047 0.469199,-0.234463 0.426575,-0.228971 0.568211,-0.410375 0.141636,-0.181404 0.19305,-0.345174 0.252538,-0.631345 0.05949,-0.286171 0.07514,-0.594993 0.03157,-1.073287 -0.04357,-0.478294 -0.185036,-1.090891 -0.378807,-1.767767 -0.193771,-0.676876 -0.516893,-1.821236 -0.820749,-2.272843 -0.303856,-0.451607 -0.460324,-0.516159 -0.631345,-0.568211 -0.171021,-0.05205 -0.166861,-0.01359 -0.220971,0.03157 -0.05411,0.04516 -0.05275,0.125399 -0.06314,0.189404 -0.01039,0.064 0.04836,0.141041 0,0.189404 -0.04836,0.04836 -0.140936,-0.02961 -0.22097,0 -0.08003,0.02961 -0.153433,0.08409 -0.220971,0.189403 -0.06754,0.105315 -0.137964,0.290459 -0.126269,0.441942 0.01169,0.151483 0.05881,0.106965 0.189403,0.410374 0.130595,0.303409 0.445283,0.96378 0.568211,1.420527 0.122928,0.456747 0.184453,0.821773 0.189404,1.294258 0.005,0.472485 -0.04318,1.145467 -0.189404,1.515229 -0.146221,0.369762 -0.283526,0.543367 -0.505076,0.69448 -0.22155,0.151113 -0.513292,0.16211 -0.726047,0.189404 -0.212755,0.02729 -0.398107,0.07605 -0.536644,0 -0.138537,-0.07605 -0.172258,-0.09027 -0.220971,-0.34724 -0.04871,-0.256972 0.05251,-0.646943 0.220971,-1.136422 0.168464,-0.489479 0.65204,-1.283914 0.883884,-1.7362 0.231844,-0.452286 0.291571,-0.608489 0.505076,-0.978585 0.213505,-0.370096 0.547537,-0.83085 0.789182,-1.231123 0.241645,-0.400273 0.539491,-0.86496 0.662912,-1.167989 0.123421,-0.303029 0.137823,-0.445089 0.157836,-0.599778 0.02001,-0.154689 0.04104,-0.243194 0,-0.315673 -0.04104,-0.07248 -0.03836,-0.0726 -0.157836,-0.0947 -0.119474,-0.0221 -0.347247,0.06304 -0.536643,0.0947 -0.189396,0.03166 -0.430526,0.154229 -0.599778,0.0947 z" />
    </clipPath>
    <clipPath id="underline">
      <path
            d="m 14.754464,57.366072 c -0.125112,-0.03555 -0.140902,-0.09274 -0.178571,-0.15625 -0.03767,-0.06352 -0.06837,-0.138982 -0.04464,-0.200893 0.02373,-0.06191 0.04661,-0.06574 0.15625,-0.111607 0.109645,-0.04587 0.350678,-0.02873 0.513393,-0.08929 0.162715,-0.06056 0.12535,-0.134862 0.446428,-0.267857 0.321078,-0.132995 0.834219,-0.235284 1.517857,-0.379465 0.683638,-0.144181 1.674015,-0.311282 2.589286,-0.446428 0.915271,-0.135146 1.807994,-0.219804 2.901786,-0.357143 1.093792,-0.137339 2.250854,-0.296522 3.660714,-0.46875 1.40986,-0.172228 3.225009,-0.409832 4.799107,-0.558036 1.574098,-0.148204 3.06174,-0.230453 4.642857,-0.334821 1.581117,-0.104368 3.236607,-0.193451 4.84375,-0.290179 1.607143,-0.09673 2.990846,-0.21886 4.799108,-0.290178 1.808262,-0.07132 4.293123,-0.08667 6.049107,-0.111607 1.755984,-0.02493 2.689698,-0.03889 4.486607,-0.04464 1.796909,-0.0058 4.370851,-0.03018 6.294643,0.02232 1.923792,0.0525 3.786853,0.216689 5.245535,0.267857 1.458682,0.05117 2.005205,0.03741 3.504465,0.06697 1.49926,0.02956 3.742545,0.06652 5.491071,0.111607 1.748526,0.04509 2.942634,0.08346 5,0.15625 2.057366,0.07279 5.77133,0.1756 7.34375,0.290178 1.57242,0.114578 1.621809,0.176861 2.098214,0.223215 0.476405,0.04635 0.62648,0.02041 0.758929,0.06696 0.132449,0.04655 0.04834,0.0099 0.06696,0.04464 0.01862,0.03479 0.033,0.09287 0,0.15625 -0.033,0.06338 -0.121267,0.117421 -0.223214,0.15625 -0.101947,0.03883 -7e-5,0.02464 -0.379465,0.04464 -0.379395,0.02 -1.116072,-0.0146 -1.897321,-0.02232 -0.781249,-0.0077 -1.848841,-0.02958 -2.790179,-0.02232 -0.941338,0.0073 -2.060794,0.06689 -2.857142,0.06696 -0.796348,7.2e-5 -1.405776,-0.0584 -1.919643,-0.04464 -0.513867,0.01376 -0.795829,0.07528 -1.160715,0.08929 -0.364886,0.01401 -0.797259,-0.08562 -1.026785,0 -0.229526,0.08562 -0.194793,0.230227 -0.334822,0.290178 -0.140029,0.05995 -0.409888,0.176385 -0.46875,0.04464 -0.05886,-0.131745 0.288338,-0.175752 0.290179,-0.267857 0.0018,-0.09211 -0.03122,-0.08121 -0.111607,-0.111607 -0.08039,-0.0304 -0.278034,-0.01779 -0.357143,0.02232 -0.07911,0.04011 0.117758,0.02882 -0.111607,0.133929 -0.229365,0.105108 -1.158899,-0.199726 -1.339286,-0.02232 -0.180387,0.177406 -0.01373,0.128984 0,0.178571 0.01373,0.04959 0.09283,0.0441 0.06696,0.111607 -0.02587,0.06751 -0.193166,0.116111 -0.290178,0.08929 -0.09701,-0.02682 -0.127982,-0.167693 -0.200893,-0.223214 -0.07291,-0.05552 -0.156664,-0.111609 -0.223214,-0.111608 -0.06655,1e-6 -0.117196,0.004 -0.133929,0.06697 -0.01673,0.06301 0.1158,0.141015 0.133929,0.200893 0.01813,0.05988 0.04735,0.08658 0,0.133928 -0.04735,0.04735 -0.216671,0.02739 -0.267857,0 -0.05119,-0.02739 3.1e-5,-0.05877 -0.04464,-0.06696 -0.04467,-0.0082 -0.05546,0.08781 -0.15625,0.111607 -0.100792,0.02379 -0.304251,-0.02654 -0.424107,-0.06696 -0.119856,-0.04042 -0.187553,-0.190513 -0.290179,-0.15625 -0.102626,0.03426 -0.0016,0.189234 -0.133929,0.290178 -0.1323,0.100944 -0.503274,0.115428 -0.669642,0.111607 -0.166368,-0.0038 -0.222663,-0.09027 -0.3125,-0.06696 -0.08984,0.02331 -0.100093,0.142847 -0.178572,0.15625 -0.07848,0.0134 -0.163038,-0.01794 -0.223214,-0.08929 -0.06018,-0.07135 -5.2e-5,-0.237747 -0.06696,-0.3125 -0.06691,-0.07475 -0.138151,-0.105024 -0.267858,-0.08928 -0.129707,0.01574 -0.448673,0.121329 -0.424107,0.267857 0.02457,0.146528 0.337669,0.02071 0.379465,0.08929 0.0418,0.06858 0.03701,0.03709 -0.02232,0.08928 -0.05933,0.05219 0.07792,0.01999 -0.379464,0.04464 -0.457379,0.02465 -1.417385,-0.0083 -2.366072,-0.02232 -0.948687,-0.01403 -1.778261,-0.034 -3.325892,-0.06697 -1.547631,-0.03297 -4.144346,-0.09299 -5.959822,-0.133928 -1.815476,-0.04094 -3.779761,-0.0856 -4.933036,-0.111607 -1.153275,-0.026 -0.814643,-0.03666 -1.986607,-0.04464 -1.171964,-0.008 -3.656998,0.02906 -5.044643,0.04464 -1.387645,0.01558 -1.848895,0.01684 -3.281249,0.04464 -1.432354,0.0278 -3.775802,0.05315 -5.3125,0.133928 -1.536698,0.08078 -2.6557,0.246992 -3.90625,0.3125 -1.25055,0.06551 -2.27646,0.03199 -3.59375,0.08929 -1.31729,0.0573 -2.58552,0.156891 -4.308036,0.267857 -1.722516,0.110966 -4.382243,0.303947 -6.026786,0.401786 -1.644543,0.09784 -2.969811,0.108298 -3.839286,0.200893 -0.869475,0.09259 -0.988215,0.186978 -1.383928,0.223214 -0.395713,0.03624 -0.695482,0.0017 -0.982143,0.02232 -0.286661,0.02058 -0.505837,0.06736 -0.736607,0.08929 -0.23077,0.02193 -0.450018,0.02145 -0.647321,0.04464 -0.197303,0.02319 -0.410607,0.124825 -0.535719,0.08928 z" />
    </clipPath>
  </defs>
  <g class="strokes">
    <g class="p">
      <path
            style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:5;stroke-dasharray:none;"
            d="m 5.7452426,63.38197 c 0,0 5.4663014,-7.480148 8.3968934,-13.510789 2.930591,-6.030642 5.492704,-13.321387 5.492704,-13.321387"
            clip-path="url(#p1)" />
      <path
            style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:5;stroke-dasharray:none;"
            d="m 13.536689,39.297011 c 0,0 3.722484,-5.651186 8.918668,-2.555939 5.196184,3.095246 -0.892861,11.339282 -0.892861,11.339282"
            clip-path="url(#p2)" />
    </g>
    <g class="i">
      <path
            style="display:inline;fill:none;fill-rule:nonzero;stroke:#000;stroke-width:5;stroke-dasharray:none;"
            d="m 31.383928,51.160715 c 0,0 -0.400162,-2.235226 -0.401785,-3.839286 -0.0016,-1.60406 0.625,-3.571429 0.625,-3.571429"
            clip-path="url(#i1)" />
      <path
            style="display:inline;fill:none;fill-rule:nonzero;stroke:#000;stroke-width:5;stroke-dasharray:none;"
            d="m 34.107143,39.553572 1.964285,-2.633928"
            clip-path="url(#i2)" />
    </g>
    <g class="ca">
      <path
            style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:4;stroke-dasharray:none;"
            d="m 46.57433,40.351406 c 0,0 -2.343469,1.526398 -3.047545,2.193237 -0.704076,0.666839 -0.83132,0.890858 -1.294642,1.607143 -0.463322,0.716285 -1.188857,2.179431 -1.383929,2.723214 -0.187695,0.692696 1.014263,2.308993 1.495532,2.566965 0.48127,0.257972 2.807619,0.529966 3.705357,0.267857 0.897738,-0.262109 2.281405,-2.43213 3.348214,-3.549107 1.066808,-1.116978 2.621195,-3.528249 3.415179,-3.660714 0.793984,-0.132466 2.203489,0.01342 2.678571,0.848214 0.475082,0.834793 0.07321,2.781242 -0.558035,3.28125 -0.631247,0.500008 -0.781251,2.834821 -0.781251,2.834821"
            clip-path="url(#ca)" />
    </g>
    <g class="as">
      <path
            style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:5;stroke-dasharray:none;"
            d="m 55.784423,43.98246 c 0,0 -3.805687,-0.629549 -4.834854,-0.109057 -1.029167,0.520492 -1.327604,1.159545 -1.38896,1.95717 -0.06136,0.797625 0.526949,1.55396 1.073287,2.146574 0.546338,0.592614 0.976566,1.038978 2.08344,1.262691 1.106874,0.223713 2.840592,-0.245711 4.293148,-0.631345 1.452556,-0.385634 2.828165,-1.044674 4.356283,-1.704633 1.528118,-0.659959 3.756974,-2.105864 4.798224,-2.272843 1.04125,-0.166979 0.396863,-0.129105 1.010153,0.126269 0.61329,0.255374 1.837292,1.173796 2.335978,1.830901 0.498686,0.657105 0.86278,1.302693 0.757614,1.830902 -0.105166,0.528209 -0.358635,0.426351 -0.883883,0.883883 -0.525248,0.457532 -2.335978,1.767767 -2.335978,1.767767"
            clip-path="url(#as)" />
    </g>
    <g class="s">
      <path
            style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:4;stroke-dasharray:none;"
            d="m 75.887709,46.209377 c 0,0 -0.470245,-3.524602 2.661126,-3.243912 2.030468,0.182007 1.886247,3.056021 1.472677,4.621226 -0.57268,1.963908 -2.066825,2.751645 -4.288355,3.831978"
            clip-path="url(#s)" />
    </g>
    <g class="o">
      <path
            style="fill:none;fill-rule:evenodd;stroke:#000;stroke-width:4.2;stroke-dasharray:none;"
            d="m 92.277466,40.483555 c 0,0 -1.806047,2.642291 -2.33822,3.734841 -0.532174,1.092549 -1.057573,2.114649 -1.512329,2.874865 -0.454756,0.760216 -0.525987,1.294488 -0.512079,1.767767 0.01391,0.473279 0.0459,0.567147 0.410375,0.820749 0.364473,0.253602 1.085096,0.249991 1.736199,0.189403 0.651103,-0.06059 1.527855,-0.323758 2.08344,-0.631345 0.555585,-0.307587 1.000999,-0.531884 1.231123,-1.073287 0.230124,-0.541403 0.04295,-1.082927 -0.09497,-1.894036 -0.13792,-0.811109 -0.31304,-1.510026 -1.229,-2.895873"
            clip-path="url(#o)" />
    </g>
    <g class="underline">
      <path
            style="fill:none;fill-rule:evenodd;stroke:#000;stroke-width:4;"
            d="m 14.17047,57.176673 13.660986,-1.682893 22.614972,-1.18733 19.459334,0.335943 22.147809,0.804036"
            clip-path="url(#underline)"/>
    </g>
  </g>
</svg>
            
          
!
            
              body {
  margin: 0;
}
svg {
  height: 100vmin;
  left: calc(50% - 50vmin);
  position: absolute;
  width: 100vmin;
}
path {
  stroke-dasharray: none;
}
            
          
!
            
              function draw() {
  const p = [30.35, 23.11];
  const pdur = [30.35, 23.11];
  const i = [7.73, 3.28];
  const ca = 36.31;
  const as = 37.09;
  const s = 16.46;
  const o = 21.58;
  const underline = 78.04;
  const paths = Array.from(document.querySelectorAll('.strokes path'));
  paths.forEach((path) => {
    const l = path.getTotalLength();
    path.style.strokeDasharray = `0 ${l}`;
    console.dir(path);
  });

  anime({
    targets: '.p path',
    strokeDasharray: {
      value: (_, j) => [`0 ${p[j]}`, `${p[j]} ${p[j]}`],
      duration: 500,
      delay: (_, j) => j * 500,
      easing: 'easeInOutQuad'
    }
  });
  anime({
    targets: '.i path',
    strokeDasharray: {
      value: (_, j) => [`0, ${i[j]}`, `${i[j]}, ${i[j]}`],
      duration: 300,
      delay: (_, j) => 1000 + j * 300,
      easing: 'easeInOutQuad'
    }
  });
  anime({
    targets: '.ca path',
    strokeDasharray: {
      value: [`0, ${ca}`, `${ca}, ${ca}`],
      duration: 600,
      delay: 1600,
      easing: 'easeInOutQuad'
    }
  });
  anime({
    targets: '.as path',
    strokeDasharray: {
      value: [`0, ${as}`, `${as}, ${as}`],
      duration: 600,
      delay: 2200,
      easing: 'easeInOutQuad'
    }
  });
  anime({
    targets: '.s path',
    strokeDasharray: {
      value: [`0, ${s}`, `${s}, ${s}`],
      duration: 500,
      delay: 2800,
      easing: 'easeInOutQuad'
    }
  });
  anime({
    targets: '.o path',
    strokeDasharray: {
      value: [`0, ${o}`, `${o}, ${o}`],
      duration: 500,
      delay: 3300,
      easing: 'easeInOutQuad'
    }
  });
  anime({
    targets: '.underline path',
    strokeDasharray: {
      value: [`0, ${underline}`, `${underline}, ${underline}`],
      duration: 700,
      delay: 3800,
      easing: 'easeInOutQuad'
    }
  });
}
setInterval(draw, 8000);
draw();

            
          
!
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