123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

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

            
              <div class="field">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 864.67 414.26" class="main-image">
    <g id="shadow-dark" style="opacity: 0.55">
      <ellipse cx="226.35" cy="352.62" rx="52.35" ry="4.72" style="fill: gray;opacity: 0.7"/>
      <ellipse cx="363.17" cy="329.2" rx="42.08" ry="5.89" style="fill: gray;opacity: 0.6"/>
      <ellipse cx="483.22" cy="379.62" rx="68.45" ry="11.73" style="fill: gray;opacity: 0.7"/>
      <ellipse cx="704.24" cy="351.58" rx="74.78" ry="8.1" style="fill: gray;opacity: 0.7"/>
    <g class="cork-shadow">
      <ellipse cx="52.35" cy="387.48" rx="52.35" ry="8.8" style="fill: #4d4d4d;opacity: 0.7"/>
      <ellipse cx="54.25" cy="388.62" rx="38.01" ry="4.21" style="fill: #4d4d4d;opacity: 0.5"/>
    </g>
     <ellipse cx="155.23" cy="386.52" rx="7.51" ry="2.25" style="fill: #ccc;opacity: 0.45"/>
  </g>
  <g id="shadow-light" style="opacity: 0.5">
    <path d="M153.13,651c-4.84-11.81,90.64-24.44,172.59-29,240.33-13.35,585.43,30.48,555.51,51.17C870,681,782.06,685.46,606.17,694.5c-136.35,7-328,16.84-372.14,6.82-25.56-5.8,25.51-12.06,5.4-25.58C219.47,662.32,156.93,660.25,153.13,651Z" transform="translate(-48.24 -291.33)" style="fill: #fff;opacity: 0.2"/>
    <path d="M183,638.94c-4.85-11.8,90.63-24.44,172.58-29C595.92,596.59,941,640.42,911.1,661.11c-11.24,7.77-99.18,12.29-275.06,21.32-136.35,7-328,16.84-372.14,6.82-25.56-5.79,25.5-12.06,5.39-25.58S186.79,648.18,183,638.94Z" transform="translate(-48.24 -291.33)" style="fill: #fff;opacity: 0.16"/>
    <path d="M245.46,645.17c-3.55-5.91,66.41-12.22,126.47-14.5C548,624,800.9,645.91,779,656.25c-8.23,3.89-72.67,6.14-201.55,10.66-99.91,3.5-240.32,8.42-272.69,3.41-18.73-2.9,18.69-6,3.95-12.79S248.24,649.79,245.46,645.17Z" transform="translate(-48.24 -291.33)" style="fill: #fff;opacity: 0.3"/>
    <ellipse cx="127.6" cy="389.95" rx="15.02" ry="4.49" style="fill: #fff;opacity: 0.45"/>
    <ellipse cx="177.44" cy="389.1" rx="7.51" ry="2.25" style="fill: #fff;opacity: 0.45"/>
    <ellipse cx="155.23" cy="396.16" rx="3.75" ry="1.12" style="fill: #fff;opacity: 0.45"/>
    <ellipse cx="145.17" cy="380.38" rx="6.3" ry="1.88" style="fill: #fff;opacity: 0.45"/>
  </g>
  <g id="main-shadow">
    <path d="M853.77,498.84a114.28,114.28,0,0,0-16.49-48.74,116.42,116.42,0,0,0-38.24-38c-10.93-7-36.12-20.67-69.93-19.82a121.28,121.28,0,0,0-20.47,2.25,137,137,0,0,0-23.31,7.07c-13.92,5.89-37.68,21.79-53,49.65-20.93,38-13.8,75.7-11.65,85.44.18,1,.42,2.46.63,4.19a99.64,99.64,0,0,1,.66,10.3c0,4.52-3.89,38.44-34.52,66.28-17.72,16.1-32.81,19.65-36.61,20.46-8.06,1.71-17.88,3.79-23.47-1.49-11.53-10.89,4.11-44.4,5.41-47.11,9.12-19.13,27.55-41.5,28.61-42.77a59,59,0,0,0,11.35-21.18c.23-.79.35-1.4.49-2,6-24.76-17.71-48.84-42.56-52s-49.08,8.38-71,20.75c-4.67,2.64-9.53,5.4-14.86,5.74-9.3.58-17.72-6.6-21.69-15.19a56.37,56.37,0,0,1-4.83-27.84c2.23-19.29,1-55.31-6.64-121.1a35.07,35.07,0,0,1-5,5.52c-2.83,2.49-5.24,3.79-9.58,6.09a88.71,88.71,0,0,1-10.51,4.74,95.14,95.14,0,0,1-13.9,4c-.31.07-3.38.73-7.45,1.22a32.53,32.53,0,0,1-6.12.17,13.94,13.94,0,0,1-3.37-.65c-.39-.16-.79-.28-1.18-.44-.76-.32-1-.51-1.18-.39s-.06.43.13,1.31.29,1.43.3,1.45c14.21,53.11,5.8,94.79,5.8,94.79-2.62,13-4.91,23.61-14,32.68-.93.91-16.35,15.86-31.51,11.92s-21.05-25-27.69-48.74c-3.86-13.84-3.16-27.85-6.37-50.43-.47-3.24-.79-6-1.45-11.63-1.27-10.83-1.38-13.55-1.28-16.4.24-7.5,1.61-7.83.79-9.93-3.51-8.91-30.9-10.16-50.69.38-4.65,2.47-13.82,7.51-15.74,16.33-.24,1.07-.15,4.11.23,10.17.7,11.26,1.93,19.57,2,19.82,2.23,18,4.17,41.58,5.2,53.64.64,7.43,2,23.48,2.81,42.92,2,46.52,3,69.79,1.74,90.05-.58,9.64-1.26,16.43,2,25,5.58,14.43,19.86,26.82,37,29.76,15.22,2.62,35.53-.72,44.2-14.88,13.58-22.2-4.28-57.43,15-74.69,9.18-8.21,23.89-7.69,34.1-.86s16.32,18.7,18.94,30.85c1.13,5.26,1.71,10.69,3.65,15.7,4.76,12.29,18.06,20.38,31,19.35s24.65-10.77,28.74-23.32c4-12.15,1.21-25.42,2.43-38.16.28-3,7.49-33.57,31.74-41.24,15-4.75,35.93-.45,41.17,11.39,5.56,12.56-10.95,23.59-22.85,54.29-4.08,10.51-21.87,56.39-3.23,79.71,16.24,20.33,54.39,16.31,75.08,10.33,42.41-12.27,47.85-43.81,83.66-45.12,17.16-.63,16.11,6.18,49.23,12.07,24.94,4.43,49.07,8.72,75.77.51,39.36-12.1,60.52-44,65.49-52C861.13,551.74,855.05,512,853.77,498.84ZM777,568.27a61.42,61.42,0,0,1-42.49,17.93c-16.29,0-30.74-6.94-42.5-17.93S675.06,540.82,674.36,525c-.67-15.25,7.18-32.66,17.61-43.28a61.45,61.45,0,0,1,42.5-17.93c16.28,0,30.73,6.94,42.49,17.93s16.91,27.45,17.61,43.28C795.24,540.24,787.39,557.65,777,568.27Z" transform="translate(-48.24 -291.33)" style="fill: #999"/>
    <path d="M349.84,356.74c3.19,6.12,23.54,1.51,34.39-2.49s28.69-13.51,27.35-22a5.26,5.26,0,0,0-.52-1.64c-3.71-7.32-23.2-6.38-36.36-.83C359.84,336.09,346.81,350.9,349.84,356.74Z" transform="translate(-48.24 -291.33)" style="fill: #999"/>
  </g>
  <g id="cork">
    <path d="M335.93,314.14a11.2,11.2,0,0,0,.42,4.18c2.45,9.45,7.09,16.66,9.09,21a207.29,207.29,0,0,1,8.74,22.35c2.88,8.71,3.8,13,6.31,16.3a17.1,17.1,0,0,0,2.49,2.59c10.74,9.19,30.62,1.36,33.87.08,5.57-2.19,8.36-3.29,10.58-5.92,5.6-6.65,1.6-13.5,2.07-29.84.67-23.68-.33-35.54.84-43.24a6.45,6.45,0,0,0-.24-3.53c-3.55-9.06-30.65-5.67-35.66-5a70.49,70.49,0,0,0-25.57,7.77C337.09,307.19,336.1,312.57,335.93,314.14Z" transform="translate(-48.24 -291.33)" style="fill: #c7b299"/>
    <path d="M342.36,324.27c-.09.39,15.61,4,32.5.46,13.5-2.84,22-9,21.6-9.39s-9.6,5.41-25,8.11C355.17,326.31,342.45,323.92,342.36,324.27Z" transform="translate(-48.24 -291.33)" style="fill: #fff;opacity: 0.38"/>
    <ellipse cx="373.02" cy="306.11" rx="37.95" ry="12.69" transform="translate(-104.61 -205.38) rotate(-12.23)" style="fill: #534741;opacity: 0.3"/>
    <g>
      <circle cx="304.6" cy="48.26" r="1.68" style="fill: #998675"/>
      <circle cx="317.31" cy="47.71" r="0.56" style="fill: #998675"/>
      <circle cx="310.86" cy="51.81" r="1.31" style="fill: #998675"/>
      <circle cx="329.38" cy="53.11" r="1.12" style="fill: #998675"/>
      <circle cx="326.11" cy="45.25" r="1.34" style="fill: #998675"/>
      <circle cx="320.64" cy="55.33" r="1.1" style="fill: #998675"/>
      <circle cx="315.47" cy="60.19" r="1.28" style="fill: #998675"/>
      <circle cx="334.08" cy="46" r="1.15" style="fill: #998675"/>
      <circle cx="343.56" cy="39.45" r="1.34" style="fill: #998675"/>
      <circle cx="316.75" cy="67.45" r="0.56" style="fill: #998675"/>
      <circle cx="335.79" cy="40.79" r="0.56" style="fill: #998675"/>
      <circle cx="335.7" cy="52.47" r="1.22" style="fill: #998675"/>
      <circle cx="349.01" cy="33.49" r="1.46" style="fill: #998675"/>
      <circle cx="342.79" cy="44.61" r="1.13" style="fill: #998675"/>
      <circle cx="344.09" cy="51.25" r="1.31" style="fill: #998675"/>
      <circle cx="350.47" cy="43.48" r="0.56" style="fill: #998675"/>
      <circle cx="356.39" cy="37.32" r="1.36" style="fill: #998675"/>
      <circle cx="356.05" cy="27.24" r="1.02" style="fill: #998675"/>
      <circle cx="311.04" cy="41.35" r="0.56" style="fill: #998675"/>
      <circle cx="320.11" cy="42.98" r="1.63" style="fill: #998675"/>
    </g>
    <g style="opacity: 0.5">
      <ellipse cx="363.03" cy="315.7" rx="1.54" ry="0.5" transform="translate(-104.09 -212.27) rotate(-11.55)" style="fill: #e6e6e6"/>
      <ellipse cx="357.93" cy="313.13" rx="1.84" ry="0.6" transform="translate(-103.68 -213.34) rotate(-11.55)" style="fill: #e6e6e6"/>
      <ellipse cx="368.73" cy="311.27" rx="1.57" ry="0.52" transform="translate(-103.09 -211.22) rotate(-11.55)" style="fill: #e6e6e6"/>
      <ellipse cx="380.9" cy="305.77" rx="1.84" ry="0.6" transform="translate(-101.74 -208.89) rotate(-11.55)" style="fill: #e6e6e6"/>
      <ellipse cx="370.56" cy="308.5" rx="0.78" ry="0.25" transform="translate(-102.5 -210.91) rotate(-11.55)" style="fill: #e6e6e6"/>
      <ellipse cx="371.5" cy="313.68" rx="1.67" ry="0.55" transform="translate(-103.51 -210.61) rotate(-11.55)" style="fill: #e6e6e6"/>
      <ellipse cx="387.71" cy="301.64" rx="2.01" ry="0.66" transform="translate(-100.78 -207.61) rotate(-11.55)" style="fill: #e6e6e6"/>
      <ellipse cx="380.33" cy="308.26" rx="1.55" ry="0.51" transform="translate(-102.25 -208.96) rotate(-11.55)" style="fill: #e6e6e6"/>
      <ellipse cx="382.68" cy="310.83" rx="1.8" ry="0.59" transform="translate(-102.72 -208.43) rotate(-11.55)" style="fill: #e6e6e6"/>
      <ellipse cx="390.57" cy="305.65" rx="0.78" ry="0.25" transform="translate(-101.52 -206.96) rotate(-11.55)" style="fill: #e6e6e6"/>
      <ellipse cx="397.99" cy="301.3" rx="1.87" ry="0.61" transform="translate(-100.5 -205.56) rotate(-11.55)" style="fill: #e6e6e6"/>
      <ellipse cx="396.63" cy="296.95" rx="1.4" ry="0.46" transform="translate(-99.66 -205.92) rotate(-11.55)" style="fill: #e6e6e6"/>
      <ellipse cx="349.64" cy="313.78" rx="2.24" ry="0.73" transform="translate(-103.98 -214.99) rotate(-11.55)" style="fill: #e6e6e6"/>
    </g>
    <ellipse cx="362.2" cy="308.86" rx="1.8" ry="0.59" transform="translate(-102.74 -212.57) rotate(-11.55)" style="fill: #e6e6e6"/>
    <ellipse cx="370.09" cy="303.68" rx="0.78" ry="0.25" transform="translate(-101.54 -211.1) rotate(-11.55)" style="fill: #e6e6e6"/>
    <ellipse cx="377.51" cy="299.33" rx="1.87" ry="0.61" transform="translate(-100.52 -209.7) rotate(-11.55)" style="fill: #e6e6e6"/>
    <g>
      <circle cx="349.29" cy="66" r="1.68" style="fill: #998675"/>
      <circle cx="341.24" cy="75.86" r="0.56" style="fill: #998675"/>
      <circle cx="342.47" cy="68.32" r="1.31" style="fill: #998675"/>
      <circle cx="329.19" cy="81.28" r="1.12" style="fill: #998675"/>
      <circle cx="337.23" cy="84.07" r="1.34" style="fill: #998675"/>
      <circle cx="333.34" cy="73.28" r="1.1" style="fill: #998675"/>
      <circle cx="333.15" cy="66.19" r="1.28" style="fill: #998675"/>
      <circle cx="331.37" cy="89.52" r="1.15" style="fill: #998675"/>
      <circle cx="326.88" cy="62.31" r="0.56" style="fill: #998675"/>
      <circle cx="350.16" cy="75.41" r="0.56" style="fill: #998675"/>
      <circle cx="342.92" cy="81.1" r="1.63" style="fill: #998675"/>
    </g>
  </g>
  <g id="cork-rotated" class="cork-rotated">
    <path d="M73.88,685.85a10,10,0,0,0,3.84.5c9-.19,16.5-2.84,20.79-3.72a190,190,0,0,1,22-3.12c8.45-.75,12.48-.66,16-2.21a16.78,16.78,0,0,0,2.86-1.69c10.55-7.72,7.73-27.27,7.26-30.46-.79-5.48-1.18-8.23-3.08-10.77-4.79-6.46-11.81-4.31-26.4-8.2-21.17-5.64-32.05-7.26-38.73-9.94a6.07,6.07,0,0,0-3.23-.54c-8.9,1.28-11.6,26.38-12.1,31a65.1,65.1,0,0,0,1.56,24.67C67.87,683.33,72.5,685.36,73.88,685.85Z" transform="translate(-48.24 -291.33)" style="fill: #c7b299"/>
    <path d="M84.36,682.21c.33.17,6.91-13.19,7.3-29.14.32-12.75-3.46-21.71-3.85-21.43s2.83,9.79,2,24.22C88.91,671.12,84.06,682.06,84.36,682.21Z" transform="translate(-48.24 -291.33)" style="fill: #fff;opacity: 0.38"/>
    <ellipse cx="74.52" cy="650.77" rx="35.08" ry="11.73" transform="translate(-625.75 422.03) rotate(-88.95)" style="fill: #534741;opacity: 0.32"/>
    <g class="cork-holes">
      <circle cx="69" cy="363.73" r="1.55" style="fill: #998675"/>
      <circle cx="61.56" cy="372.84" r="0.52" style="fill: #998675"/>
      <circle cx="62.69" cy="365.87" r="1.21" style="fill: #998675"/>
      <circle cx="50.41" cy="377.85" r="1.04" style="fill: #998675"/>
      <circle cx="57.85" cy="380.43" r="1.24" style="fill: #998675"/>
      <circle cx="54.25" cy="370.45" r="1.01" style="fill: #998675"/>
      <circle cx="54.07" cy="363.9" r="1.18" style="fill: #998675"/>
      <circle cx="52.43" cy="385.47" r="1.06" style="fill: #998675"/>
      <circle cx="48.28" cy="360.32" r="0.52" style="fill: #998675"/>
      <circle cx="69.81" cy="372.42" r="0.52" style="fill: #998675"/>
      <circle cx="63.1" cy="377.68" r="1.51" style="fill: #998675"/>
    </g>
    <g>
      <ellipse cx="76.5" cy="630.98" rx="2.32" ry="1.35" transform="translate(-604.17 403.08) rotate(-88.81)" style="fill: #998675"/>
      <ellipse cx="76.58" cy="648.57" rx="0.78" ry="0.46" transform="translate(-621.67 420.38) rotate(-88.81)" style="fill: #998675"/>
      <ellipse cx="73.46" cy="639.58" rx="1.81" ry="1.05" transform="translate(-615.75 408.46) rotate(-88.81)" style="fill: #998675"/>
      <ellipse cx="71.89" cy="665.15" rx="1.55" ry="0.9" transform="matrix(0.02, -1, 1, 0.02, -642.85, 431.92)" style="fill: #998675"/>
      <ellipse cx="78.32" cy="660.77" rx="1.85" ry="1.08" transform="translate(-632.17 434.06) rotate(-88.81)" style="fill: #998675"/>
      <ellipse cx="70.35" cy="653.04" rx="1.52" ry="0.88" transform="translate(-632.25 418.52) rotate(-88.81)" style="fill: #998675"/>
      <ellipse cx="66.58" cy="645.82" rx="1.76" ry="1.03" transform="translate(-628.72 407.68) rotate(-88.81)" style="fill: #998675"/>
      <ellipse cx="77.48" cy="671.77" rx="1.58" ry="0.92" transform="translate(-643.99 444) rotate(-88.81)" style="fill: #998675"/>
      <ellipse cx="81.89" cy="640" rx="0.78" ry="0.46" transform="translate(-607.91 417.3) rotate(-88.81)" style="fill: #998675"/>
      <ellipse cx="80.32" cy="652.51" rx="2.25" ry="1.31" transform="translate(-621.96 427.97) rotate(-88.81)" style="fill: #998675"/>
    </g>
    <g class="cork-holes">
      <circle cx="77.76" cy="365.84" r="1.55" style="fill: #e6e6e6"/>
      <circle cx="70.73" cy="356.4" r="0.52" style="fill: #e6e6e6"/>
      <circle cx="77.22" cy="359.21" r="1.21" style="fill: #e6e6e6"/>
      <circle cx="68.59" cy="344.38" r="1.04" style="fill: #e6e6e6"/>
      <circle cx="64.27" cy="350.96" r="1.24" style="fill: #e6e6e6"/>
      <circle cx="74.83" cy="349.9" r="1.01" style="fill: #e6e6e6"/>
      <circle cx="81.23" cy="351.33" r="1.18" style="fill: #e6e6e6"/>
      <circle cx="60.71" cy="344.47" r="1.06" style="fill: #e6e6e6"/>
      <circle cx="86.12" cy="346.59" r="0.52" style="fill: #e6e6e6"/>
      <circle cx="69.12" cy="364.51" r="0.52" style="fill: #e6e6e6"/>
      <circle cx="65.66" cy="356.73" r="1.51" style="fill: #e6e6e6"/>
    </g>
  </g>
  <g id="flask-fill">
    <path d="M223.83,608.07a43.77,43.77,0,0,0,4.4,11.09,48.84,48.84,0,0,0,37,23.89c2.53.24,25.59,2.18,36.53-12.5,5.65-7.58,6.13-17,6.55-25.35.41-8-.84-12.89,0-27.25.3-5.12.69-8.58,2.41-12.61a28.14,28.14,0,0,1,9.93-12.47c10-6.75,21.45-3.84,24-3.19,12,3,18.34,11.92,20.58,15,3.12,4.36,4.48,8.12,6.85,14.66,5,13.77,2.75,16.28,6.93,23.26,1.3,2.15,6.56,10.63,17.26,14A28.74,28.74,0,0,0,430,603.68c5.75-9.28,5.5-19.72,5.41-27.8-.06-5.83-.69-8.69.09-15A61.84,61.84,0,0,1,438,549.4a52.65,52.65,0,0,1,7.89-15.74,47.62,47.62,0,0,1,20.52-15.47c4.15-1.56,17.33-6.51,30.82-.24,3.27,1.53,13.56,6.31,15.67,15.56,1.71,7.47-3.42,11.27-13.91,31.28a230,230,0,0,0-12.86,28.82c-3.18,8.83-5.77,16.06-7.17,26.26-1.54,11.14-3.16,22.91,3.15,34a37.69,37.69,0,0,0,11.57,12.34c25,17.49,62.73,3.33,69,.86,18.25-7.2,34.33-19.73,40-24.09,11.64-9,14.06-13,22.21-16.17,16.44-6.38,32.41-.21,43.44,3.33,7.77,2.49,50.4,16.18,84.69,10.3,37.26-6.39,68.93-36.6,83.33-68.12a117,117,0,0,0,5-13.12c.06-.19.1-.33.15-.5.77-2.87,1.16-5.09,1.3-6,1-6.29,2.06-11,2.72-16.57a164.92,164.92,0,0,0,.2-33.58A143.52,143.52,0,0,0,843,486.35a121,121,0,0,0-7.34-21.75,117.51,117.51,0,0,0-25-35.27c-29.87-28.6-66.65-31.44-76-32a111.26,111.26,0,0,0-32.34,2.55,106.79,106.79,0,0,0-31.58,13.38s-17,10.28-30.11,26.6c-2,2.47-3.17,4.73-5.77,9.11-4.77,8-10.73,18.23-14.81,32.14A89.91,89.91,0,0,0,615.87,504,130.87,130.87,0,0,0,618,530.52c.11.6,1.32,7.63,2.27,16.53.2,1.85.35,4,.43,6.69a38.49,38.49,0,0,1-1.23,12.09,63,63,0,0,1-2.46,6.72c-2.15,5.36-2.57,5.47-4.26,9.67-2.86,7.11-6.73,14.19-9.35,17.07s-2.63,2.65-4.63,4.86c-4.58,5.06-4.53,6.31-7.66,8.77-2.09,1.64-9.92,8.05-10.6,8.85-5.71,6.75-16.83,9.6-16.63,10.26.38,1.24,39.83-10.46,69.09-18,54.08-14,95.15-16.43,94.91-22.34-.14-3.54-14.73-2.42-31.24-13.55a65.53,65.53,0,0,1-22.27-24.61c-12.84-25.32-3.05-50.53-2-53.21a65.54,65.54,0,0,1,20.35-26.74c3.08-2.11,25.79-17.09,53.53-8.93,2.28.67,23.24,7.18,35.73,27.66a65.3,65.3,0,0,1,8,20.88,62.78,62.78,0,0,1-.21,27c-6.38,26.58-30,39-31.86,40-15.85,8-30.86,6.65-38.07,5.89-11.75-1.24-18.23-4.74-23.86-6.53-30.72-9.75-59,24.21-132.16,52.49-7,2.69-32.79,12.68-41.76,3.23a22.6,22.6,0,0,1-4.86-9.43c-.93-3.73-.17-8.08,1.34-16.79,1.19-6.83,7-19.63,8.38-23.17a82.17,82.17,0,0,1,12.74-21.7c10.79-15.16,16.91-17.6,22.91-29.58,0,0,4.66-9.28,5-19.35a30.05,30.05,0,0,0-.12-3.73,30.93,30.93,0,0,0-1.23-5.61,34.06,34.06,0,0,0-3.33-7.85,33.14,33.14,0,0,0-3.37-4.56,75.23,75.23,0,0,0-8.2-9,42.34,42.34,0,0,0-15.66-8.25,56.61,56.61,0,0,0-17.29-2.65c-7.11-.15-11.92.86-21.46,2.86a79.74,79.74,0,0,0-12.29,3.69c-10.22,3.76-12.78,6.55-24.56,12.37-11.27,5.56-17,8.33-22,7.62-9.58-1.37-15.54-9.92-17.7-13-6.47-9.29-6.84-19.32-7.13-27-.25-6.88.78-5.9,1.17-18.66.12-4,0-10.2-.26-22.47-.19-8.71-.31-8.9-.67-20-.67-21-.64-27.39-3.53-28.31-2.06-.65-3.36,2.23-10.8,5.88a53.92,53.92,0,0,1-9.85,3.66,50,50,0,0,1-20.82,1.27c-3.55-.57-8.13-1.74-9.06-.09-.22.38-.17,1.25-.08,3a32.81,32.81,0,0,0,.3,3.41c.53,3.51,2.22,19.32,2.61,27.37.36,7.41-.18,12.62-1.15,21.95-.91,8.73-1.53,14.93-3.67,22.58-2.73,9.73-4.61,16.43-10,23.16-7.7,9.53-21,17.19-33.74,15.42a24.52,24.52,0,0,1-11.06-4.15c-4.1-2.89-6.39-6.56-9-11.94a122.79,122.79,0,0,1-8.52-23,185.38,185.38,0,0,1-4.39-24.84c-.51-4.09-.75-7-.87-9.4-.89-17.19.25-20.41-.76-36.09-.5-7.81-2-23.79-1.15-27.17A6.1,6.1,0,0,0,278,359a7.22,7.22,0,0,0-1.67-3.11c-3.43-3.71-30.84,2.92-37.75,4.59A73.93,73.93,0,0,0,220,367.88c-5.2,2.94-6,4.25-6.32,5-2.55,5.51,1.43,15.54.89,18.66a19.35,19.35,0,0,0-.22,2.59,10.35,10.35,0,0,0,.09,1.58c.29,2.35.37,4.72.79,7,.63,3.44,1,6.93,1.49,10.41,2.62,19.6,3.43,42.85,4.31,49.16,0,.09.11.75.23,1.64.23,1.68.52,3.94.82,6.62.48,4.27,1,9.73,1.37,16,.11,1.84.26,6.37.57,15.35.71,20.87.63,20.14.85,24.6.41,8.15.67,10.44,1,19.2.17,4.51.28,7.76.28,11.94,0,3.16-.07,8.76-.71,17.49C223.88,596,221.73,599.38,223.83,608.07Z" transform="translate(-48.24 -291.33)" style="fill: #c1d6db"/>
  </g>
  <g id="main-highlight" style="opacity: 0.55">
    <path d="M848.05,498.94a110.9,110.9,0,0,0-16.38-47.74,115.11,115.11,0,0,0-38-37.2c-10.86-6.82-35.89-20.24-69.5-19.41a121.16,121.16,0,0,0-20.34,2.21,136.8,136.8,0,0,0-23.17,6.92c-13.83,5.77-37.44,21.34-52.69,48.64-20.79,37.22-13.7,74.15-11.57,83.68.18,1,.41,2.41.62,4.11a95.48,95.48,0,0,1,.66,10.08c0,4.43-3.86,37.66-34.31,64.93-17.61,15.77-32.6,19.25-36.38,20-8,1.67-17.77,3.71-23.32-1.46-11.47-10.67,4.08-43.48,5.37-46.15,9.07-18.73,27.38-40.64,28.43-41.89A57.25,57.25,0,0,0,568.74,525c.23-.77.35-1.37.5-2,6-24.26-17.61-47.85-42.31-51s-48.77,8.21-70.54,20.33c-4.64,2.59-9.46,5.29-14.76,5.62-9.25.57-17.61-6.47-21.56-14.88a54.8,54.8,0,0,1-4.8-27.27c2.25-20.06,1.05-57.41-5.12-120.77a34.16,34.16,0,0,1-6.49,7.55c-2.9,2.51-5.46,3.85-9.53,6a90.59,90.59,0,0,1-10.44,4.64,95.87,95.87,0,0,1-13.82,3.92c-.31.07-3.36.72-7.4,1.2a33.38,33.38,0,0,1-6.08.16,13,13,0,0,1-3.34-.64c-.4-.15-.8-.27-1.18-.43-.76-.31-1-.49-1.17-.37s-.06.41.12,1.28.29,1.4.3,1.41c14.12,52,5.77,92.86,5.77,92.86-2.61,12.75-4.89,23.13-13.94,32-2.89,2.84-17.29,15.6-31.31,11.69-13.14-3.67-18.05-20.23-25.83-46.21h0c-1.7-14.38-3.31-31.72-4.94-58.45-.82-13.53-1.52-27.54-3.89-27.7-.84-.06-1.3,1.71-4.06,4.53a29.36,29.36,0,0,1-6.73,5c-6.48,3.77-14.83,5.31-18.69,5.94-16,2.64-27.21,4.49-32.74-1.6-1.94-2.13-2.59-4.6-3.45-4.38-1.19.3-1,5.36.29,18,1.14,11,1.71,16.44,2.53,21.17,1.76,10.13,4.21,30.59,7.43,74.65h0c-.23,34.43,5.43,69.27.15,103.29-.58,3.69-2.22,13.63,2,24.47,5.55,14.13,19.74,26.26,36.76,29.15,15.13,2.56,35.32-.71,43.93-14.59,13.5-21.73-4.25-56.24,14.91-73.15,9.12-8,23.74-7.53,33.89-.84s16.21,18.32,18.82,30.22c1.13,5.15,1.7,10.46,3.63,15.37,4.73,12,17.95,20,30.81,19s24.5-10.56,28.56-22.84c3.93-11.9,1.2-24.91,2.41-37.38.28-2.94,7.45-32.89,31.55-40.4,14.92-4.65,35.71-.44,40.91,11.16,5.53,12.3-10.88,23.1-22.71,53.18-4,10.29-21.73,55.23-3.21,78.08,16.15,19.91,54.06,16,74.62,10.11,42.15-12,47.55-42.92,83.14-44.2,17-.61,16,6.06,48.92,11.83,24.79,4.34,48.77,8.54,75.31.5,39.11-11.86,60.14-43.15,65.08-51C855.36,550.76,849.32,511.8,848.05,498.94Zm-76.33,68a61.51,61.51,0,0,1-42.23,17.56c-16.19,0-30.55-6.79-42.24-17.56s-16.8-26.89-17.49-42.4c-.67-14.93,7.13-32,17.49-42.39a61.51,61.51,0,0,1,42.24-17.56c16.18,0,30.55,6.79,42.23,17.56s16.8,26.89,17.5,42.39C789.88,539.49,782.08,556.55,771.72,567Z" transform="translate(-48.24 -291.33)" style="fill: #e6e6e6;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.72"/>
  </g>
  <g id="flask-top">
    <ellipse cx="244.66" cy="366.22" rx="34.12" ry="13.48" transform="translate(-119.99 -231.47) rotate(-12.18)" style="fill: #c1d6db;stroke: #fff;stroke-miterlimit: 10;stroke-width: 1.8367278217544862px;opacity: 0.49"/>
  </g>
  <g id="bubbles" style="opacity: 0.5" class="bubbles">
    <circle cx="226.67" cy="337.85" r="9.92" style="fill: #fff" class="bubble-transparent-slow"/>
    <circle cx="213.35" cy="333.17" r="5.6" style="fill: #fff;opacity: 0.8" class="bubble-slow"/>
    <circle cx="235.27" cy="324.61" r="11.2" style="fill: #fff;opacity: 0.71" class="bubble-transparent"/>
    <circle cx="216.75" cy="320.09" r="11.2" style="fill: #fff;opacity: 0.9" class="bubble-slow"/>
    <circle cx="246.47" cy="318.52" r="9.14" style="fill: #fff" class="bubble-transparent-slow"/>
    <ellipse cx="238.13" cy="321.54" rx="5.99" ry="5.4" style="fill: #fff;opacity: 0.92" class="bubble-transparent"/>
    <circle cx="246.16" cy="304.03" r="9.38" style="fill: #fff" class="bubble-transparent"/>
    <circle cx="228.26" cy="307.29" r="11.2" style="fill: #fff;opacity: 0.89" class="bubble-transparent"/>
    <circle cx="197.59" cy="329.22" r="10.7" style="fill: #fff;opacity: 0.79" class="bubble"/>
    <circle cx="194.55" cy="315.95" r="8.66" style="fill: #fff;opacity: 0.66" class="bubble-slow"/>
    <circle cx="198.12" cy="302.41" r="9.63" style="fill: #fff" class="bubble"/>
    <circle cx="211.67" cy="302.02" r="11.2" style="fill: #fff;opacity: 0.76" class="bubble"/>
    <circle cx="227.15" cy="295.31" r="8.21" style="fill: #fff;opacity: 0.6" class="bubble-transparent"/>
  </g>
  <g id="highlights">
    <path d="M738,414.25c17.9-2.71,32.29,5,40,9.22,40.54,22.34,56.9,70.24,54.28,71.92-1.26.81-6.39-9.32-23.89-26.16-16.89-16.24-30.92-29.74-50-34.92-30-8.13-54.25,9.27-56.6,4.25C699.81,434.19,716.59,417.51,738,414.25Z" transform="translate(-48.24 -291.33)" style="fill: #fff;opacity: 0.33"/>
    <path d="M514.21,489.14c.24-1.52,8.95-2.82,17.7-.66C542,491,555.74,499,556.68,510.85c.76,9.47-6.91,18.37-9.2,17.76-1.62-.43.15-5.41-2.12-13.16a36.93,36.93,0,0,0-9.2-15.13C526.52,491.05,513.92,491,514.21,489.14Z" transform="translate(-48.24 -291.33)" style="fill: #fff;opacity: 0.31"/>
    <circle cx="731.24" cy="283.89" r="0.84" style="fill: gray"/>
    <circle cx="436.69" cy="203.96" r="0.84" style="fill: gray"/>
    <circle cx="622.31" cy="283.06" r="0.84" style="fill: gray"/>
    <circle cx="758.47" cy="240.04" r="0.84" style="fill: gray"/>
    <circle cx="749.22" cy="266.16" r="0.84" style="fill: gray"/>
    <path d="M226.84,609.63c-.92,1.1,4.68,11.85,13.5,20,3.27,3,19.38,17.85,38.08,12.56,17.52-5,28.12-25,26.51-27.41-1.48-2.24-12.59,12-32.29,13.71-14.88,1.28-27-5.24-28.92-6.28C233.31,616.44,227.69,608.62,226.84,609.63Z" transform="translate(-48.24 -291.33)" style="fill: #fff;opacity: 0.17"/>
    <path d="M380.74,600.63c2,3.73,3.9,7.2,7.9,10a22.82,22.82,0,0,0,11.66,3.76c2.61.24,16.12,1.44,25-8.27,8.64-9.43,7.75-23.49,6.08-24-1.1-.35-2.21,5.24-8.34,10.28a30.35,30.35,0,0,1-12.22,5.83c-3.58.95-11.73,3.11-19.82-.05-9.36-3.66-12.84-12.18-14.42-11.24S377.91,595.41,380.74,600.63Z" transform="translate(-48.24 -291.33)" style="fill: #fff;opacity: 0.17"/>
    <path d="M485.16,611.42c-1.6-.07-4.46,10.18-3.71,21.05.34,5,1.14,16.6,9.55,26.31,11.77,13.58,29.94,13.65,36.07,13.68,21,.08,37.76-11.35,37.13-13.16s-16.81,7.21-38.19,3.16c-4.36-.83-23.52-4.45-33.42-19.47C483.1,628.6,487.23,611.51,485.16,611.42Z" transform="translate(-48.24 -291.33)" style="fill: #fff;opacity: 0.17"/>
    <path d="M670.56,625.79c-.32,1.94,19.41,7.8,40.87,10.52,20.28,2.57,34.14,4.32,50.78-.3,34.54-9.6,54.72-39.32,53.19-41.17-1.06-1.29-12.54,11.16-36.66,20.73-19.79,7.86-37,9.37-51.39,10.52C693.21,628.83,670.89,623.74,670.56,625.79Z" transform="translate(-48.24 -291.33)" style="fill: #fff;opacity: 0.17"/>
    <path d="M279.9,485.3c-.92,1.1,4.67,11.85,13.5,20,3.27,3,19.38,17.85,38.08,12.56,17.52-5,28.11-25,26.51-27.4-1.48-2.25-12.59,12-32.29,13.7-14.88,1.28-27-5.24-28.92-6.28C286.37,492.11,280.75,484.3,279.9,485.3Z" transform="translate(-48.24 -291.33)" style="fill: #fff;opacity: 0.17"/>
  </g>
  <g id="bubbles-small" class="bubbles-small">
    <circle cx="186.72" cy="161.09" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="213.27" cy="128.07" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="178.5" cy="111.92" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="220.34" cy="118.49" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="206.26" cy="180.31" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="351.26" cy="216.31" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="208.03" cy="271.89" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="456.89" cy="340.31" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="490.26" cy="246.31" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="476.3" cy="219.84" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="598.77" cy="215.74" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="629.46" cy="165" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="653.44" cy="320.09" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="694.77" cy="314.37" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="769.01" cy="265.32" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="777.26" cy="229.65" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="455.12" cy="290.74" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="643.25" cy="131.61" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="362.23" cy="288.87" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="242.35" cy="306.97" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="750.06" cy="294.87" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="728.63" cy="312.6" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="337.23" cy="274.08" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
    <circle cx="767.24" cy="287.1" r="1.77" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px;opacity: 0.62"/>
  </g>
 </svg>
</div>
            
          
!
            
              body {
  background-color: #222222;
  margin: 0;
  padding: 0;
}

.field {
  width: 50%;
  padding-top: 5%;
  margin: 0 auto;
}

.main-image {
  width: 100%;
  height: auto;
}

.cork-rotated {
  animation-name: cork;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.cork-holes {
  animation-name: cork-holes;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.cork-shadow {
  animation-name: cork-shadow;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes cork {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes cork-holes {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes cork-shadow {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}


.bubble-slow {
  animation-name: bubble;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.bubble {
  animation-name: bubble;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes bubble {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(-70%);
    opacity: 0;
  }
}

.bubble-transparent {
  animation-name: bubble-transparent;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.bubble-transparent-slow {
  animation-name: bubble-transparent;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes bubble-transparent {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-20%);
    opacity: 0;
  }
}

.bubbles-small {
  animation-name: bubble-small;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes bubble-small {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.5;
  }
    100% {
    transform: translateY(-25px);
    opacity: 0;
  }
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console