cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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="signature-canvas">
  <?xml version="1.0" encoding="UTF-8" standalone="no" ?>

  <svg class="filler-img" width="200" viewBox="0 0 706.88611 308.12488">
    <defs id="defs3476" />
     <g style="mask: url(#easyMask);">
      <path style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 37.458342,300.3928 c 6.27486,-18.8246 21.17767,-39.21791 21.17767,-39.21791 0,0 110.594468,-135.69396 114.516268,-144.3219 3.9218,-8.62793 16.4716,-28.236889 -5.4905,-39.217899 -21.962,-10.98102 -105.103978,27.452529 -110.594488,31.374319 -5.49051,3.92179 -53.3363502,34.51176 -54.1207102,68.23916 -0.78436,33.7274 40.0022702,56.47379 40.0022702,56.47379 0,0 18.06324,4.04473 9.41229,-9.4123 -7.05922,-10.98101 -28.22638,-23.55482 -28.23689,-36.08048 -0.005,-6.18176 -0.38992,-15.6985 7.0665,-27.63741 7.45641,-11.93891 22.75398,-26.3 54.11343,-42.17046 C 144.14488,88.643421 159.03388,95.675331 159.03388,95.675331 123.71768,162.65147 65.956692,220.64973 19.418102,283.13692 c -0.66541,3.35139 -4.27484,5.72143 0.78436,10.98102 7.674,5.39251 13.08645,6.90106 17.25588,6.27486 z"
      id="path3482" inkscape:connector-curvature="0" sodipodi:nodetypes="ccsssscsssscccc" />
      <path style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 162.51708,187.34824 c -5.8775,14.24072 10.4968,34.82428 10.922,43.50235 0.4447,9.07724 3.9474,24.21584 -12.8365,29.53994 -18.3896,5.83345 -58.8269,-16.47152 -58.8269,-16.47152 0,0 -3.137398,-10.19665 1.5687,-11.76537 26.6806,-1.73425 50.5144,23.56964 49.6254,-3.04045 -0.9931,-18.06682 -13.8524,-18.77437 -8.6658,-50.67965 2.1209,-13.04635 16.3048,-17.8224 29.4356,-16.85079 13.1308,0.97161 23.9643,12.91571 21.8723,22.85999 -2.4131,11.47055 -26.282,-17.97971 -33.0948,2.9055 z"
      id="path3488" inkscape:connector-curvature="0" sodipodi:nodetypes="csscccsssc" />
      <path style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 254.16048,197.79791 c 3.4832,-5.22484 6.4688,-12.68889 4.976,-21.39695 -1.4928,-8.70806 -8.9568,-12.68889 -15.1769,-10.69848 -6.22,1.99042 -42.0475,14.4305 -52.9948,35.57865 -10.9472,21.14816 -1.4928,28.11461 -1.4928,28.11461 0,0 10.4947,14.32967 45.0331,2.48801 8.7081,-2.98562 -2.8297,6.44771 13.5753,2.1848 6.3085,-1.63929 11.6159,-20.75163 11.9269,-24.57696 0.622,-7.65065 -5.8468,-11.69368 -5.8468,-11.69368 z"
      id="path3490" inkscape:connector-curvature="0" sodipodi:nodetypes="csssccssc" />
      <path style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 244.95478,203.02275 c -11.9425,-7.71286 -12.1913,-11.69369 -12.1913,-11.69369 0,0 -7.6704,3.39312 -14.1817,8.42816 -10.5993,8.19624 -10.9472,12.84439 -10.4496,16.70082 0.4976,3.85643 11.3204,4.78944 20.0285,0.52871 8.708,-4.26073 16.7941,-13.964 16.7941,-13.964 z"
      id="path3492" inkscape:connector-curvature="0" sodipodi:nodetypes="ccsssc" />
      <path style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 306.63748,227.8078 c 0.8882,-22.76152 106.9651,-166.417879 106.9651,-166.417879 0,0 7.0372,-9.14833 12.6669,-8.44461 5.6298,0.70371 10.2153,16.21955 5.993,21.84929 -4.2223,5.62975 -99.2242,143.649209 -99.2242,143.649209 0,0 -4.7071,14.4819 -6.6967,17.46809 -6.0497,9.08023 -19.7041,-8.1041 -19.7041,-8.1041 z"
      id="path3508" inkscape:connector-curvature="0" sodipodi:nodetypes="ccsscsc" />
      <path style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 390.76578,142.2607 c 1.1859,-4.81981 4.7672,-9.53424 10.7261,-10.32876 5.9589,-0.79452 3.5753,5.56164 8.3424,7.9452 4.7671,2.38356 8.3425,5.16438 13.9041,0.79452 5.5616,-4.36986 56.8082,-47.671199 56.8082,-47.671199 0,0 11.9178,-9.13698 14.6986,-8.34246 2.7808,0.79452 6.3562,15.09588 4.3699,17.876699 -1.9863,2.78082 -63.1644,54.42462 -63.1644,54.42462 0,0 -5.1644,7.15068 -19.0685,2.78082 -5.968,2.77254 2.5609,37.52181 3.5754,38.93148 5.8959,8.19206 23.8356,8.34246 22.6438,15.09588 -1.1918,6.75341 -11.1233,10.32875 -13.1096,9.53423 -1.9863,-0.79452 -20.7346,-2.23814 -30.1918,-21.45203 -4.9082,-9.972 -1.2869,-29.65055 -4.3698,-44.09586 -1.1362,-5.32384 -6.465,-10.20706 -5.1644,-15.49314 z"
      id="path3510" inkscape:connector-curvature="0" sodipodi:nodetypes="assscssccssssaa" />
      <path style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 495.24518,142.2607 c -10.4113,16.57945 -13.2201,25.24422 -23.4383,45.6849 -3.093,6.18726 10.2293,16.29503 13.5068,11.12328 10.3988,-16.4087 13.7169,-22.03707 25.4247,-41.7123 3.1855,-5.35329 5.0936,-13.97912 1.9862,-19.863 -0.7748,-1.46716 -2.7106,-2.38355 -4.3698,-2.38356 -4.9777,-2e-5 -10.4624,2.93525 -13.1096,7.15068 z"
      id="path3512" inkscape:connector-curvature="0" sodipodi:nodetypes="ssssaas" />
      <path style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 543.31368,110.87716 c -2.934,5.56647 -17.4795,15.09588 -18.6712,2.78082 -1.1918,-12.31506 11.5205,-17.479439 11.5205,-17.479439 0,0 9.6913,9.878619 7.1507,14.698619 z"
      id="path3514" inkscape:connector-curvature="0" sodipodi:nodetypes="asca" />
      <path style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 511.13558,194.30176 c 17.4165,-30.31909 61.178,-83.4246 61.178,-83.4246 0,0 13.7072,-19.107679 21.4521,-42.506819 1.0502,-3.17283 5.0459,-5.01156 8.3424,-5.56164 2.5662,-0.42821 5.8395,0.0243 7.548,1.9863 4.3793,5.02899 3.7366,13.33322 2.3835,19.863 -2.6129,12.60958 -19.4657,33.369839 -19.4657,33.369839 l -49.6575,62.76708 14.3014,-3.17808 c 0,0 5.5456,-9.94539 9.5342,-13.9041 9.4104,-9.33984 20.8623,-16.8492 32.9726,-22.24656 6.483,-2.8894 13.7599,-5.63111 20.6575,-5.16438 3.3109,0.22403 4.1199,5.48502 4.7671,8.73972 0.7273,3.65736 0.7071,7.914 -1.1918,11.12328 -6.2479,10.55943 -19.4464,15.1323 -30.1917,21.05478 -2.3908,1.31775 -7.548,3.17808 -7.548,3.17808 0,0 -0.4512,4.61548 1.1918,5.56164 9.9457,5.7274 28.9629,5.8507 25.4247,6.35616 0,0 4.3555,-1.17242 5.9589,0 2.4678,1.80449 3.6374,5.80504 2.7808,8.73972 -0.8694,2.97841 -7.1507,5.9589 -7.1507,5.9589 0,0 -9.8439,0.27694 -14.6986,-0.39726 -7.9847,-1.10887 -16.0862,-2.65281 -23.4384,-5.9589 -4.0866,-1.83765 -6.6585,-7.16848 -11.1232,-7.54794 -7.9714,-0.6775 -14.0631,8.09343 -21.8493,9.9315 -6.9642,1.64402 -14.7177,3.21325 -21.4521,0.79452 -4.5021,-1.61696 -13.1088,-5.38627 -10.726,-9.53424 z"
      id="path3516" inkscape:connector-curvature="0" sodipodi:nodetypes="scsaaacccaasaaacscaacaaaaas" />
      <path style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 646.99848,159.74014 c 4.2197,-5.87035 8.9495,-9.24353 13.9041,-12.31506 3.9311,-2.43703 8.1475,-4.81619 12.7123,-5.56164 5.9042,-0.96419 12.4261,-0.87672 17.8767,1.58904 3.4988,1.58281 6.9006,4.38598 8.3425,7.9452 2.488,6.14148 1.0443,13.49695 -0.7945,19.863 -1.3993,4.84437 -3.8923,9.63656 -7.548,13.10958 -5.7103,5.425 -13.2576,9.61058 -21.0547,10.72602 -4.9362,0.70617 -10.1129,-0.8224 -14.6987,-2.78082 -4.1903,-1.78953 -8.8761,-3.98137 -11.1232,-7.9452 -2.4242,-4.27627 -1.8404,-9.82597 -1.1918,-14.69862 0.4642,-3.48772 1.5216,-7.07454 3.5753,-9.9315 z"
      id="path3518" inkscape:connector-curvature="0" sodipodi:nodetypes="ssaaaaaaaaas" />
      <path style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 668.05328,172.0552 c -0.2846,-1.75367 1.2174,-3.42687 2.3836,-4.76712 1.6878,-1.93961 3.8102,-4.01038 6.3561,-4.36986 0.8293,-0.1171 2.0527,0.0252 2.3836,0.79452 0.8661,2.01357 -1.4259,4.23584 -2.7808,5.9589 -1.5723,1.99958 -3.4191,4.90778 -5.9589,4.76712 -1.1219,-0.0621 -2.2036,-1.27444 -2.3836,-2.38356 z"
      id="path3520" inkscape:connector-curvature="0" sodipodi:nodetypes="aaaaaaa" />
      <path style="fill:#ffffff;stroke:#ffffff;stroke-opacity:1" d="m 31.025302,298.8539 c -4.11997,-1.27096 -10.52148,-5.36782 -11.815713,-7.56187 -1.099938,-1.86467 -1.101928,-2.03302 -0.05678,-4.80247 1.713101,-4.53941 15.113064,-21.78644 48.442093,-62.34961 31.488823,-38.32354 45.843948,-56.62455 60.532078,-77.1709 13.99516,-19.577 32.762,-50.597395 31.42461,-51.942861 -0.94222,-0.9479 -9.26819,-0.94291 -14.78285,0.0089 -12.2967,2.122276 -28.2818,7.712931 -47.474209,16.603711 -35.749105,16.56059 -58.12174,33.24459 -68.323489,50.95105 -2.693509,4.67494 -4.661387,11.40474 -5.383304,18.40998 -1.258083,12.20801 0.574627,15.75165 16.001218,30.93923 10.781034,10.61399 14.008076,14.78239 14.008076,18.09435 0,2.55667 -1.28669,3.25728 -5.982089,3.25728 -3.329979,0 -4.009743,-0.25298 -8.428248,-3.13664 C 29.50141,223.83307 19.685303,214.64922 13.80258,206.40491 10.23409,201.40386 6.3594504,193.35339 5.0152617,188.1472 3.6542326,182.87578 3.6488174,173.7518 5.0036947,168.65782 9.5166112,151.69044 25.605121,132.73158 51.056617,114.38859 69.942639,100.77736 123.81704,80.265999 149.01116,77.094801 c 11.56985,-1.456305 18.20757,0.05602 24.39549,5.558222 5.29105,4.704718 7.04068,11.063249 5.15929,18.749917 -1.07606,4.39635 -5.46832,14.02884 -8.29446,18.19023 -5.73293,8.44158 -41.23754,53.24085 -88.65927,111.86922 -12.891903,15.9385 -24.158847,29.94229 -25.037644,31.11954 -5.492272,7.35753 -15.62401,25.71901 -18.283706,33.13509 -1.638522,4.56872 -2.049242,4.74604 -7.265558,3.13688 z"
      id="path4322" inkscape:connector-curvature="0" />
      <path style="fill:#ffffff;stroke:#ffffff;stroke-opacity:1" d="m 147.30567,260.06951 c -9.07739,-1.32472 -22.46129,-5.96095 -36.76776,-12.73649 -8.74867,-4.14336 -8.72437,-4.11687 -8.73886,-9.52498 -0.0123,-4.59796 1.12581,-5.40836 6.83902,-4.86968 6.17337,0.58205 12.71453,2.1959 23.57962,5.81759 9.72027,3.24009 14.952,3.9717 17.73827,2.48053 2.19955,-1.17716 3.66017,-5.23215 3.67533,-10.20348 0.0189,-6.1915 -0.88876,-9.76547 -4.69416,-18.48394 -4.90176,-11.23029 -5.83869,-17.54724 -4.3884,-29.58726 1.11734,-9.27591 4.20323,-14.08442 11.19147,-17.43888 4.99386,-2.39712 9.32258,-3.17167 16.16519,-2.8925 4.97083,0.20281 6.44031,0.52151 9.91102,2.14948 4.93657,2.31556 8.87159,5.81995 11.06937,9.858 2.94986,5.41987 2.75275,11.67916 -0.36779,11.67916 -0.78098,0 -3.6293,-1.06841 -6.32959,-2.37424 -8.30997,-4.01861 -11.96173,-5.13476 -15.76708,-4.81919 -4.08281,0.33857 -6.22431,2.09162 -8.31615,6.80761 -1.08663,2.44979 -1.39087,4.25924 -1.39831,8.31642 -0.0117,6.36833 1.32351,10.96777 6.6396,22.87193 5.45801,12.22199 5.46694,12.25779 5.47449,21.96651 0.005,6.73738 -0.21045,9.00812 -1.02157,10.75468 -2.35929,5.08019 -6.98293,8.61235 -13.18437,10.072 -3.82589,0.90051 -6.00567,0.93072 -11.30934,0.15673 z"
      id="path4324" inkscape:connector-curvature="0" />
      <path style="fill:#ffffff;stroke:#ffffff;stroke-opacity:1" d="m 203.66852,235.30967 c -7.17675,-1.20001 -13.75014,-5.42035 -15.93536,-10.23103 -3.01967,-6.64773 0.7799,-20.31048 8.27156,-29.74352 5.76633,-7.26061 16.57992,-14.89382 30.54055,-21.5583 11.28494,-5.38716 18.4939,-7.83143 21.94898,-7.44199 10.05113,1.13291 13.34911,15.87171 6.35346,28.39389 l -1.8024,3.22627 2.14954,2.02728 c 2.45747,2.3177 3.98792,5.5377 3.98792,8.39047 0,5.42247 -6.29717,21.10431 -9.47994,23.60787 -1.97519,1.55369 -8.08765,2.90531 -9.4056,2.07983 -0.51754,-0.32416 -1.02566,-1.1558 -1.12916,-1.84809 -0.1035,-0.6923 -0.55888,-1.40097 -1.01194,-1.57483 -0.45307,-0.17386 -4.14049,0.61153 -8.19427,1.7453 -10.55478,2.95199 -19.91296,3.9937 -26.29334,2.92685 z m 22.51696,-16.56321 c 1.81528,-0.70075 4.78586,-2.26031 6.60131,-3.4657 3.87452,-2.57254 12.97495,-11.10625 12.97495,-12.16696 0,-0.403 -1.49217,-1.76043 -3.31594,-3.0165 -3.41705,-2.35341 -8.46642,-7.35943 -9.00466,-8.92734 -0.6551,-1.90833 -12.87932,5.32236 -19.55427,11.56645 -4.53812,4.24519 -6.55807,7.78129 -6.55807,11.48048 0,3.44202 0.48766,4.42901 2.68399,5.43221 2.74664,1.25455 11.90929,0.74316 16.17269,-0.90264 z"
      id="path4326" inkscape:connector-curvature="0" />
      <path style="fill:#ffffff;stroke:#ffffff;stroke-opacity:1" d="m 316.83218,235.77864 c -1.67763,-0.97399 -4.49379,-3.24719 -6.25814,-5.05157 l -3.20791,-3.28068 0.92315,-3.10858 c 4.71586,-15.88001 33.09227,-60.58004 81.64573,-128.612688 24.9659,-34.981986 27.34442,-37.991248 32.40964,-41.004023 2.24091,-1.332892 4.58431,-0.931027 6.49438,1.113711 2.38276,2.550747 4.43702,9.360426 4.08685,13.547489 -0.24994,2.98856 -1.1639,4.459293 -16.7493,26.952869 -9.06671,13.085502 -31.53835,45.616242 -49.93698,72.290532 l -33.45205,48.49871 -2.58924,7.10061 c -4.13932,11.3515 -5.39615,13.33942 -8.4278,13.33024 -1.03845,-0.003 -3.2607,-0.80263 -4.93833,-1.77662 z"
      id="path4328" inkscape:connector-curvature="0" />
      <path style="fill:#ffffff;stroke:#ffffff;stroke-opacity:1" d="m 425.2793,221.13557 c -6.94105,-1.98531 -11.70942,-4.77482 -16.67352,-9.75409 -8.73612,-8.7628 -9.65019,-11.65066 -10.3471,-32.69001 -0.28896,-8.72367 -0.83942,-17.49311 -1.22325,-19.48765 -0.38383,-1.99453 -1.80189,-5.82222 -3.15125,-8.50597 -2.07288,-4.12274 -2.40626,-5.29773 -2.14949,-7.57579 0.4063,-3.60465 3.12178,-7.39398 6.54688,-9.13588 4.07601,-2.07293 5.41032,-1.66787 7.59959,2.30705 1.58139,2.87122 2.41167,3.64127 5.75542,5.33791 4.6288,2.34867 7.94172,2.56445 10.97556,0.71489 2.40142,-1.46401 8.29066,-6.32973 37.57593,-31.0454 21.41545,-18.073845 31.8203,-25.847203 34.15047,-25.513468 1.64605,0.235751 3.20913,3.56578 4.38863,9.349642 0.7074,3.468864 0.78567,5.045616 0.30305,6.104846 -1.0991,2.41227 -62.20843,55.03449 -66.73989,57.47079 -2.88005,1.54844 -8.73821,1.86329 -12.9438,0.69569 -2.18882,-0.60768 -2.5156,-0.54424 -3.50777,0.68104 -0.89317,1.10302 -1.09409,2.50033 -1.09409,7.60913 0,10.14025 3.8104,29.45448 6.42361,32.5601 1.73225,2.05867 6.69838,4.76715 13.5872,7.41035 6.3838,2.44942 8.38937,4.06048 7.82988,6.28969 -0.98179,3.91174 -7.1408,8.39646 -11.40952,8.30791 -1.15229,-0.0239 -3.80573,-0.53275 -5.89654,-1.13078 z"
      id="path4330" inkscape:connector-curvature="0" />
      <path style="fill:#ffffff;stroke:#ffffff;stroke-opacity:1" d="m 478.88607,198.4211 c -2.6442,-1.30885 -5.9414,-5.09163 -6.52998,-7.49169 -0.19851,-0.80943 2.30358,-6.73766 7.02617,-16.64721 14.33264,-30.07455 18.60972,-36.29916 26.02944,-37.88163 5.63429,-1.20168 7.8775,1.21113 7.81654,8.40753 -0.0529,6.24059 -1.18531,8.74993 -12.26296,27.17286 -12.95161,21.53945 -17.06069,27.75721 -18.34331,27.75664 -0.59245,-2.6e-4 -2.2736,-0.59269 -3.7359,-1.3165 z"
      id="path4332" inkscape:connector-curvature="0" />
      <path style="fill:#ffffff;stroke:#ffffff;stroke-opacity:1" d="m 526.55726,116.96247 c -1.51586,-2.31349 -1.35151,-7.68961 0.33581,-10.98473 1.44544,-2.82276 5.01667,-6.563219 7.49179,-7.846809 1.44189,-0.747756 1.7178,-0.697655 2.85476,0.518379 2.2453,2.40147 5.61486,8.55151 5.61486,10.24813 0,1.15939 -0.84658,2.48782 -2.83423,4.4474 -5.31096,5.23593 -11.34096,6.85625 -13.46299,3.61763 z"
      id="path4334" inkscape:connector-curvature="0" />
      <path style="fill:#ffffff;stroke:#ffffff;stroke-opacity:1" d="m 598.31925,205.52498 c -12.56591,-1.71538 -21.19917,-4.67412 -25.77239,-8.83256 -3.97923,-3.61833 -5.24013,-4.2749 -8.20961,-4.2749 -3.51336,0 -5.86286,0.98382 -12.54259,5.25202 -5.06721,3.23783 -6.90136,4.04458 -11.73453,5.16143 -7.81305,1.80543 -15.45141,1.48038 -20.66111,-0.87923 -4.68477,-2.12186 -7.65692,-4.4098 -7.65692,-5.89424 0,-4.0675 24.37453,-38.29725 51.98523,-73.00411 5.65958,-7.11415 12.05379,-15.81542 14.20934,-19.33617 4.90012,-8.003556 11.03316,-20.229386 13.95512,-27.818616 1.22723,-3.187494 2.61658,-6.653003 3.08747,-7.70113 1.76195,-3.921922 9.94488,-5.931971 13.32502,-3.273151 4.17914,3.287308 4.99531,13.477754 1.81781,22.696336 -2.01441,5.844174 -7.42772,15.281161 -13.39448,23.350491 -2.21484,2.9953 -15.38994,19.80531 -29.278,37.35557 -13.88807,17.55026 -25.39997,32.2977 -25.58201,32.77209 -0.28349,0.73876 0.17933,0.74725 3.22567,0.0591 1.95616,-0.44187 5.62132,-1.25095 8.14479,-1.79796 l 4.58814,-0.99458 2.92072,-4.87371 c 6.51794,-10.87633 19.14531,-21.3022 35.48665,-29.29978 8.72077,-4.26802 15.03955,-6.42782 20.44424,-6.98797 4.77084,-0.49445 5.68495,0.19129 7.03965,5.28094 3.57263,13.42247 -2.47508,20.35612 -28.71071,32.91657 l -9.42055,4.51014 -0.0142,2.32778 c -0.0201,3.28751 0.73338,4.33425 4.1905,5.82146 5.4575,2.34776 22.22832,5.39889 25.35795,4.6134 3.78672,-0.95041 7.29653,4.99527 5.22913,8.85824 -0.32499,0.60726 -1.92752,1.96181 -3.56117,3.01012 -2.71976,1.74527 -3.3774,1.90073 -7.79725,1.84317 -2.65483,-0.0346 -7.45718,-0.42192 -10.67189,-0.86076 l -10e-6,0 z"
      id="path4336" inkscape:connector-curvature="0" />
      <path style="fill:#ffffff;stroke:#ffffff;stroke-opacity:1" d="m 659.47043,192.69104 c -12.75076,-4.34322 -16.65154,-9.17867 -15.63805,-19.3851 0.23895,-2.40637 0.97352,-6.12829 1.63237,-8.27093 1.06442,-3.46158 1.7872,-4.4817 6.4857,-9.15396 5.65407,-5.62247 12.48151,-10.13007 18.60164,-12.28112 2.57404,-0.9047 5.07907,-1.24714 9.1466,-1.25035 16.65033,-0.0131 23.50884,9.01235 19.31378,25.41598 -1.9077,7.45953 -4.35124,12.09102 -8.45439,16.02445 -9.67397,9.27381 -20.7136,12.43468 -31.08765,8.90103 z m 15.60611,-20.15497 c 4.7444,-4.95154 6.13869,-8.33828 4.12187,-10.01209 -2.07974,-1.72603 -6.98056,0.72152 -10.11851,5.05333 -1.99966,2.76044 -2.25746,4.99554 -0.76627,6.64329 1.72417,1.90519 3.82466,1.38199 6.76291,-1.68453 z"/>
    </g>
  </svg>

  <svg class="path filler-mask" width="200" viewBox="0 0 706.88611 308.12488">
    <mask id="easyMask">
      <path style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:24.29999924;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" d="M 48.151139,225.24924 C 28.169111,216.86716 22.515409,198.93285 12.825335,183.68947 l 4.155977,-22.16521 27.01385,-31.86249 29.091844,-17.31658 55.413014,-24.935858 33.24782,-2.07799 11.77526,4.84864 -18.70189,36.018468 -34.63314,45.71575 -42.945094,52.64238 -40.867105,48.4864 -9.69728,15.23858 8.311954,4.15597 126.757295,-169.70239 47.79373,32.55515 -15.93124,20.77989 -20.08723,-7.61929 -20.77988,10.38993 2.07799,18.7019 8.31195,27.70652 c -0.92355,8.77793 0,22.44037 0,22.16521 l -15.93124,5.5413 -28.39918,-11.0826 -18.00922,-7.61929 4.84864,35.3258 c 46.10355,10.72318 91.90063,24.10238 143.3812,-11.77527 l 36.71113,-60.95433 -39.48179,-6.92663 4.84864,-11.0826 c -3.37325,-7.38177 -8.94275,-2.55139 -13.85325,-1.38533 l -29.78451,20.08722 c -17.77223,22.37517 -9.28191,30.53835 -6.23396,25.62853 8.42478,6.51398 17.21586,1.00337 22.85787,-0.69266 l 27.70652,-11.77527 -6.23397,15.23858 24.93586,15.23858 82.42688,-172.473048 72.03694,-17.31657 0,13.85326 c -41.8513,49.481268 -71.49511,91.402808 -102.5141,148.229848 l -4.84865,9.69728 c 0.32011,15.24374 5.66195,2.60841 7.6193,3.11698 11.65211,-37.56029 56.79835,-95.24114 56.79835,-95.24114 l 58.18369,-79.656228 65.1103,17.31657 -4.15598,20.77989 -47.79373,40.867108 -27.01386,20.77988 -18.00923,-14.54592 -11.08261,14.54592 c -8.37474,-0.3043 6.02765,5.9515 11.08261,9.00462 l -0.69266,21.47255 c -1.44687,13.03228 2.24483,17.50027 6.23396,21.47255 5.74506,8.98413 12.73504,13.61104 22.16521,9.69728 l 19.39456,-11.77527 19.39456,-63.03232 35.32581,0.69266 -29.09184,51.94972 1.38532,2.07798 36.01847,-120.523328 82.42688,-3.46332 c 14.34381,-0.60268 -1.21426,15.9808 -4.84863,24.93587 l -33.94049,47.793728 -37.40379,51.94972 5.5413,0.69266 33.24782,-8.31195 9.69728,-22.16521 38.09645,-23.55054 4.84864,11.0826 -35.3258,22.16521 -2.07799,14.54592 c 9.40693,14.78376 23.93762,9.07249 36.71113,10.38995 l 38.78912,-72.7296 23.55054,19.39456 c -3.61572,7.46688 -1.58846,-1.28838 -18.00924,16.62391 -1.90405,7.78295 -13.09451,25.7954 0,18.70189 5.68109,6.73186 11.87489,7.28412 19.39456,-0.69266 l 11.08261,-8.31195 c 4.90913,-8.63997 9.12678,-16.35678 -6.92663,-18.00924 l -5.5413,-6.92663 -17.31657,-133.683928 c 0,0 -114.98204,7.6193 -114.98204,14.54592 0,6.92663 -9.69727,83.812208 -9.69727,83.812208"/>
    </mask>
  </svg>
</div>
            
          
!
            
              body{
  background-color: purple;
  background: linear-gradient(-90deg, red, yellow, green, blue, purple);
}

.signature-canvas {
  position: absolute;
}

.filler-mask {
  position: absolute;
  height: 150px;
  z-index: 900;
}

.filler-img {
  position: absolute;
  height:150px;
  z-index: 50;
}

.path {
  stroke-dasharray: 5000;
  stroke-dashoffset: 5000;
  animation: dash 3s cubic-bezier(.26, .02, .61, .97) forwards;
  animation-delay: 1s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 000;
  }
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console