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.

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <div class="ray-contain" id="ray-contain">
<svg data-name="raygun" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1141.4 484.3">
  <defs>
    <linearGradient id="a" x1="487.97" y1="245.29" x2="498.97" y2="245.29" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#5b4974"/>
      <stop offset="0.48" stop-color="#787893"/>
      <stop offset="1" stop-color="#5b4974"/>
    </linearGradient>
    <linearGradient id="b" x1="501.97" y1="245.29" x2="512.97" y2="245.29" xlink:href="#a"/>
    <linearGradient id="c" x1="515.97" y1="245.29" x2="526.97" y2="245.29" xlink:href="#a"/>
    <linearGradient id="d" x1="529.97" y1="245.29" x2="540.97" y2="245.29" xlink:href="#a"/>
    <linearGradient id="e" x1="543.97" y1="244.29" x2="554.97" y2="244.29" xlink:href="#a"/>
    <linearGradient id="f" x1="557.97" y1="244.29" x2="568.97" y2="244.29" xlink:href="#a"/>
  </defs>
  <title>
    Raygun
  </title>
  <path fill="#c37344" d="M0 0H1141.4V484.29H0z"/>
  <rect x="266" y="157.5" width="9.2" height="18.95" rx="4.6" ry="4.6" fill="#60574d" stroke="#413331" stroke-miterlimit="10" stroke-width="2"/>
  <rect x="266" y="188" width="9.2" height="25.33" rx="4.6" ry="4.6" fill="#60574d" stroke="#413331" stroke-miterlimit="10" stroke-width="2"/>
  <path d="M315,155.2c-8.2-.6-7.7-12.5-10.5-12.2l-41.1,12.2,1,14.8c17.7,5.3-10.3,25.7-3.3,26.3s3.3,21.7-8.3,40.7-53.3,37.7-54.3,37-10,16-10,16L235,325l15.7-21a49.6,49.6,0,0,1,10.3-9.3c16,7.7,13.3,19.7,13.3,19.7l17.4,7.7c.1,0,0,0,0-.1.7-2,1.8-3.3-.4-4.5C278,310.7,288,295,288,295l-10.1-8.3c23.9-7.4,49.8-2.5,49.8-2.5V157.2S317.3,155.3,315,155.2Z" transform="translate(9 5.3)" fill="#413331"/>
  <path d="M327.7,338.3H286a4,4,0,0,1-2.3-.7l-11.7-8a4,4,0,0,1,4.5-6.6l10.7,7.3h39.3c9.5-5.4,14.9-11.7,16-18.6,1.9-11.7-8.8-23.1-12.3-26.9l-1.2-1.3a4,4,0,0,1,6.2-5.1l.8.9c4.2,4.5,16.8,18,14.4,33.6-1.5,9.7-8.6,18.1-20.9,24.9A4,4,0,0,1,327.7,338.3Z" transform="translate(9 5.3)" fill="#60574d" stroke="#413331" stroke-miterlimit="10" stroke-width="2"/>
  <path fill="none" stroke="#413331" stroke-miterlimit="10" stroke-width="3" d="M591.6 191.6L600 191.6"/>
  <path d="M558.4,192.9s-1.2,16.1,6.3,17.1" transform="translate(9 5.3)" fill="none" stroke="#413331" stroke-miterlimit="10" stroke-width="3"/>
  <path fill="#413331" d="M464.5 189.5H478.3V192.24H464.5z"/>
  <path fill="#5b4974" stroke="#413331" stroke-miterlimit="10" stroke-width="2" d="M456.1 182.8H465.5V197.92000000000002H456.1z"/>
  <path fill="#5b4974" stroke="#413331" stroke-miterlimit="10" stroke-width="2" d="M475.3 185.5H483.1V196.63H475.3z"/>
  <path fill="#413331" d="M464.5 185.5H470.5V195.32H464.5z"/>
  <path d="M463.3,217.3v-4c6.8,0,12.1-2.1,15.9-6.1,7.4-8,6.5-21.2,6.5-21.3h0c0-.3.5-29.4.1-38.9-.2-4.4.7-7.6,2.7-9.5a6.3,6.3,0,0,1,4.4-1.9l6.8-.3c3.4-.2,5.5-.8,6.7-2.1s1.4-2.7,1.2-5.1a4.5,4.5,0,0,0-1.3-3.4,3.1,3.1,0,0,0-2.1-.6h-29v-4h28.6a7.1,7.1,0,0,1,5.1,1.5,8.3,8.3,0,0,1,2.7,6.3c.2,3.5-.6,6.1-2.3,8s-4.9,3.2-9.4,3.4l-6.9.3h-.1a2.5,2.5,0,0,0-1.6.8c-.8.8-1.6,2.6-1.4,6.4.5,9.5,0,37-.1,39.1s.7,15.3-7.6,24.3C477.6,214.8,471.3,217.3,463.3,217.3Z" transform="translate(9 5.3)" fill="#deb55c" stroke="#413331" stroke-miterlimit="10" stroke-width="1.5"/>
  <path d="M314,96.3c0-.1,7.1.1,0,15.2s-7.3-5.3-7.3-5.3Z" transform="translate(9 5.3)" fill="#413331"/>
  <path d="M311.7,128.6l20.6,7.8s6.3,1.2,5.8,7.8a82.2,82.2,0,0,0,0,12.2l-4.3.8v-13s-2.7-3.8-5.5-4.5-12-3.7-12-3.7-6.8-2.3-10.7,5-4.4,8.7-4.4,8.7l1-22Z" transform="translate(9 5.3)" fill="#413331"/>
  <path d="M279,82,138,43s-26-10-34,19.5c0,0-8,26.5,22,33.5l140,36Z" transform="translate(9 5.3)" fill="#b8e0da" stroke="#413331" stroke-miterlimit="10" stroke-width="2"/>
  <path fill="#483860" d="M309 120.3H347V128.69H309z"/>
  <rect x="309" y="111.3" width="15" height="26" rx="7.5" ry="7.5" fill="#5b4974" stroke="#413331" stroke-miterlimit="10" stroke-width="2"/>
  <path d="M277,82l-13.7,59s-8.4,16,6.9,16h15.3s17.9,3,16.9-16c0,0,0-19,10.5-41l2.1-7.3S279.1,72.9,277,82Z" transform="translate(9 5.3)" fill="#787893" stroke="#413331" stroke-miterlimit="10" stroke-width="2"/>
  <path fill="#fff" stroke="#413331" stroke-miterlimit="10" d="M470 62.3L457.7 94.5"/>
  <rect x="461" y="120.3" width="26" height="13.57" rx="4.2" ry="4.2" fill="#483860"/>
  <rect x="438" y="93.7" width="15" height="9" rx="4.5" ry="4.5" transform="rotate(18.7 434.716 128.352)" fill="#483860"/>
  <circle cx="457.7" cy="94.5" r="5.2" fill="#5b4974"/>
  <circle cx="469.6" cy="62.6" r="2.7" fill="#5b4974"/>
  <path fill="#483860" d="M484.3 223.3H573.6V261.3H484.3z"/>
  <path stroke="#413331" stroke-miterlimit="10" stroke-width="2" fill="url(#a)" d="M488 225.3L494 215.3 499 225.3 499 263.8 493.5 275.3 488 262.8 488 225.3z"/>
  <path stroke="#413331" stroke-miterlimit="10" stroke-width="2" fill="url(#b)" d="M502 225.3L508 215.3 513 225.3 513 263.8 507.5 275.3 502 262.8 502 225.3z"/>
  <path stroke="#413331" stroke-miterlimit="10" stroke-width="2" fill="url(#c)" d="M516 225.3L522 215.3 527 225.3 527 263.8 521.5 275.3 516 262.8 516 225.3z"/>
  <path stroke="#413331" stroke-miterlimit="10" stroke-width="2" fill="url(#d)" d="M530 225.3L536 215.3 541 225.3 541 263.8 535.5 275.3 530 262.8 530 225.3z"/>
  <path stroke="#413331" stroke-miterlimit="10" stroke-width="2" fill="url(#e)" d="M544 224.3L550 214.3 555 224.3 555 262.8 549.5 274.3 544 261.8 544 224.3z"/>
  <path stroke="#413331" stroke-miterlimit="10" stroke-width="2" fill="url(#f)" d="M558 224.3L564 214.3 569 224.3 569 262.8 563.5 274.3 558 261.8 558 224.3z"/>
  
  <path id="newwater" d="M 144.8 102.6 
         C 200 102 200 102 283 94.6
         L 275 137.3 
         L 144.8 102.6 Z" 
         fill="#6190a5" opacity="0.67"/>
  
  <rect x="340" y="105.3" width="125.5" height="41" rx="20" ry="20" fill="#b8e0da" stroke="#413331" stroke-miterlimit="10" stroke-width="2"/>
  
  <path id="midwater"
        d="M 333 121 
           C 373 121 413 121 455.5 121 L 455.5 121
           s.3,21-23.5,19.8H350.8s-18.4-.2-18.6-19.7Z" transform="translate(9 5.3)" fill="#6190a5" opacity="0.67"/>
  
  <path fill="#413331" d="M373.3 145.9H431.8V150.61H373.3z"/>
  <path d="M372.8,144.2s11.8,5.8-3.2,10.8l48.2.2s-13.8-6.8-1.2-10.3Z" transform="translate(9 5.3)" fill="#413331"/>
  <path d="M114.7,57.3s3.7-11,18-7" transform="translate(9 5.3)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
  <path d="M341,113.3s1.6-7.7,13.6-7.3" transform="translate(9 5.3)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
  <circle cx="292.2" cy="91.8" r="2.9" fill="#aea3bf"/>
  <circle cx="456.1" cy="92.9" r="2.3" fill="#aea3bf"/>
  <path fill="none" stroke="#aea3bf" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M290.3 98.4L286.6 113.5"/>
  <rect x="441" y="175.3" width="17.5" height="30.33" rx="8.8" ry="8.8" fill="#deb55c" stroke="#413331" stroke-miterlimit="10" stroke-width="2"/>
  <path fill="#413331" d="M449.8 215.3H469.6V274.3H449.8z"/>
  <g stroke-miterlimit="10" stroke-width="2">
    <path d="M443.5,274.3s-2.2,40.3-25.7,19c0,0-.1-6.3-12.3-9h-76a20.1,20.1,0,0,1-20-20V175.2a20.1,20.1,0,0,1,20-20h91.3a20.1,20.1,0,0,1,20,20v89.2a19.5,19.5,0,0,1-1,6.3Z" transform="translate(9 5.3)" fill="#5b4974" stroke="#413331"/>
    <circle cx="329.7" cy="186.5" r="3.6" fill="#6190a5" stroke="#193a68"/>
    <circle cx="438.1" cy="185.5" r="4.1" fill="#6190a5" stroke="#193a68"/>
  </g>
  <circle cx="214" cy="292.8" r="3.6" fill="#6190a5" stroke="#193a68" stroke-miterlimit="10" stroke-width="2"/>
  <path d="M416.2,213.2l-5.1-.4a55.3,55.3,0,0,0,0-7.9c-.1-1.9-4.3-2-4.3-2-15.7-.3-40.3-.5-43.7-.1-5.4.7-8.8-3.7-10-6.4l-.2-.4v-.5c0-.7-.4-16.6,0-24.9.1-1.8-.3-3.2-1.1-3.9a4.7,4.7,0,0,0-3.2-.9h-.3c-.3,0-33.2.2-45.1,0-2,0-3.4.3-4,1a2.2,2.2,0,0,0-.4,1.8,6.8,6.8,0,0,1,.1,1.2V186c0,4.1-1.3,7.2-3.8,9.3s-8.4,2.6-9.6,2.5H256v-5h30s3.5.5,5.7-1.3,2-3,2-5.5V169.8a2,2,0,0,0,0-.3,7,7,0,0,1,1.5-5.8c1.7-1.9,4.3-2.8,8-2.8,11.5.1,42.6,0,44.9,0a9.8,9.8,0,0,1,7.1,2.2c2,1.8,3,4.4,2.8,7.8-.3,7.3-.1,21.2,0,24.1.5.9,2.1,3.3,4.3,3,4.9-.7,40.4,0,44.5,0h.1c3,0,8.9,1.4,9.3,6.6A59.2,59.2,0,0,1,416.2,213.2Z" transform="translate(9 5.3)" fill="#deb55c" stroke="#413331" stroke-miterlimit="10" stroke-width="2"/>
  <path fill="#787893" stroke="#413331" stroke-miterlimit="10" stroke-width="2" d="M347 214.3H469.6V274.3H347z"/>
  <path fill="#413331" d="M469.6 210H478.3V279.33H469.6z"/>
  <path fill="#d9c697" stroke="#60574d" stroke-miterlimit="10" d="M478.3 210L484.3 215.3 484.3 272.6 478.3 279.3 478.3 210z"/>
  <path fill="#413331" d="M572 212.6H578.4V275.27H572z"/>
  <path fill="#d9c697" stroke="#60574d" stroke-miterlimit="10" d="M578.3 212.6L582.8 217.4 582.8 269.3 578.3 275.3 578.3 212.6z"/>
  <rect x="481.3" y="181.4" width="97.4" height="19.22" rx="9.6" ry="9.6" fill="#60574d" stroke="#413331" stroke-miterlimit="10" stroke-width="2"/>
  <path fill="#413331" d="M577.3 187.9H584.6999999999999V195.34H577.3z"/>
  <path d="M584.5,175.4s-22.4,9.9,0,22.6Z" transform="translate(9 5.3)" fill="#60574d" stroke="#413331" stroke-miterlimit="10" stroke-width="2"/>
  <circle cx="601.6" cy="191.6" r="3.7" fill="#60574d" stroke="#413331" stroke-miterlimit="10"/>
  <path fill="#fff" stroke="#413331" stroke-miterlimit="10" d="M527 118.3L519.1 127.4"/>
  <circle cx="527.9" cy="117.2" r="1.9" fill="#5b4974"/>
  <path fill="#413331" d="M583.3 225.3H588.5V261.3H583.3z"/>
  <path fill="#413331" d="M595.3 225.3H600.5V261.3H595.3z"/>
  <path fill="#413331" d="M607.3 225.3H612.5V261.3H607.3z"/>
  <path fill="#413331" d="M583.5 239.8H644.9V246.37H583.5z"/>
  <path d="M615.5,222.5a2.5,2.5,0,0,1-1.6-4.5l15-12a2.5,2.5,0,0,1,1.6-.5H635a2.5,2.5,0,0,1,0,5h-3.6L617.1,222A2.5,2.5,0,0,1,615.5,222.5Z" transform="translate(9 5.3)" fill="#60574d" stroke="#413331" stroke-miterlimit="10"/>
  <path d="M636,268.3h-4.5a2.5,2.5,0,0,1-1.6-.5l-15-12a2.5,2.5,0,1,1,3.1-3.9l14.3,11.5H636a2.5,2.5,0,0,1,0,5Z" transform="translate(9 5.3)" fill="#60574d" stroke="#413331" stroke-miterlimit="10"/>
  <path d="M642,207.3c1.5,1.7,7.1,18.9,7.1,18.9h4.7v21.1h-5L642,265.6Z" transform="translate(9 5.3)" fill="#deb55c" stroke="#8e6a46" stroke-miterlimit="10"/>
  <circle cx="357.7" cy="265.8" r="3.6" fill="#6190a5" stroke="#193a68" stroke-miterlimit="10" stroke-width="2"/>
  <path fill="#413331" d="M619.3 225.3H624.5V261.3H619.3z"/>
  <path fill="none" stroke="#9e8a78" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M490.5 185.5L499.8 185.5"/>
  <path fill="#413331" d="M645 211.5H651V273H645z"/>
  <path d="M272.1,171.2s6.3,3.2-2.4,15.2" transform="translate(9 5.3)" fill="none" stroke="#60574d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
  <path d="M224.5,267.8s53.9-24.1,45.2-47.7" transform="translate(9 5.3)" fill="none" stroke="#60574d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
  <path d="M188.3,290s-47.3,72.3-48,135c0,0-5.3,10,6.7,13.3l41.3,8,9.3-11.3s14-94.7,37.3-110C235,325,207.7,299,188.3,290Z" transform="translate(9 5.3)" fill="#60574d" stroke="#413331" stroke-miterlimit="10" stroke-width="2"/>
  <path d="M189,303.1s-23.5,35-31.3,69.9" transform="translate(9 5.3)" fill="none" stroke="#9e8a78" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" opacity="0.68"/>
  <path fill="none" stroke="#413331" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M182.3 315.2L235.7 347.8"/>
  <path fill="none" stroke="#413331" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M169.5 337.7L228.1 365.7"/>
  <path fill="none" stroke="#413331" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M159.9 360.3L223.3 385"/>
  <path fill="none" stroke="#413331" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M152 386.6L217.7 403"/>
  <path fill="none" stroke="#413331" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M144.8 410.3L214 423"/>
  <path d="M162.6,159.6S154,154.5,154,170v22.7s1,6.3,8.6,3.9" transform="translate(9 5.3)" fill="none" stroke="#413331" stroke-miterlimit="10" stroke-width="3"/>
  <path fill="none" stroke="#413331" stroke-miterlimit="10" stroke-width="4" d="M183.7 178.8L183.7 188"/>
  <path fill="none" stroke="#413331" stroke-miterlimit="10" stroke-width="4" d="M253.7 178.8L253.7 188"/>
  <ellipse cx="218.5" cy="148.1" rx="4.5" ry="2.5" fill="#60574d" stroke="#413331" stroke-miterlimit="10" stroke-width="2"/>
  <path fill="none" stroke="#413331" stroke-miterlimit="10" stroke-width="4" d="M253.7 131.7L253.7 151"/>
  <path fill="none" stroke="#60574d" stroke-miterlimit="10" d="M220.2 167L220.2 199"/>
  <path fill="#d8c8bf" stroke="#413331" stroke-miterlimit="10" stroke-width="2" d="M189 151H248V178.88H189z"/>
  <path fill="#d8c8bf" stroke="#413331" stroke-miterlimit="10" stroke-width="2" d="M189 188H248V215.88H189z"/>
  <path id="sideL1" d="M171.8,160.2c3.2-.2,18.1,0,18.1,0l4.5-3.3,5.7,7.8,5-9.5,6.2,9.5,5.8-9.5,7.5,8.2,3.8-5.3,2.7,2.1h16.6" transform="translate(9 5.3)" fill="none" stroke="#61a382" stroke-miterlimit="10"/>
  <path id="sideL2" d="M248,196.7c-3.2.1-18.1,0-18.1,0l-4.5,1.6-5.7-3.9-5,4.7-6.2-4.7-5.7,4.7-7.5-4.1-3.8,2.7-2.7-1H172.1" transform="translate(9 5.3)" fill="none" stroke="#c24621" stroke-miterlimit="10"/>
  <path d="M176.5,145.7H180v27.9h-3.5a13.9,13.9,0,0,1,0-27.9Z" transform="translate(9 5.3)" fill="#60574d" stroke="#413331" stroke-miterlimit="10" stroke-width="2"/>
  <path d="M256,159.6a14,14,0,0,1-13.9,13.9H239V145.7h3.1A14,14,0,0,1,256,159.6Z" transform="translate(9 5.3)" fill="#60574d" stroke="#413331" stroke-miterlimit="10" stroke-width="2"/>
  <path d="M176.5,182.7H180v27.9h-3.5a13.9,13.9,0,0,1,0-27.9Z" transform="translate(9 5.3)" fill="#60574d" stroke="#413331" stroke-miterlimit="10" stroke-width="2"/>
  <path d="M256,196.6a14,14,0,0,1-13.9,13.9H239V182.7h3.1A14,14,0,0,1,256,196.6Z" transform="translate(9 5.3)" fill="#60574d" stroke="#413331" stroke-miterlimit="10" stroke-width="2"/>
  <ellipse cx="160.6" cy="184.3" rx="6.6" ry="5.3" fill="#60574d" stroke="#413331" stroke-miterlimit="10" stroke-width="2"/>
  <path fill="#fff" stroke="#413331" stroke-miterlimit="10" d="M119.6 185.1L154.1 184.9"/>
  <circle cx="111" cy="180" r="2.7" transform="rotate(-21.2 129.81 158.963)" fill="#5b4974"/>
  <path fill="none" stroke="#fcfcfc" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M194 156L212 156"/>
  <path fill="none" stroke="#fcfcfc" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M194 193L200 193"/>
  <rect x="177.6" y="156.5" width="3.7" height="3.69" rx="1.8" ry="1.8" fill="#997d62"/>
  <rect x="177.6" y="194.5" width="3.7" height="3.69" rx="1.8" ry="1.8" fill="#997d62"/>
  <path fill="none" stroke="#b8b8c9" stroke-miterlimit="10" stroke-width="2" d="M370.2 219.8L353 219.8"/>
</svg>
</div><!--ray-contain-->

              
            
!

CSS

              
                body, html {
  background: #c37344;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
}

.ray-contain {
  width: 800px;
  height: 500px;
  position: relative;
}

#sideL1, #sideL2 {
  stroke-dashoffset: -100px;
  stroke-dasharray: 100px;
}
              
            
!

JS

              
                const SWIRL_OPTS = {
  parent:         "#ray-contain",
  fill:           '#d3eae6',
  opacity:        1,
  x:              { 0: '-25' },
  duration:       'rand(600, 1000)',
  radius:         'rand(1, 10)',
  pathScale:      'rand(.5, 1)',
  swirlFrequency: 'rand(6, 15)',
  swirlSize: 'rand(8,14)'
}

const POS1 = {
  left: '185px', top: '80px',
  y: { 0: '-25' }
}

const POS2 = {
  left: '170px', top: '75px',
  y: { 0: '-25' }
}

const POS3 = {
  left: '300px', top: '95px',
  y: { 0: '-15' }
}

const sw1 = new mojs.ShapeSwirl({
  ...SWIRL_OPTS,
  ...POS1
});
  
const sw2 = new mojs.ShapeSwirl({
  ...SWIRL_OPTS,
  ...POS1,
  direction: -1,
  delay: 10
});

const sw3 = new mojs.ShapeSwirl({
  ...SWIRL_OPTS,
  ...POS1,
  delay: 20,
  left: '180px'
});
  
const sw4 = new mojs.ShapeSwirl({
  ...SWIRL_OPTS,
  ...POS1,
  direction: -1,
  delay: 50
});

const sw5 = new mojs.ShapeSwirl({
  ...SWIRL_OPTS,
  ...POS2,
  left: '160px'
});
  
const sw6 = new mojs.ShapeSwirl({
  ...SWIRL_OPTS,
  ...POS2,
  direction: -1,
  delay: 10
});

const sw7 = new mojs.ShapeSwirl({
  ...SWIRL_OPTS,
  ...POS2,
  delay: 20
});
  
const sw8 = new mojs.ShapeSwirl({
  ...SWIRL_OPTS,
  ...POS2,
  direction: -1,
  delay: 50
});

// middle water tank

const sw9 = new mojs.ShapeSwirl({
  ...SWIRL_OPTS,
  ...POS3,
  direction: -1,
  x: { 0: '-55' },
  delay: 10
});

const sw10 = new mojs.ShapeSwirl({
  ...SWIRL_OPTS,
  ...POS3,
  x: { 0: '-10' },
  delay: 20
});
  
const sw11 = new mojs.ShapeSwirl({
  ...SWIRL_OPTS,
  ...POS3,
  x: { 0: '-30' },
  direction: -1,
  delay: 50
});

//laser

const OPTS = {
  top: '170px', left: '440px',
  parent:         "#ray-contain",
  fill:           'none',
  radiusX:         10,
  x:              {0 : 300},
  strokeWidth:    { 50 : 0 },
  scale:          { 0: 1 },
  duration:       500,
  easing: 'quint.out'
};

const circ1 = new mojs.Shape({
  ...OPTS,
  stroke:  '#d83e67',
  radiusY:  { 0 : 75 }
});

const circ2 = new mojs.Shape({
  ...OPTS,
  radius:         { 0 : 50 },
  strokeWidth:    { 30: 0 },
  stroke:         '#f49687',
  delay:          100
});

const circ3 = new mojs.Shape({
  ...OPTS,
  stroke:         '#c14365',
  radiusY:        { 0 : 75 },
  delay:          400
});

const circ4 = new mojs.Shape({
  ...OPTS,
  radius:         { 0 : 50 },
  strokeWidth:    { 30: 0 },
  stroke:         '#f49687',
  delay:          500,
  easing:         'quad.out'
});

//pewpew
const LINE_OPTS = {
  top: '170px', left: '765px',
  parent:        "#ray-contain",
  shape:        'rect',
  duration:     700,
  radius:       300,
  radiusY:      1,
  fill:         'none',
  stroke:       '#f49687',
  strokeWidth:  { 3: 0 },
  easing:       'sin.out',
  strokeDasharray: {'30% 120%' : '0% 50%'},
  strokeDashoffset: { '42%' : '0%' }
};

let line1 = new mojs.Transit({
  ...LINE_OPTS,
  stroke: '#f7a28c',
  delay: 45
});

let line2 = new mojs.Transit({
  ...LINE_OPTS,
  stroke: { '#c14365': '#f7a28c' },
  delay: 400
});

//now we repeat it all in the master
const master = new mojs.Timeline(
  { speed: .7, repeat: 999 });
  master
    .add ( sw1, sw2, sw3, sw4, sw5, sw6, sw7, sw8, sw9, sw10, sw11 )
    .add( circ1, circ3, circ4, line1, line2 )
    .play();

//new MojsPlayer({ add: master, isPlaying: true, isRepeat: true });

//water
var lWater = document.querySelector('#newwater'),
    mWater = document.querySelector('#midwater');

//left water tank second
new mojs.Tween({
  duration: 1300,
  repeat: 999,
  isYoyo: true,
  onUpdate: function (progress) {
    let bProgress = mojs.easing.sin.in(progress);
    lWater.setAttribute('d', 
      `M 144.8 102.6 C ${180 - 85*bProgress} ${100 - 5*bProgress} ${180 - 60*bProgress} ${100 - 10*bProgress} 283 94.6 L 275 137.3 L 144.8 102.6 Z`);
  }
}).play();

//mid water tank first
new mojs.Tween({
  duration: 1500,
  repeat: 999,
  isYoyo: true,
  onUpdate: function (progress) {
    let bProgress = mojs.easing.sin.in(progress);
    mWater.setAttribute('d', 
      `M 333 121 C 373 ${121 + 10*bProgress} 413 ${121 - 10*bProgress} 455.5 121 L 455.5 121 s.3,21-23.5,19.8H350.8s-18.4-.2-18.6-19.7Z`);
  }
}).play();

const sideL1 = document.querySelector('#sideL1'),
      sideL2 = document.querySelector('#sideL2'),
      allSideL = [sideL1, sideL2];
const laser1E = mojs.easing.path('M0,400S58,111.1,80.5,175.1s43,286.4,63,110.4,46.3-214.8,70.8-71.8S264.5,369,285,225.5s16.6-209.7,35.1-118.2S349.5,258.5,357,210,400,0,400,0');

new mojs.Tween({
  repeat:   999,
  duration: 2000,
  isYoyo: true,
  isShowEnd: false,
  onUpdate: function (progress) {
    var laser1EProgress = laser1E(progress);
    for (var i = 0; i < allSideL.length; i++) {
      allSideL[i].style.strokeDashoffset = 20*laser1EProgress + '%';
      allSideL[i].style.opacity = Math.abs(0.8*laser1EProgress);
    }
  }
}).play();
              
            
!
999px

Console