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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

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.

HTML

            
              <link href="https://fonts.googleapis.com/css?family=Creepster" rel="stylesheet">
<div class="parallax-container" >
    <div class="parallax-base">
      
<svg viewBox="0 0 212 140" id="background">
  <defs
     id="defs2">
    <linearGradient
       id="linearGradient5238">
      <stop
         id="stop5234"
         offset="0"
         style="stop-color:#ffa613;stop-opacity:1" />
      <stop
         id="stop5236"
         offset="1"
         style="stop-color:#dc2222;stop-opacity:1" />
    </linearGradient>
    <linearGradient
       id="linearGradient4594">
      <stop
         id="stop4590"
         offset="0"
         style="stop-color:#d4ff2a;stop-opacity:1;" />
      <stop
         id="stop4592"
         offset="1"
         style="stop-color:#d4ff2a;stop-opacity:0;" />
    </linearGradient>
    <linearGradient
       id="linearGradient4584">
      <stop
         id="stop4580"
         offset="0"
         style="stop-color:#d4ff2a;stop-opacity:1" />
      <stop
         id="stop4582"
         offset="1"
         style="stop-color:#e5ff80;stop-opacity:1" />
    </linearGradient>
    <linearGradient
       gradientUnits="userSpaceOnUse"
       y2="121.67574"
       x2="41.709671"
       y1="153.9549"
       x1="61.818005"
       id="linearGradient4586"
       xlink:href="#linearGradient4584" />
    <linearGradient
       gradientTransform="matrix(0.78481015,0,0,1,0.75884107,15.240949)"
       gradientUnits="userSpaceOnUse"
       y2="126.66018"
       x2="17.345284"
       y1="121.42236"
       x1="11.444451"
       id="linearGradient4596"
       xlink:href="#linearGradient4594" />
    <linearGradient
       y2="126.66018"
       x2="17.345284"
       y1="121.42236"
       x1="11.444451"
       gradientTransform="translate(33.084433,3.5802794)"
       gradientUnits="userSpaceOnUse"
       id="linearGradient4600"
       xlink:href="#linearGradient4594" />
    <linearGradient
       y2="126.66018"
       x2="17.345284"
       y1="121.42236"
       x1="11.444451"
       gradientTransform="matrix(0.63291147,0,0,0.68354438,32.668797,52.165983)"
       gradientUnits="userSpaceOnUse"
       id="linearGradient4604"
       xlink:href="#linearGradient4594" />
    <linearGradient
       y2="126.66018"
       x2="17.345284"
       y1="121.42236"
       x1="11.444451"
       gradientTransform="matrix(0.73179528,0,0,0.79859224,19.881103,30.161681)"
       gradientUnits="userSpaceOnUse"
       id="linearGradient4608"
       xlink:href="#linearGradient4594" />
    <linearGradient
       y2="126.66018"
       x2="17.345284"
       y1="121.42236"
       x1="11.444451"
       gradientTransform="matrix(1.2278481,0,0,0.86075949,-4.5803086,19.18966)"
       gradientUnits="userSpaceOnUse"
       id="linearGradient4612"
       xlink:href="#linearGradient4594" />
    <linearGradient
       y2="126.66018"
       x2="17.345284"
       y1="121.42236"
       x1="11.444451"
       gradientTransform="translate(45.946918,20.619757)"
       gradientUnits="userSpaceOnUse"
       id="linearGradient4616"
       xlink:href="#linearGradient4594" />
    <linearGradient
       y2="126.66018"
       x2="17.345284"
       y1="121.42236"
       x1="11.444451"
       gradientTransform="translate(31.6258,22.940308)"
       gradientUnits="userSpaceOnUse"
       id="linearGradient4620"
       xlink:href="#linearGradient4594" />
    <linearGradient
       y2="126.66018"
       x2="17.345284"
       y1="121.42236"
       x1="11.444451"
       gradientTransform="matrix(0.91139244,0,0,0.74683548,32.64574,54.7544)"
       gradientUnits="userSpaceOnUse"
       id="linearGradient4624"
       xlink:href="#linearGradient4594" />
    <radialGradient
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1.0407338,-0.39726718,0.58776084,1.5397763,-157.45598,-132.95829)"
       r="107.3889"
       fy="260.52872"
       fx="106.23607"
       cy="260.52872"
       cx="106.23607"
       id="radialGradient5242"
       xlink:href="#linearGradient5238" />
    <filter
       id="xdarken"
       style="color-interpolation-filters:sRGB">
      <feColorMatrix
         id="feColorMatrix5252"
         values="1 0 0 -0.45 -0 0 1 0 -0.45 -0 0 0 1 -0.45 -0 0 0 0 1 0" />
    </filter>
  </defs>
 
  <g
     transform="translate(1.1528274,-88.716216)"
     id="layer1">
    <rect
       y="69"
       x="-2.6495366"
       height="141.43904"
       width="214.7778"
       id="back"
       style="opacity:1;fill:url(#radialGradient5242);fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" />
    <path
       id="hill"
       d="m -2.0525465,198.40975 c 61.6117115,-1.31464 90.1084645,16.08804 90.1084645,16.08804 0,0 103.265872,-13.88043 123.524002,-8.59973 l 0.54834,24.21145 H -2.6495366 Z"
       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <g
       style="opacity:0.8"
       transform="matrix(1.8051948,0,0,1.8051948,-33.856228,-123.40759)"
       id="moon">
      <circle
         style="opacity:1;fill:url(#linearGradient4586);fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         id="path4578"
         cx="49.118004"
         cy="133.84657"
         r="20.372917" />
      <ellipse
         style="opacity:1;fill:url(#linearGradient4596);fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         id="path4588"
         cx="11.847941"
         cy="138.28769"
         rx="2.0553458"
         ry="2.6189082"
         transform="rotate(-8.7980003)" />
      <circle
         r="2.6189082"
         cy="126.62703"
         cx="47.214096"
         id="circle4598"
         style="opacity:1;fill:url(#linearGradient4600);fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
      <ellipse
         style="opacity:1;fill:url(#linearGradient4604);fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         id="circle4602"
         cx="41.611622"
         cy="136.2739"
         rx="1.657537"
         ry="1.7901399" />
      <ellipse
         cy="128.42586"
         cx="30.221125"
         id="circle4606"
         style="opacity:1;fill:url(#linearGradient4608);fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         rx="1.9165046"
         ry="2.0914397"
         transform="matrix(1,0,0.25518785,0.96689149,0,0)" />
      <ellipse
         style="opacity:1;fill:url(#linearGradient4612);fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         id="circle4610"
         cx="12.768774"
         cy="125.10332"
         rx="3.2156215"
         ry="2.25425"
         transform="rotate(-14.603817)" />
      <circle
         r="2.6189082"
         cy="143.66652"
         cx="60.076584"
         id="circle4614"
         style="opacity:1;fill:url(#linearGradient4616);fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
      <circle
         style="opacity:1;fill:url(#linearGradient4620);fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         id="circle4618"
         cx="45.755466"
         cy="145.98708"
         r="2.6189082" />
      <ellipse
         cy="146.65009"
         cx="45.523411"
         id="circle4622"
         style="opacity:1;fill:url(#linearGradient4624);fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         rx="2.3868532"
         ry="1.9558935" />
    </g>
  </g>
  
</svg>
    
      
<svg id="flash_1"  viewBox="0 0 212.4 140.6" >
<g transform="translate(-65,0)" >
<path id="flash__1" d="m132.85-21.854-9.9634 41.989 6.405-0.9489-11.861 29.89 14.233 5.9306-5.2189 31.551 10.912-6.1678 18.503 56.697-14.233-62.153-9.9634 3.7956 5.2189-28.23-10.438-7.5912 12.098-28.23-7.354-1.1861 13.522-37.481z" fill="#fea" fill-rule="evenodd"/>
  </g>
</svg>          

<svg id="flash_2"  viewBox="0 0 212.4 140.6" >
<g transform="translate(-65,0)" >
<path  id="flash__2" d="m169.85-22.803-10.912-0.9489-7.1167 49.343-6.6423-4.5073 2.8467 44.598 14.233 4.9817-6.4051 22.774-7.1167-6.6423-1.4234 45.31 5.9306-31.788 7.354 3.0839 12.573-35.584-17.08-5.6934-2.6095-26.095 5.4562 2.6095z" fill="#fea" fill-rule="evenodd"/>
  </g>
</svg>    

      
      
      
  <div id="bat">
<svg
   id="wing_r"
   viewBox="0 0 45 19" >
 
  <g
     transform="translate(-77.043914,-24.975036)"
     id="wing__r">
    <path
       style="fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 101.6398,39.194753 6.71278,-3.640828 6.03012,-2.123816 7.14945,9.534393 c -2.78306,-1.628011 -4.94247,-1.322732 -6.71548,0.1804 -3.19085,-1.734569 -4.11552,-0.737824 -5.83517,0.191403 -1.06356,-3.159527 -4.20581,-3.646447 -7.3417,-4.141552 z"
       id="path10153" />
    <path
       id="path5316"
       d="m 102.04575,38.39188 c 4.11709,-2.39487 8.28838,-4.51879 12.59229,-5.97958 3.5963,4.09441 4.83325,7.14021 6.89411,10.5522 l -5.06506,-6.82376 -0.56278,1.05522 -1.08764,5.948942 0.45451,-5.808242 c -0.0233,-0.49219 -0.16234,-1.581239 -0.74142,-2.814519 l -1.43937,1.407559 c -0.76824,1.84582 -3.17132,6.068775 -4.10889,7.406605 l 3.77365,-8.598212 c -3.3767,0.51553 -6.98096,3.188017 -10.35766,4.568307 -3.376332,4.10427 -4.78264,-0.34581 -0.35174,-0.91452 z"
       style="opacity:1;fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
  </g>
      </svg>
    
    
    
  <svg
   id="wing_l"
   viewBox="0 0 45 19" >
  <g
     transform="translate(-77.043914,-24.975036)"
     id="wing__l">
    <path
       style="fill-rule:evenodd;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 79.036322,26.224301 10.922486,-0.493029 2.920246,4.588962 2.882324,7.092029 c -2.588148,-1.086049 -5.242207,-1.982603 -8.625941,-0.781344 -0.772211,-2.345867 -1.614087,-4.63043 -4.8607,-4.798824 0.398935,-2.339218 -0.95762,-4.203979 -4.300323,-5.531943 z"
       id="path10151" />
    <path
       style="opacity:1;fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 77.06094,26.42394 c 4.50227,-0.5843 9.00455,-1.54725 13.50682,-1.26627 1.22208,2.15503 1.72056,2.24267 5.4168,11.46673 3.839765,1.151554 1.454143,4.565237 -0.63313,1.12557 -1.49098,-3.55705 -2.43558,-7.2702 -5.13541,-10.48186 -0.39572,1.74109 -2.311365,8.368718 -3.080585,9.362808 0.16382,-1.14901 1.771266,-7.992326 2.452956,-9.141346 l -0.546279,-0.534678 c -1.219292,0.781866 -5.112515,3.74913 -6.767375,4.8772 l 4.651435,-4.374358 C 88.15476,26.311769 88.340836,25.816542 86.13583,26.0722 Z"
       id="path9986" />
  </g>
      </svg>
    
 
    <svg
   id="bathead"
   viewBox="0 0 45 19" >
  <g
     transform="translate(-235.17025,-302.60376)"
     id="head">
    <g
       id="g10061">
      <path
         id="path9948"
         d="m 253.44537,315.06242 c 2.60229,-1.80838 4.87421,-1.1698 6.72672,0.95818 0.26624,0.34454 0.41465,0.51845 0.35174,0.91452 -0.67839,1.40915 -1.92449,2.06136 -3.72845,1.96975 -1.28971,-0.0274 -2.40844,-0.12515 -3.69815,-2.37489 -0.0761,-0.45739 -0.0257,-1.1261 0.34814,-1.46756 z"
         style="opacity:1;fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    </g>
    <path
       style="opacity:1;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26499999;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 254.47389,313.41772 1.12557,1.7587 0.28139,-2.53253"
       id="path9950" />
    <path
       style="opacity:1;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26499999;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 257.11964,312.86553 -0.0549,1.45629 1.01665,-1.84097"
       id="path9952" />
    <path
       style="opacity:1;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26499999;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 259.33155,313.77228 -1.22273,1.29142"
       id="path9954" />
    <path
       style="opacity:1;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26499999;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 258.41107,313.47003 -0.65945,1.08534"
       id="path9956" />
    <path
       style="opacity:1;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26499999;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 259.92231,315.14613 -0.4259,0.50833"
       id="path9958" />
    <path
       style="opacity:1;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26499999;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 254.1109,314.25312 0.43963,0.46712"
       id="path9960" />
    <path
       style="opacity:1;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26499999;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 253.56136,317.02831 -0.63198,0.50833"
       id="path9962" />
    <path
       style="opacity:1;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26499999;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 254.33072,317.85263 -0.4259,0.5358"
       id="path9964" />
    <path
       style="opacity:1;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26499999;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 255.45728,318.44338 -0.2473,0.6045"
       id="path9966" />
    <path
       style="opacity:1;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26499999;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 256.15794,318.53955 -0.0962,0.86553"
       id="path9968" />
    <path
       style="opacity:1;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26499999;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 257.889,318.62199 0.12365,0.67319"
       id="path9970" />
    <path
       style="opacity:1;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26499999;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 258.94687,318.34722 0.2473,0.49458"
       id="path9972" />
    <path
       style="opacity:1;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26499999;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 259.40024,318.11366 0.32973,0.42589"
       id="path9974" />
    <ellipse
       style="opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:#ff0000;stroke-width:0.26526964;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       id="ellipse9976"
       cx="275.41226"
       cy="316.87991"
       rx="0.87435418"
       ry="1.1741394"
       transform="matrix(1,0,-0.06371662,0.99796803,0,0)" />
    <ellipse
       transform="matrix(1,0,-0.00911488,0.99995846,0,0)"
       ry="1.1718023"
       rx="0.87435418"
       cy="316.65366"
       cx="260.68942"
       id="ellipse9978"
       style="opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:#ff0000;stroke-width:0.2650055;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
    <circle
       style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.34294116;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       id="circle9980"
       cx="255.14442"
       cy="316.21823"
       r="0.26171145" />
    <circle
       r="0.26171145"
       cy="316.61081"
       cx="257.82101"
       id="circle9982"
       style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.34294116;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
  </g>
</svg>
      </div>   
      

      
<svg   viewBox="0 0 213 141"
   version="1.1"
   id="svghand">
  <defs
     id="defs4">
  </defs>
  
  <path
     id="hand" class="lines"
     d="m 65.986404,129.23084 c 0,0 3.9727,-2.24078 5.576378,-3.89305 1.603678,-1.65226 3.713394,-5.92672 3.713394,-5.92672 l 4.154644,-6.57821 -0.305557,-1.6516 c 0.299447,-1.00893 0.707477,-1.95797 1.680553,-2.59536 l 0.381944,0.11797 1.527771,-3.00826 c -0.576659,-1.58738 -2.434346,-1.89623 -3.284711,-3.89305 -0.181283,-1.07787 -0.387814,-2.126506 -0.381945,-3.421156 l 1.06944,-0.17696 c -0.377667,-1.74732 0.3178,-2.29769 0.763889,-3.12623 0.126059,0.41493 0.07753,0.90689 0.847112,1.03787 -0.08351,0.85341 0.104058,1.70683 0.60427,2.56025 -0.305329,0.31492 -0.6446,0.57745 -0.763882,1.17971 0.239719,0.802056 0.938167,1.427006 1.756934,2.005506 0.360845,-1.68755 0.875049,-3.256676 1.527771,-4.718846 l 1.527791,-2.47739 c 0.781307,-0.6447 1.569561,-1.28618 2.826379,-1.71058 l 0.229163,0.64884 -0.06272,0.64357 -1.388648,1.36194 -0.916671,2.12348 2.291667,-2.0645 c 0.840276,-0.3949 1.680551,-0.74257 2.520828,-0.76681 0.418275,0.81453 0.840692,1.63226 1.069445,2.30044 l -0.687507,0.29493 c -0.156203,-0.45457 -0.357995,-0.88802 -0.993058,-1.12073 -1.000718,0.33094 -1.481118,1.3315 -2.215259,2.00551 -0.592682,0.84252 -0.495519,1.32993 -0.534732,1.887526 1.049968,-0.417516 2.317744,-1.003226 2.826379,-1.002746 0.444892,0.0605 1.501549,0.947646 2.291666,1.474636 l 1.145837,1.41566 -0.916674,-0.059 -2.597217,-1.41566 c -1.066933,0.25802 -1.576281,1.05423 -2.291646,1.65159 -0.198014,0.66194 -0.285101,1.27248 0,1.71059 l 3.131929,0.64884 1.527771,1.2387 c -0.563922,-0.17714 -1.025967,-0.17072 -1.298608,0.17695 l -0.763877,-0.47188 -1.909727,-0.47189 -0.534713,0.17695 c -0.29652,0.30001 -0.292079,0.98733 -0.305551,1.6516 L 86.814293,109.24 c -1.310275,1.37457 -1.77558,2.74915 -2.647357,4.12371 l -1.45139,3.30319 0.229169,1.29769 -0.458331,1.41565 -0.53472,0.41289 c 0,0 -0.435168,1.67011 -0.381945,2.41841 0.05324,0.74831 0.08565,1.28939 0.611107,2.00551 0.525462,0.71613 1.506042,1.15677 2.673599,2.00552 1.167556,0.84874 1.625446,2.2426 4.354169,3.06724 l -20.013851,4.07001 z"
     style="opacity:1;fill:url(#linearGradient4651);fill-opacity:1;fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
  <path
     id="line_hand"
     d="m 89.208596,129.28981 -20.013853,4.07001 -3.208338,-4.12898"
     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
  
</svg>
      
    
  <svg   viewBox="0 0 213 141"
   version="1.1"
   id="grave" class="stones">
  
  <path
     id="gravestone_2" class="lines"
     d="m 58.846021,75.555074 -0.15037,1.3379 a 11.680255,8.8722752 5.1644077 0 0 -9.3245,5.70095 l -1.02371,-0.10542 -0.49558,4.45709 1.17978,0.0739 a 11.680255,8.8722752 5.1644077 0 0 7.6202,6.9696 l -0.28164,2.56418 c -1.32922,0.23832 -2.65382,0.49134 -3.46697,2.2779 l -2.17868,-0.39636 v 1.684126 l -4.55632,-0.693486 -3.66487,28.525386 24.76179,2.17919 3.16983,-28.32747 -4.42867,-0.27853 0.36742,-1.702226 -1.78284,-0.0992 c -0.78308,-1.37223 -1.95071,-1.97515 -2.97139,-2.87218 l 0.39635,-1.98127 0.0196,-0.27027 a 11.680255,8.8722752 5.1644077 0 0 9.55291,-5.83014 l 0.72812,0.0589 0.6935,-4.35839 -1.13947,-0.0713 a 11.680255,8.8722752 5.1644077 0 0 -7.71839,-6.94893 l 0.14159,-1.39836 z m -0.51625,4.58887 -0.37516,3.33519 -4.00855,-0.41341 a 7.3571316,5.8231542 6.1073881 0 1 4.38371,-2.92178 z m 5.49631,0.5271 a 7.3571316,5.8231542 6.1073881 0 1 3.69073,3.45508 l -4.01526,-0.25115 z m -10.2061,6.63525 3.74035,0.23358 -0.34934,3.18172 a 7.3571316,5.8231542 6.1073881 0 1 -3.39101,-3.4153 z m 8.89094,0.72864 4.78472,0.38705 a 7.3571316,5.8231542 6.1073881 0 1 -5.03742,3.10421 z"
     style="opacity:1;fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
  <path
     id="line_g2" 
     d="m 42.503362,127.95084 24.76179,2.17919"
     style="stroke:#000000;stroke-width:1.5;fill:none;fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
  
 </svg>      
      
  <svg
   viewBox="0 0 212 140"
   version="1.1"
   id="ghost">
   <defs>
    <filter id="disfilter">
      <feTurbulence type="fractalNoise" baseFrequency="0.05 0.05" numOctaves="2" result="warp" >
      <animate attributeType="XML" attributeName="baseFrequency" from="0.03 0.03" to="0.05 0.05"
        dur="2s" repeatCount="indefinite"/>
      </feTurbulence>
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="20" in="SourceGraphic" in2="warp"/>
    </filter>
  </defs>
    
 
  <g
     id=""
     transform="translate(1.15,-88.71)">
   
  <g
     id="ghost1">
    <path
       style="opacity:0.3;fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:0.19091424px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 100.79161,132.69971 c -1.333632,-2.27245 -1.884306,-4.93766 -3.007029,-7.31692 -1.566889,-5.09862 -2.457398,-10.18646 -2.571554,-15.48165 -0.363995,-7.24126 2.769229,-15.092861 9.299183,-17.065643 4.18881,-1.121088 11.59069,1.569454 14.28843,9.371783 2.94433,6.2779 3.44947,13.34521 4.56873,19.40732 0.44669,2.43287 0.55536,4.86948 0.85666,7.32839 0,0 -2.09928,-4.16754 -3.25026,-3.9011 -1.15099,0.26644 -0.0904,8.20137 -0.0904,8.20137 0,0 -4.38506,-8.57875 -5.56606,-7.81757 -1.181,0.76119 1.51308,7.73639 1.51308,7.73639 0,0 -3.19598,-4.50606 -4.13691,-3.68064 -0.94093,0.8254 -0.23147,5.7131 -0.23147,5.7131 0,0 -3.62169,-5.89399 -4.88809,-5.03102 -1.26639,0.86298 0.0892,6.30332 0.42496,7.70133 0,0 -2.80584,-4.133 -3.50905,-3.33685 -0.7032,0.79615 -0.17612,3.33416 -0.17612,3.33416 0,0 -3.28524,-4.0866 -3.5241,-5.16245 z"
       id="path8656" />
    <ellipse
       transform="matrix(1,0,0.03111267,0.99951588,0,0)"
       ry="4.2458224"
       rx="2.0475318"
       cy="105.81969"
       cx="98.693253"
       id="ellipse9337"
       style="opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.28869617;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
    <ellipse
       style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.28869617;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       id="path8677"
       cx="98.147614"
       cy="106.34912"
       rx="2.0475318"
       ry="4.2458224"
       transform="matrix(1,0,0.03111267,0.99951588,0,0)" />
    <ellipse
       style="opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.29199275;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       id="ellipse9339"
       cx="89.086861"
       cy="105.88109"
       rx="2.0475318"
       ry="4.3433409"
       transform="matrix(1,0,0.21289874,0.97707427,0,0)" />
    <ellipse
       transform="matrix(1,0,0.21289874,0.97707427,0,0)"
       ry="4.3433409"
       rx="2.0475318"
       cy="106.42267"
       cx="88.44239"
       id="ellipse8679"
       style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.29199275;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
    <path
       id="path9341"
       d="m 101.25903,114.85223 c 0.36338,-1.60573 2.49577,-2.43815 3.6576,-1.25544 1.00834,0.9066 2.68609,1.06005 3.62958,-0.0347 0.40159,-0.68924 1.23894,-0.47351 1.84663,-0.29923 0.70214,0.28725 1.38874,-0.083 1.79021,-0.69883 0.47633,-0.5191 0.54476,-1.40401 1.18517,-1.75184 0.60181,-0.007 1.20411,0.42134 1.73156,-0.19576 0.48193,-0.3651 1.54588,-1.3397 1.7864,-0.22891 0.0583,0.56536 0.50473,1.00842 0.49076,1.60877 0.10402,1.4453 -0.84599,2.86052 -2.1188,3.33264 -0.75469,0.85366 -0.21777,2.07061 -0.37144,3.09023 -0.0472,1.0268 -1.21074,0.64857 -1.84907,0.59394 -0.907,-0.1249 -1.87046,-0.4983 -2.76822,-0.16272 -0.71464,0.3982 -0.93744,1.57448 -1.85755,1.57939 -0.6336,-0.18067 -1.41644,-0.73959 -1.86516,0.14845 -0.4277,0.62774 -1.04535,1.39233 -1.86835,1.08397 -1.14803,-0.2781 -1.50802,-1.61081 -2.0164,-2.57095 -0.21494,-0.79652 -1.23393,-0.61631 -1.48674,-1.40842 -0.35267,-0.78092 0.29135,-1.52801 0.12602,-2.32612 -0.007,-0.1687 -0.0213,-0.3371 -0.0422,-0.50448 z"
       style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:0.19091424px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <path
       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.19091424px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 100.72986,115.3814 c 0.36338,-1.60573 2.49577,-2.43815 3.6576,-1.25544 1.00834,0.9066 2.68609,1.06005 3.62958,-0.0347 0.40159,-0.68924 1.23894,-0.47351 1.84663,-0.29923 0.70214,0.28725 1.38874,-0.083 1.79021,-0.69883 0.47633,-0.5191 0.54476,-1.40401 1.18517,-1.75184 0.60181,-0.007 1.20411,0.42134 1.73156,-0.19576 0.48193,-0.3651 1.54588,-1.3397 1.7864,-0.22891 0.0583,0.56536 0.50473,1.00842 0.49076,1.60877 0.10402,1.4453 -0.84599,2.86052 -2.1188,3.33264 -0.75469,0.85366 -0.21777,2.07061 -0.37144,3.09023 -0.0472,1.0268 -1.21074,0.64857 -1.84907,0.59394 -0.907,-0.1249 -1.87046,-0.4983 -2.76822,-0.16272 -0.71464,0.3982 -0.93744,1.57448 -1.85755,1.57939 -0.6336,-0.18067 -1.41644,-0.73959 -1.86516,0.14845 -0.4277,0.62774 -1.04535,1.39233 -1.86835,1.08397 -1.14803,-0.2781 -1.50802,-1.61081 -2.0164,-2.57095 -0.21494,-0.79652 -1.23393,-0.61631 -1.48674,-1.40842 -0.35267,-0.78092 0.29135,-1.52801 0.12602,-2.32612 -0.007,-0.1687 -0.0213,-0.3371 -0.0422,-0.50448 z"
       id="path8681" />
  </g>
</svg>
    
      
<svg   viewBox="0 0 213 141"
   version="1.1"
   id="graves"  class="stones">
  <defs
     id="defs4">
  </defs>
  <path 
     id="gravestone_1"  class="lines"
     d="m 132.90671,126.01963 -1.70633,-25.40294 c 1.8431,0.0546 2.3777,-0.978576 2.64481,-2.234136 2.64116,-2.09281 3.95126,-6.3743 8.78758,-6.37142 l -0.59722,-8.35732 -6.3134,0.33098 -0.34126,-4.7165 6.39872,-0.16549 -0.25595,-5.0475 6.31341,-0.24823 v 5.04749 l 6.56935,-0.24825 0.0853,4.63377 -6.3134,0.41373 0.59721,7.94359 c 6.07699,0.42776 7.66181,6.18299 9.55543,6.12319 0.13576,1.6471 1.40084,1.7608 2.6448,1.90315 l 1.62102,25.899406 z"
     style="fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
  <path
     id="gravestone_3" class="lines"
     d="m 106.47838,87.649274 c 3.64959,0.22333 6.73029,-0.46852 9.86145,-1.0792 -0.79744,3.3455 -0.71012,6.691 -0.70439,10.0365 l 11.2702,-3.02174 c 0.0375,2.73395 0.54013,5.46791 1.10688,8.201856 -3.46687,-0.36804 -6.86359,-0.79252 -11.37082,-0.32375 1.47211,11.94408 4.38323,23.50232 6.84263,35.18168 l -10.36458,1.61879 c -0.73177,-12.09675 -1.22869,-24.10954 -2.71692,-36.47672 -3.72319,0.32988 -7.44638,1.43617 -11.169576,2.91383 -0.0954,-3.0273 -0.47482,-5.750096 -1.1069,-8.201866 6.209226,0.70253 8.374836,0.32088 11.572086,0.21584 -0.79333,-3.1719 -1.89027,-6.18099 -3.22006,-9.06522 z"
     style="fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
   <path
     id="line_g3"
     d="m 113.11975,138.26341 10.36458,-1.61879"
     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
  <path
     id="line_g1"
     d="m 132.90671,126.01963 29.69007,-0.49648"
     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

</svg>

<svg viewBox="-30 0 270 141"
   id="foreground">
  <defs
     id="defs2">
    <linearGradient
       id="linearGradient4638">
      <stop
         style="stop-color:#000000;stop-opacity:1"
         offset="0"
         id="stop4634" />
      <stop
         style="stop-color:#1a1a1a;stop-opacity:1"
         offset="1"
         id="stop4636" />
    </linearGradient>
    <linearGradient
       id="linearGradient4649">
      <stop
         style="stop-color:#000000;stop-opacity:1"
         offset="0"
         id="stop4645" />
      <stop
         style="stop-color:#1a1a1a;stop-opacity:1"
         offset="1"
         id="stop4647" />
    </linearGradient>
     <linearGradient
       xlink:href="#linearGradient4649"
       id="linearGradient4651"
       x1="253.9055"
       y1="224.59865" 
       x2="269.23392"
       y2="164.76483"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0.64922303,0,0,0.50131447,-87.723169,15.133564)" />
    <linearGradient
       xlink:href="#linearGradient4638"
       id="linearGradient4640"
       x1="87.21772"
       y1="213.96494"
       x2="87.118889"
       y2="201.47855"
       gradientUnits="userSpaceOnUse" />
  </defs>
  
  <path
     id="tree" class="lines"
     d="m 133.19576,26.001794 -2.73076,1.2912 -1.09231,-0.29796 1.72949,-7.15126 8.6474,-2.88036 h 3.9141 l -1.18334,5.6614 1.36538,0.69527 -0.0911,1.68848 1.4564,0.19865 0.18206,2.08578 1.8205,-1.58918 0.3641,-1.68848 0.91026,1.29119 0.27308,5.95937 6.09869,0.0994 3.82307,1.29119 -5.18845,3.27765 -0.45513,10.13095 7.82819,3.67495 3.18589,-7.25058 -4.91537,-0.0994 3.00384,1.98644 -1.82052,2.68173 -5.09741,-2.88038 0.36409,-5.46274 6.82691,-3.77429 3.73204,2.88037 1.54743,8.83975 0.54616,1.88713 6.55383,3.47631 2.36666,7.94583 2.00255,1.58918 -2.09358,1.58915 -4.27819,-1.19187 -1.4564,-3.37698 1.18332,-0.8939 1.72948,1.48984 c 0,0 -1.27435,1.98646 -0.91024,1.68849 0.36409,-0.29797 2.36665,-2.58239 2.36665,-2.58239 l -2.91281,-2.88038 -3.45896,2.0858 1.27435,4.27087 -2.27564,1.39052 0.0911,3.07901 2.63974,-0.59593 -1.91154,-0.69526 -0.0911,-1.19188 1.72949,-0.99323 6.18972,2.5824 3.73205,-2.28442 2.36666,-0.0994 2.09358,1.39052 1.27436,3.17833 -4.73332,6.15804 -2.45769,0.0994 -1.0923,2.48307 -4.46025,-1.48984 -0.63718,-4.86683 -2.82178,-0.0994 -3.54999,0.39729 -3.09487,-4.17157 -5.55255,2.48308 -1.54743,-1.09255 -0.36409,-10.52824 -1.82052,1.88714 -4.64229,-0.69527 v 3.77429 l 1.36538,-2.28444 3.18588,0.69526 0.45513,7.64786 2.63974,2.68172 5.64357,-1.29119 1.63847,2.97969 -0.81923,5.06548 3.54999,3.079 1.72947,-3.57563 -1.54743,-2.28443 0.3641,2.08579 -1.54743,0.99323 -0.81923,-0.49662 0.72821,-4.37021 4.91537,0.29797 0.3641,4.46953 7.09999,2.68173 6.37176,-5.06547 2.8218,-0.69527 1.27435,1.19187 -0.3641,1.68851 -1.4564,0.0994 1.72947,0.89392 2.54873,-6.05871 2.36665,-0.59594 3.00385,12.01808 -4.00512,6.55531 1.91152,4.07224 -4.00511,7.945826 -1.45641,-0.0994 -3.82306,-2.681706 -0.45513,-4.07224 -0.7282,-0.59595 0.18204,-1.29119 1.54743,-0.0994 -0.0911,-1.09255 -2.73077,-0.19864 -0.0911,2.1851 -3.73204,-1.58916 -0.45513,1.88714 5.00639,1.39051 0.36411,3.47631 -3.09487,-1.29121 0.91025,1.986466 -1.27435,1.88713 6.55384,5.86006 -4.18718,4.86682 -2.45769,-0.99323 -4.55127,4.07224 -3.91409,0.29797 -3.00383,-1.58916 -4.55128,4.7675 -2.09359,1.09255 -4.09613,-0.0994 -0.7282,3.47629 -3.55,2.18511 -1.54743,0.99324 -0.27307,1.58916 -0.36411,1.68849 4.18717,0.29796 0.0911,-2.48306 2.45769,-2.1851 3.73204,-0.39729 6.55383,-4.07226 8.37433,7.15126 -1.91153,1.48984 22.07464,10.81532 7.23555,-2.47218 1.36537,1.88713 -1.36537,-1.88713 0.0911,-2.08579 3.54998,-3.57562 -1.27436,-1.48985 2.45769,-10.62756 -0.72819,-3.17833 4.36921,-3.17833 -0.54615,-5.06548 2.1846,-3.079 2.00256,-1.48984 2.00256,-0.49662 1.54743,1.2912 2.82179,-1.98646 -0.0911,-2.48307 2.73076,-2.582396 2.8218,-5.06548 2.63972,-2.88037 -1.09229,-5.46274 1.45639,-3.27766 v -3.27766 l -1.27435,-2.1851 -0.81923,-1.98647 0.18206,-2.78103 -1.27436,2.88036 1.27436,3.4763 0.3641,3.37697 -0.91026,1.09255 -1.00127,-0.4966 -0.27309,-4.27089 -1.36538,2.68172 0.45512,1.39052 0.36412,3.27765 1.45641,2.78106 -1.54744,2.48307 -1.63846,1.09255 -2.36665,4.86682 -3.82307,1.19188 -2.18461,0.59594 -2.36667,-0.49663 -0.81922,1.39053 -1.00129,0.69525 1.45642,-5.66139 2.18461,-4.07225 -2.82179,-2.28443 1.18332,-4.56885 -0.63718,-3.77427 -1.27434,-2.38376 -1.91154,-4.7675 3.09486,-10.13093 5.82562,-0.19866 -3.82306,-8.83974 2.54871,-2.28442 1.00129,-2.38376 5.27946,0.7946 v 5.76072 l -1.63846,0.0994 0.18206,-3.37697 -1.0923,2.38375 -0.0911,2.1851 3.27691,0.49661 0.54615,-1.29119 v -7.44922 l -6.0987,-2.97969 1.09231,-1.48985 -0.18206,-1.6885 -5.00639,-0.99321 -0.0911,3.37697 0.91026,-1.48984 2.27564,-0.0994 -0.27308,1.98646 -5.09742,7.74719 2.36666,6.9526 -4.73332,-0.49661 -2.91281,5.76073 -2.36667,-4.66817 0.54616,-6.35668 -0.27307,-7.44922 -0.91027,-6.65463 v -2.18511 l 1.91154,-1.48984 -1.45642,-10.23027 1.82053,-1.09256 0.7282,-2.08577 1.18333,-1.88714 1.00128,0.3973 c 0,0 -1.3654,1.09255 -0.91025,1.19188 0.45512,0.0994 2.5487,0.0994 2.5487,0.0994 l -0.63718,-1.98645 -2.00255,-1.48985 -3.18589,3.4763 -3.73205,-2.08579 -0.81922,2.68173 1.4564,-0.99323 1.63846,1.39052 -0.3641,2.88037 0.3641,7.54854 -1.45641,0.79458 -1.27435,-4.86682 0.91024,5.95937 0.72822,6.456 -2.82179,-8.54177 1.0923,8.14448 -0.18205,4.56885 -0.3641,1.58916 -1.91153,-6.65463 0.18205,6.15802 -1.0923,-3.27765 -0.63718,5.16479 -10.19485,2.48307 0.45513,3.97293 -1.00128,-1.48985 h -1.00128 l -4.46025,0.19864 -2.00256,-1.09255 -1.45641,-2.68172 -0.91024,-6.15802 v -3.07901 l 1.72948,-0.89392 2.00256,1.78782 -1.82051,-3.77426 -3.18588,1.68849 -0.63719,5.26411 -4.46024,-0.89392 -2.36666,-8.74041 -0.18205,-7.05193 -1.18334,5.76073 -6.37177,-3.9729 1.63846,-3.8736 2.36665,0.19865 -0.54615,1.88712 -2.00256,0.3973 2.27565,0.69526 1.8205,-2.97968 -4.18717,-2.48308 -2.36666,5.06546 -4.73332,-0.79459 -3.91409,-0.39729 -0.36411,1.19188 -0.54615,-0.19865 -1.0923,-11.22349 -5.82563,-2.08578 h -2.91281 l -3.09487,-1.09255 -3.00383,-3.774264 3.73203,-4.07224 -5.82562,3.476298 2.27564,4.072236 1.72948,1.09256 -7.37306,2.58239 -0.7282,5.06547 -2.27564,3.07901 2.09358,2.18511 2.36667,1.98647 z"
     style="fill:#000000;fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
  <g
     transform="matrix(0.69382629,0,0,0.68367215,32.346557,-11.194348)"
     id="owl">
     
    <path
       style="opacity:1;fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.21202013px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 174.83687,22.043078 c 7.06544,1.398439 14.03726,1.587945 20.92099,0.639951 -1.04492,2.042275 -2.08983,2.137771 -3.13474,3.039763 0,0 0.84734,0.44878 1.43107,1.51988 0.58373,1.071101 0.55416,3.817379 1.36294,5.119601 0.80877,1.302221 1.39187,-0.587237 2.99844,2.479805 1.60657,3.067041 0.57108,9.551233 -0.47703,13.198967 -1.0481,3.647734 -2.01387,6.387089 -4.08878,9.279276 -2.07492,2.892185 -4.24449,6.218604 -4.63397,8.079367 -0.38948,1.860764 -10.64128,2.510811 -11.10789,-0.639951 -0.4666,-3.15076 -6.06342,-15.481318 -6.20133,-15.438791 -0.13791,0.04252 -2.35233,-7.831728 -1.70366,-10.719162 0.64866,-2.887434 0.32141,-2.962837 1.02219,-4.319663 0.70079,-1.356826 2.70396,-2.478862 3.13474,-3.439731 0.43079,-0.960869 1.32246,-4.633813 2.99845,-5.59956 -0.74644,-0.735432 -1.42772,-1.241432 -2.52142,-3.199752 z"
       id="path4537" />
    <path
       style="opacity:1;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.1896209px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 184.93117,35.06941 -0.56388,1.183117 0.56388,1.322308 0.56386,-1.183117 z"
       id="path4547" />
    <path
       style="opacity:1;fill:#808000;fill-rule:evenodd;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 177.35829,57.080338 c 0.37069,0.879932 0.52274,1.759863 0.61332,2.639795 0.15772,-0.906596 0.38231,-1.813192 0.27259,-2.719787 -0.33867,-0.176956 -0.6412,-0.184226 -0.88591,0.08 z"
       id="path4549" />
    <path
       style="opacity:1;fill:#808000;fill-rule:evenodd;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 178.86754,56.551498 c 0.54639,1.396987 0.86477,2.820739 0.47625,4.327469 0.45161,-0.636945 0.9197,-1.260508 0.77612,-2.381144 -0.0779,-0.947708 -0.42331,-1.659917 -1.25237,-1.946325 z"
       id="path4551" />
    <path
       style="opacity:1;fill:#808000;fill-rule:evenodd;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 181.38993,56.737847 c -0.34557,0.25039 -0.23933,0.567073 -0.22931,0.869636 0.45679,1.016431 0.2137,2.180538 0.21166,3.10584 0.32491,-1.098378 1.27252,-2.104425 0.0177,-3.975476 z"
       id="path4553" />
    <path
       id="path4555"
       d="m 190.59459,56.96332 c -0.3707,0.879932 -0.52275,1.759863 -0.61333,2.639795 -0.15771,-0.906596 -0.3823,-1.813192 -0.27258,-2.719787 0.33867,-0.176956 0.64119,-0.184226 0.88591,0.08 z"
       style="opacity:1;fill:#808000;fill-rule:evenodd;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <path
       id="path4557"
       d="m 189.08534,56.43448 c -0.54639,1.396987 -0.86477,2.820739 -0.47626,4.327469 -0.45161,-0.636945 -0.91969,-1.260508 -0.77612,-2.381144 0.0779,-0.947708 0.42332,-1.659917 1.25238,-1.946325 z"
       style="opacity:1;fill:#808000;fill-rule:evenodd;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <path
       id="path4559"
       d="m 186.56295,56.620829 c 0.34556,0.25039 0.23932,0.567073 0.22931,0.869636 -0.45679,1.016431 -0.2137,2.180538 -0.21167,3.10584 -0.3249,-1.098378 -1.27251,-2.104425 -0.0177,-3.975476 z"
       style="opacity:1;fill:#808000;fill-rule:evenodd;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <path
       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.23663095px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 177.23023,28.473795 7.48618,1.753502 7.70854,-1.683362 -0.81534,-1.543081 -12.97109,-0.490982 z"
       id="eyebrows" />
    
    <circle
       style="opacity:1;fill:#ffff00;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.62031603;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       id="path4539"
       cx="180"
       cy="32"
       r="4"
       />
    
    
    <circle
       cy="32.2"
       cx="189.2"
       id="circle4543"
       style="opacity:1;fill:#ffff00;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.62031603;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       r="4"
        />
    <g id="owleyes">
 <circle
       style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       id="path4541"
       cx="180.2"
       cy="32.0"
       r="1.6"
        />  
<circle
       cy="32.2"
       cx="189.2"
       id="circle4545"
       style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       r="1.6"
       />
    
    
    <path
     id="path5516"
     d="m 188,31 0.93,0.80 -0.18,-1.24 z"
     style="fill:#ffff00;fill-rule:evenodd;stroke:#ffff00;stroke-width:0.26px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
  <path
     style="fill:#ffff00;fill-rule:evenodd;stroke:#ffff00;stroke-width:0.26px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     d="m 179,31 0.93,0.80 -0.18,-1.24 z"
     id="path5518" />
    </g>
  </g>
  
  
  <path
     id="tree_2" class="lines"
     d="m 49.320911,115.12703 -1.781195,-3.04533 -1.187452,0.53742 -2.22651,-2.14965 -0.148415,-3.76187 -6.234194,0.5374 -3.265519,-5.73238 -3.71082,2.14964 -3.562383,-1.97049 -2.374932,-3.582756 -1.335888,2.328796 -4.007705,-3.941016 5.046735,-5.73238 -1.632773,-3.04533 -0.148436,-2.32877 1.039037,-1.25396 3.859255,0.35827 -3.265518,-2.14964 -3.413962,1.9705 -0.148422,3.76188 -3.117104,3.58274 -5.64045,-9.31512 2.671803,-2.68706 -1.632766,-1.79137 v -1.61223 l -0.593737,0.53741 -1.781195,-2.32877 3.413962,-11.28563 1.48433,0.17913 1.484316,5.37411 1.632774,-0.89569 -0.445301,-2.14965 1.632753,-0.53739 3.117104,2.14964 3.41394,3.76187 3.117105,-2.32878 3.413947,0.35827 0.148436,-5.3741 3.413962,-0.89569 0.742158,3.58274 0.742173,2.50792 -1.484331,0.17913 -1.484331,-1.61223 1.929632,3.76187 2.671782,-3.58273 -1.335895,-3.04533 -0.296857,-2.68706 1.484316,-0.71654 4.007698,2.32878 4.15612,-4.29929 -1.335894,-4.12014 1.781188,-2.14964 2.374932,-0.35828 v -1.4331 l -3.265526,-0.17913 -2.226489,2.14964 -2.226503,-0.53741 2.226503,4.65756 0.593722,2.14964 -1.632752,1.4331 -5.046714,-2.68706 -3.710827,2.68706 -3.562397,1.07481 -0.890595,4.47843 -1.929631,1.07482 -1.929631,-2.50792 h -1.781188 l -5.492015,-5.55324 2.226489,-4.12015 4.304556,0.17914 2.820225,3.22447 0.890594,-2.14965 3.413962,-1.25396 1.781195,1.25396 -0.148443,1.61223 -1.781188,0.35829 1.632774,0.35826 1.039016,-1.07483 0.148436,-2.32877 -1.929632,-1.4331 0.445301,-3.4036 -2.67179,-1.61223 -2.374924,2.32878 0.148436,1.25396 1.781195,-1.25396 h 1.187452 l 0.296879,2.14964 -4.156121,2.32879 -1.632773,-1.97051 1.781195,-4.47842 0.890594,-3.94102 5.640451,-2.68706 1.484331,-1.97049 0.593736,-8.41944 3.562384,-2.32877 5.64045,3.40358 -0.148436,4.65757 -4.15612,2.86619 -1.187451,-1.79136 1.929624,-3.04534 -2.226503,1.97051 -2.078053,-0.35828 3.265526,5.91153 6.531045,-3.40361 -0.593737,-8.41944 -4.304556,-3.22445 1.78121,-1.07483 7.12476,-0.5374 -0.296858,-11.64391 13.358954,-1.07481 3.265526,6.80719 -0.593736,1.79138 -2.374911,-1.07483 -1.335916,0.17915 1.929631,3.04532 -0.742158,1.07482 5.046714,-4.29929 -3.710819,-7.70288 -6.234187,-0.53741 -0.445294,-2.8662 1.335909,-2.14964 2.226489,1.433089 -0.445301,-2.149639 -3.562397,-1.074826 -0.296858,3.403609 -0.296858,3.224477 H 47.39128 l 2.968661,1.61223 -0.296858,9.31511 -8.015375,0.35827 -1.929631,-3.941 -3.117083,0.53739 -0.445301,2.68706 2.671789,1.61223 -1.039037,-2.50791 1.187473,-0.89568 1.632753,4.12015 -6.085752,5.19497 -2.078045,7.52374 -3.71082,-0.17913 -0.445301,-6.98635 -0.890594,1.61223 -2.671803,0.35829 -1.632753,2.50792 2.374925,-1.07483 1.039016,0.71655 v 6.62806 l -1.335895,3.58274 -2.078046,1.07483 -4.898299,-0.71655 -0.148422,-1.97051 -8.312253,-1.07481 -1.3358953,-1.79138 1.0390374,-7.70289 -2.0780534,7.16548 -0.890615,-0.89569 1.484338,-10.92735 2.0780673,3.58275 3.41394,-10.74822 -3.41394,7.88203 -1.6327743,-3.04533 -1.484309,1.9705 -0.74218,6.09066 -1.03903,-6.44893 -1.484316,0.53741 0.296858,-9.13599 -0.445294,-0.89567 1.929631,-1.25396 2.820226,0.35826 -0.445301,-1.79136 -3.710819,0.35827 -0.74218,1.61222 -1.781188,-1.97049 -1.78119598,-1.61223 -3.41396102,3.22446 0.148443,3.04532 1.335894,1.07483 0.445294,-2.50793 0.593736,-1.79135 1.929632,-0.17914 1.781188,3.40359 -0.593737,10.74821 2.078075,0.53742 -0.296879,9.49425 -1.632753,2.14964 1.039016,5.01584 -1.781195,7.34461 -3.413941,-4.47842 -4.304556,0.17913 2.968662,-5.73236 -4.304556,-5.7324 -0.445301,-3.22446 1.484338,-1.43309 1.335887,-1.61223 -3.710826,1.43309 -1.0390303,1.9705 0.742165,1.79138 -4.4529854,0.89568 -0.593729,4.12015 0.593729,3.76187 2.67179,1.4331 0.7421654,-1.79137 -1.9296314,-0.71654 -0.148429,-3.04534 2.0780604,-1.61223 1.9296243,0.71655 2.671804,4.12015 -3.5623983,6.26979 v 1.9705 l 4.1561133,0.35828 2.22651,2.32878 v 3.94102 l 1.484309,2.86619 -4.452977,7.88202 1.484338,3.04533 -4.452992,4.29928 3.710812,3.4036 -0.148422,3.04533 -4.4529923,-0.35828 -6.0857444,-8.59857 1.03903,-3.58274 0.148429,-4.47842 -1.03903,1.43309 -0.742158,3.22448 -0.890601,-3.94102 2.07806,-2.86619 -1.187459,-6.09066 -1.484331,0.71656 0.890594,4.83668 -1.335894,2.32879 -0.148436,6.44893 -2.374925,3.94101 3.11709,-1.79137 3.11709,6.8072 3.562391,4.47842 -0.148429,3.04534 3.5623917,-0.35828 3.265526,0.89568 1.48433,5.19496 -0.296879,4.120146 2.820226,1.97052 0.89059402,8.95683 2.22648898,3.76189 -1.92961,7.16547 20.1868553,0.17914 10.09345,-5.3741 -1.187473,-7.70289 5.343593,-3.40361 3.859241,3.94102 2.820225,-0.17915 3.117105,3.22448 z"
     style="fill:#000000;fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
 
   <path
     style="fill:none;fill-rule:evenodd;stroke:#000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
     d="m 1.2286737,124.08387 20.1868553,0.17914 10.093451,-5.3741 -1.187474,-7.70289"
     id="path9329"
     inkscape:connector-curvature="0" />
  <path
     style="fill:none;fill-rule:evenodd;stroke:#000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
     d="m 208.56468,132.77372 -3.54998,3.57562 -0.0911,2.08579 1.36537,1.88713 -1.36537,-1.88713 -7.23555,2.47218 -22.07464,-10.81532"
     id="path9331"
     inkscape:connector-curvature="0" />
  
  
  
  <g 
     style="fill:#a90" 
     transform="matrix(3.78,0,0,4.13,-436.62,-134.81)"
     id="treeface">
    <path
       style="fill-rule:evenodd;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 167.2,50.0 0.4,-0.4 0.4,0.9 z"
       id="path4601" />
    <path
       style="fill-rule:evenodd;stroke:none;stroke-width:0.26px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 168.5,50.5 0.8,-0.9 1.0,0.25 z"
       id="path4603" />
    <path
       style="fill-rule:evenodd;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 167.3,51.5 0.2,2.2 0.2,-0.7 0.4,0.6 0.2,-0.8 0.4,0.8 0.2,-0.4 0.25,0.29 0.04,-0.95 0.23,0.14 0.12,0.6 1.3,-2.07 -0.91,0.63 0.08,-0.55 -0.72,0.42 -0.10,-0.23 -0.42,0.72 -0.10,-0.65 -0.44,0.44 -0.25,-0.27 -0.04,0.66 z"
       id="path4605" />
  </g>
</svg>
      
<svg viewBox="-30 0 270 141" id="lid">
 <g style="fill:#000" 
     transform="matrix(3.78,0,0,4.13,-436.62,-134.81)">
    <path
       style="fill-rule:evenodd;stroke:#000;stroke-width:0.5px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 167.2,50.0 0.4,-0.4 0.4,0.9 z"
       id="path4601" />
    <path
       style="fill-rule:evenodd;stroke:#000;stroke-width:0.5px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 168.5,50.5 0.8,-0.9 1.0,0.25 z"
       id="path4603" />
      </svg>
      <svg viewBox="-30 0 270 141"
   id="pu">
  <defs
     id="defs2">
    <linearGradient
       id="linearGradient4638">
      <stop
         style="stop-color:#000000;stop-opacity:1"
         offset="0"
         id="stop4634" />
      <stop
         style="stop-color:#1a1a1a;stop-opacity:1"
         offset="1"
         id="stop4636" />
    </linearGradient>
    <linearGradient
       id="linearGradient4649">
      <stop
         style="stop-color:#000000;stop-opacity:1"
         offset="0"
         id="stop4645" />
      <stop
         style="stop-color:#1a1a1a;stop-opacity:1"
         offset="1"
         id="stop4647" />
    </linearGradient>
     <linearGradient
       xlink:href="#linearGradient4649"
       id="linearGradient4651"
       x1="253.9055"
       y1="224.59865" 
       x2="269.23392"
       y2="164.76483"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0.64922303,0,0,0.50131447,-87.723169,15.133564)" />
    <linearGradient
       xlink:href="#linearGradient4638"
       id="linearGradient4640"
       x1="87.21772"
       y1="213.96494"
       x2="87.118889"
       y2="201.47855"
       gradientUnits="userSpaceOnUse" />
  </defs>
  
<g
     transform="translate(16.254087,-84.540106)"
     id="pumpkin">
    <ellipse
       style="opacity:1;fill:url(#linearGradient4640);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.15952358;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       id="path5431"
       cx="87.41748"
       cy="209.25739"
       rx="12.695238"
       ry="10.614216" />
    <g id="pumkin_light" style="fill:#ffff00;">
      <path
         id="path5433"
         d="m 85.471194,205.82389 c -1.639259,-0.29928 -3.139924,-0.67609 -4.607674,-1.16541 -1.047234,0.18987 -0.971548,0.57278 -1.044408,0.99612 0.196939,3.65187 4.8634,1.92419 5.652082,0.16929 z"
         style="opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.15542467px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
      <path
         id="path5435"
         d="m 89.710249,205.89991 c 1.850369,-0.21231 3.561133,-0.68106 5.28347,-1.12856 0.490245,0.10081 0.571061,0.48476 0.637903,0.80519 -0.44113,2.94563 -3.475744,3.4208 -5.921373,0.32337 z"
         style="opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.15542467px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
      <path
         id="path5437"
         d="m 87.201168,206.74284 c -0.166421,0.6221 -0.470956,0.97928 -1.208426,1.52044 0.524202,0.23507 0.998744,0.68319 1.522946,0.22807 0.103403,-0.6185 -0.113383,-1.09005 -0.31452,-1.74851 z"
         style="opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.15542467px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
      <path
         id="path5439"
         d="m 88.128172,207.00133 c 0.342109,0.5879 0.747204,0.5991 1.009783,0.89706 0.262579,0.29797 0.110612,0.83809 -0.612491,0.77541 -0.966913,-0.4782 -0.679332,-1.0756 -0.397292,-1.67247 z"
         style="opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.15542467px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
      <path
         id="path5447"
         d="m 78.278703,208.03522 c 0.617688,0.50261 1.258399,0.94179 1.920232,1.32278 l -0.331076,0.77543 c 0.311088,0.41143 0.712297,0.53313 1.109104,0.66899 l 0.761467,-1.0339 0.629047,0.59298 -0.08277,0.86665 c 0.33433,0.27587 0.719639,0.38789 1.142209,0.38011 l 0.562824,-1.04911 1.307747,0.0456 0.08277,1.14034 c 0.385665,0.22515 0.817239,0.28163 1.291186,0.18244 l 0.115877,-1.14033 1.936787,-0.0912 0.182094,1.09472 c 0.411089,0.13558 0.78623,0.18862 1.109098,0.12164 l 0.612491,-1.49003 2.036109,-0.22807 0.215199,0.77541 c 0.477305,-0.0532 0.884913,-0.17042 1.142203,-0.42571 l -0.0331,-0.89707 c 1.296052,-0.67849 2.300815,-1.3952 3.294195,-2.11341 -0.46387,2.76156 -1.427185,5.18277 -4.601936,6.09697 l -0.165538,-0.80583 c -0.193127,-0.2406 -0.386253,-0.27572 -0.57938,-0.3193 l -1.258086,0.13684 0.31452,1.24676 -1.655373,0.10643 -1.109098,-1.01869 c -0.352939,-0.07 -0.700393,-0.11481 -1.009783,0.0152 v 0.97308 l -1.721589,-0.10643 -0.08276,-0.98829 c -0.348122,-0.21211 -0.760983,-0.3251 -1.241531,-0.33449 l -0.480058,0.97308 -1.45673,-0.0456 0.148982,-0.6842 c -0.424482,-0.34265 -0.832145,-0.81663 -1.340852,-0.50174 l -0.215199,0.59297 c -1.013423,-1.46134 -1.844625,-3.09006 -2.549278,-4.835 z"
         style="opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.15542467px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    </g>
    <path
       style="opacity:1;fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.15542467px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 82.235044,205.11598 0.662151,0.15204 c 0.165563,0.21624 0.230253,0.47326 0.132433,0.72982 -0.226734,0.12336 -0.354459,0.32225 -0.744923,0.18245 -0.188003,-0.10852 -0.381117,-0.21116 -0.397286,-0.51695 0.03488,-0.25686 0.181952,-0.41065 0.347625,-0.54736 z"
       id="path5443" />
    <path
       style="opacity:1;fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.15542467px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 92.233502,205.48088 1.175314,-0.28888 c 0.04628,0.21825 0.102239,0.43655 -0.115877,0.65379 -0.188811,0.0991 -0.326521,0.23178 -0.811134,0.13684 -0.302445,-0.16726 -0.293747,-0.3345 -0.248303,-0.50175 z"
       id="path5445" />
    <path
       style="fill:#1a1a1a;fill-rule:evenodd;stroke:#1a1a1a;stroke-width:2.9371593;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 87.118886,201.47855 c 0,-0.74477 0,-3.27701 1.297395,-4.76657"
       id="path5449" />
  </g>
        <text x="15" y="80" >Happy Halloween</text>
    </svg>
</div>
</div>

  <div id="co">a pen by @uchardon</div>
            
          
!

CSS

            
              

*{
--bright-std:0.8;
--bright-thunder:8;
--blur-bkg:5;
font-family: 'Creepster', cursive;
}
text {
  fill: #5f5;
  font-size: 30px;
  opacity:0;
}
.parallax-container, h1 { 
  position: absolute; 
  top: 0vh;
  left: 0vw;
  margin: 0;
  perspective: 1000px;
  transform-style: preserve-3d;
  overflow: hidden;
  width:100vw;
  height:100vh;
}

.parallax-base {
  transform-style: preserve-3d;
  width:100vw;
  height:100vh;
  margin: 0;
}



#tree, #tree_2, .lines {
  stroke: #000;
  stroke-width: 1px;
}
body {
  background:#000;
}
svg {
position:absolute;
width:100vw;
height:100vh;
}

.parallax-base div {
  opacity: .7;
  background: rgba(0, 0, 0, 0.1);
}


svg#background {
  transform: translateZ(0px) scaleX(1.2);
  filter:blur( calc( var(--blur-bkg) * 1px ) )  brightness(var(--bright-std)) ;
}

div#bat {
  transform: translateZ(160px);
  transform: translateZ(500px) translateY(300px) rotateZ(0deg) scale(0.001);
  animation: bat 13s infinite ease-out;
  animation-delay: -8s;
}
@keyframes bat {
  70% {transform: translateZ(160px) translateY(300px) rotateZ(0deg) scale(0.001);}
  100% {transform: translateZ(500px) translateY(-150px) rotateZ(-10deg) scale(0.3);}
}

svg#wing_l {
  transform-origin:45% 60%;
  transform:  rotate(0deg);
  animation: wingl .3s infinite alternate ease-in-out;
  fill:#666;
}
 @keyframes wingl {
  from { transform:  rotate(40deg); }
  to  { transform:  rotate(-40deg); }
}
svg#wing_r {
  fill:#666;
transform-origin:52% 65%;
   transform:  rotate(0deg);
  animation: wingr .3s infinite alternate ease-in-out;
}
 @keyframes wingr {
  from { transform:  rotate(-40deg); }
  to  { transform:  rotate(40deg); }
}

svg#svghand {
  transform: translateZ(80px) scale(1);
  animation: hand 13s infinite; 
  transform-origin: 40% 90%;
}
@keyframes hand {
  10% {transform: translateZ(80px) translateY(-20px) scale(.85) rotate(0deg) ;}
  30% {transform: translateZ(80px) translateY(-5px) scale(.85) rotate(5deg) ;}
  60% {transform: translateZ(80px) translateY(10px) scale(.85) rotate(-5deg) ;}
  100% {transform: translateZ(80px) translateY(0px) scale(.85) rotate(0deg) ;}
}
svg#grave {
  transform-origin: 30% 90%;
  transform: translateZ(120px) translateY(-40px) rotate(0deg) scale(.85);
  animation: grave 7s infinite;
  filter:blur(2px);
}


svg#ghost {
  -webkit-filter: url("#disfilter");
  filter: url("#disfilter") blur(3px);
  transform-origin: 60% 70%;
  transform: translateZ(130px) translateY(150px) translateX(700px) scale(.55) rotate(0deg);
  animation: ghost 25s infinite linear; 
  animation-delay: -19s;
}
@keyframes ghost {
  0% { opacity: 0; }
  79.5% { opacity: 0; }
  80% {transform: translateZ(130px) translateY(150px) translateX(700px) scale(.55);
  opacity: 1;}
  85% {transform: translateZ(150px) translateY(110px) translateX(200px) scale(.65) rotate(5deg);}
  90% {transform: translateZ(130px) translateY(110px) translateX(-100px) scale(.65) rotate(5deg);}
  99.5% {transform: translateZ(130px) translateY(170px) translateX(-500px) scale(.65) rotate(-5deg);
  opacity: 1;}
    100% {transform: translateZ(130px) translateY(170px) translateX(-700px) scale(.65);
   opacity: 0; }
}


svg#graves {
  transform: translateZ(140px) scale(.85);
}
svg#foreground { 
  transform: translateZ(220px) scale(.85);
}
svg#pu { 
  transform: translateZ(220px) translateY(30px) scale(.85);
}
svg#lid { 
  transform: translateZ(220px) scale(.85);
  animation: lid 5s infinite;
}
@keyframes lid {
  0% {transform: translateY(-15px)  translateZ(220px) scale(.85);} 
  80% {transform: translateY(-15px) translateZ(220px) scale(.85);} 
  85% {transform: translateY(0px) translateZ(220px) scale(.85);} 
  90% {transform: translateY(-15px) translateZ(220px) scale(.85);} 
  100% {transform: translateY(-15px) translateZ(220px) scale(.85);}
}
svg#flash_1, svg#flash_2 { 
  opacity:0;
  transform: translateZ(20px) scaleX(.8)      scaleY(1.2);
}
.stones {
  fill: #000;
}

#pumkin_light {
  animation: colorchange 0.2s infinite alternate;
}
@keyframes colorchange {
  to { fill:#ff3300; }
}


@keyframes grave {
  10% {transform: translateZ(120px) translateY(-40px) rotate(0deg) scale(.85);}
  11% {transform: translateZ(120px) translateY(-40px) rotate(-.5deg) scale(.85);}
  12% {transform: translateZ(120px) translateY(-40px) rotate(.5deg) scale(.85);}
  13% {transform: translateZ(120px) translateY(-40px) rotate(-.5deg) scale(.85);}
  14% {transform: translateZ(120px) translateY(-40px) rotate(.5deg) scale(.85);}
  15% {transform: translateZ(120px) translateY(-40px) rotate(0deg) scale(.85);}
  100% {transform: translateZ(120px) translateY(-40px) rotate(0deg) scale(.85);}
}


#owleyes {
  animation: eyemove 2s infinite alternate;
}
@keyframes eyemove {
  0% {transform: translateX(-1.2px);} 
  80% {transform: translateX(-1.2px);} 
  100% {transform: translateX(1.3px);}
}

#co {
  color: #fff;
  position: absolute;
  right:10px;
  bottom:10px;
  transform: translateZ(240px);
}
#gravestone_1 {
  filter: blur(2px);
}
            
          
!

JS

            
              var container = document.querySelector('.parallax-container');
var base = document.querySelector('.parallax-base');


cssParallax(container, base, 20);

function cssParallax(cont, el, radiusVal){
  cont.addEventListener('mousemove', function(event) {
        
     var x = window.innerWidth;
      var y = window.innerHeight;
    
      cx = Math.ceil(x / 2.0);
      cy = Math.ceil(y / 2.0);
      dx = event.pageX - cx;
      dy = event.pageY - cy;
      
      tiltx = (dy / cy)*0.1;
      tilty = - (dx / cx)*0.3; 

      radius = Math.sqrt(Math.pow(tiltx,2) + Math.pow(tilty,2));
      degree = (radius * radiusVal);

      el.style.transform = 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)';
  });
}





    function onDeviceMotion(event) {
      rotateForce = 10; // max popup rotation in deg
     

      var docX = window.innerWidth;
      var docY = window.innerHeight;

      var accelX = event.beta;  
      var accelY = event.gamma; 
 
      base.style.transform='rotateX(' + accelX + 'deg' + ') rotateY(' + accelY + 'deg' + ')';
    };
    window.addEventListener('deviceorientation', onDeviceMotion, false);
 



var basicTimeline = anime.timeline({ 
  loop: true
});
var dauer = 400;
basicTimeline
  .add({
   targets: '#flash_1',
  opacity:[0, 1, 0, 1, 0],
  translateX: function() { return anime.random(-30, 150); },
  duration: dauer,
  offset: 5700
  })
.add({
   targets: '.lines',
  stroke:[
    {value: '#000'}, 
    {value: '#f00'}, 
    {value: '#000'}, 
    {value: '#f00'}, 
    {value: '#000'}, 
    
  ],
  duration: dauer,
  offset: '-=400'
  })
.add({
   targets: '.stones',
  fill:[
    {value: '#000'}, 
    {value: '#555'}, 
    {value: '#000'}, 
    {value: '#555'}, 
    {value: '#000'}, 
    
  ],
  duration:dauer,
  offset: '-=400'
  })
  .add({
     targets: '#flash_2',
  opacity:[0, 1, 0, 1, 0],
  translateX: function() { return anime.random(-30, 150); },
  duration:dauer,
  offset: 7700
  })
.add({
   targets: '.lines',
  stroke:[
    {value: '#000'}, 
    {value: '#f00'}, 
    {value: '#000'}, 
    {value: '#f00'}, 
    {value: '#000'}, 
    
  ],
  duration:dauer,
  offset: '-=400'
  })
.add({
   targets: '.stones',
  fill:[
    {value: '#000'}, 
    {value: '#555'}, 
    {value: '#000'}, 
    {value: '#555'}, 
    {value: '#000'}, 
    
  ],
  duration:dauer,
  offset: '-=400'
  })
.add({
     targets: 'text',
  opacity:[0, 1, 0, 1, 0],
    duration:dauer+1000,
  offset:  '-=400'
  })
;


            
          
!
999px

Console