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="box"></div>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Exo", Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  background: linear-gradient(to bottom, #0b0a27, #31304c 50%);
}

.box {
  width: 350px;
  height: 350px;
  background-image: radial-gradient(
      circle at 45% 67%,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(255, 255, 255, 0.02) 3%,
      transparent 3%,
      transparent 100%
    ),
    radial-gradient(
      circle at 16% 36%,
      rgba(255, 255, 255, 0.01) 0%,
      rgba(255, 255, 255, 0.01) 3%,
      transparent 3%,
      transparent 100%
    ),
    radial-gradient(
      circle at 69% 64%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 88% 23%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 43% 26%,
      rgba(255, 255, 255, 0.01) 0%,
      rgba(255, 255, 255, 0.01) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 66% 45%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 71% 41%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 89% 76%,
      rgba(255, 255, 255, 0.01) 0%,
      rgba(255, 255, 255, 0.01) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 70% 62%,
      rgba(255, 255, 255, 0.01) 0%,
      rgba(255, 255, 255, 0.01) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 88% 20%,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(255, 255, 255, 0.02) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 57% 91%,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(255, 255, 255, 0.02) 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 98% 4%,
      rgba(255, 255, 255, 0.01) 0%,
      rgba(255, 255, 255, 0.01) 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 28% 61%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 48% 96%,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(255, 255, 255, 0.02) 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 13% 61%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 44% 44%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 20% 19%,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(255, 255, 255, 0.02) 5%,
      transparent 5%,
      transparent 100%
    ),
    linear-gradient(135deg, rgb(76, 234, 243), rgb(92, 31, 127));
  animation: MorphingAnimation 5s linear alternate infinite;
}

@keyframes MorphingAnimation {
  0% {
    clip-path: path(
      "M183.40000015375514,25.900000312099994C183.40000015375514,25.900000312099994,222,104.10000000076495,222,104.10000000076495C226.6,113.30000000076495,235.4,119.70000000076494,245.5,121.20000000076494C245.5,121.20000000076494,333.60011850847275,134.00001720360777,333.60011850847275,134.00001720360777C340.1000699036153,134.90001010402185,342.70005051628453,142.99995057672447,338.0000857411531,147.59991644409982C338.0000857411531,147.59991644409982,273.6,210.40000027382592,273.6,210.40000027382592C266.6,217.20000027382594,263.40000000000003,227.00000027382592,265.1,236.6000002738259C265.1,236.6000002738259,280.5945414942853,326.9683214460172,280.5945414942853,326.9683214460172C281.59678338056096,332.78128539708973,275.4831371162741,337.1911302020395,270.27153779163035,334.4849893831104C270.27153779163035,334.4849893831104,186.20000000000002,290.29990280050964,186.20000000000002,290.29990280050964C179.4,286.6999028005096,171.3,286.6999028005096,164.50000000000003,290.29990280050964C164.50000000000003,290.29990280050964,69.24097013032006,340.3326423632227,69.24097013032006,340.3326423632227C68.68029747402416,340.6544955077781,67.87052391928385,340.1429237499265,67.93881951174058,339.416183828001C67.93881951174058,339.416183828001,86.12767787760481,233.20000000000073,86.12767787760481,233.20000000000073C87.42767787760489,225.70000000000024,84.92767787760474,218.09999999999977,79.52767787760439,212.8999999999994C79.52767787760439,212.8999999999994,43.12767787702422,177.39999999943421,43.12767787702422,177.39999999943421C25.92767787726208,160.59999999966567,35.42767787713136,131.40000000006853,59.2276778768035,128.0000000001178C59.2276778768035,128.0000000001178,105.22767787760709,121.29999999999995,105.22767787760709,121.29999999999995C115.4276778776071,119.79999999999995,124.22767787760709,113.39999999999995,128.7276778776071,104.19999999999995C128.7276778776071,104.19999999999995,167.32767772385193,26.000000311334986,167.32767772385193,26.000000311334986C170.79999990897085,19.300000184353184,180.20000009102915,19.300000184353184,183.40000015375514,25.900000312099994C183.40000015375514,25.900000312099994,183.40000015375514,25.900000312099994,183.40000015375514,25.900000312099994"
    );
  }
  20% {
    clip-path: path(
      "M203.4993632058084,66.69871341581697C203.4993632058084,66.69871341581697,222.0001646134645,104.20033789079555,222.0001646134645,104.20033789079555C226.60006497899914,113.40012562606502,235.39986137813517,119.79998267226689,245.49962745373824,121.2999480168007C245.49962745373824,121.2999480168007,289.6182331273968,127.71482482139365,289.6182331273968,127.71482482139365C314.156080795958,131.2501805559095,323.9508984476141,161.44106182624444,306.17894101155974,178.70980510461553C306.17894101155974,178.70980510461553,273.7092770292975,210.29393279645245,273.7092770292975,210.29393279645245C266.6417797179491,217.15982302895927,263.4096381411165,227.05624775945702,265.1257089295328,236.75106541111316C265.1257089295328,236.75106541111316,266.6999956680667,246,266.6999956680667,246C273.3999956680667,284.9,232.49999566806673,314.6,197.49999566806673,296.2C197.49999566806673,296.2,197.49999566806673,296.2,197.49999566806673,296.2C183.59999566806673,288.9,166.99999566806673,288.9,153.09999566806673,296.2C153.09999566806673,296.2,153.09999566806673,296.2,153.09999566806673,296.2C118.09999566806671,314.59999999999997,77.29999566806671,284.9,83.89999566806671,246C83.89999566806671,246,83.89999566806671,246,83.89999566806671,246C86.59999566806671,230.5,81.39999566806671,214.8,70.1999956680667,203.8C70.1999956680667,203.8,70.1999956680667,203.8,70.1999956680667,203.8C41.899995668066715,176.20000000000002,57.49999566806671,128.20000000000002,96.59999566806671,122.50000000000001C96.59999566806671,122.50000000000001,105.1003638823952,121.2999480168007,105.1003638823952,121.2999480168007C115.30013428993156,119.7999826722669,124.09993502100085,113.40012562606502,128.59982672266895,104.20033789079557C128.59982672266895,104.20033789079557,147.10062813032505,66.69871341581698,147.10062813032505,66.69871341581698C158.90037687819503,43.399237579743385,192.09962312180497,43.399237579743385,203.4993632058084,66.69871341581697C203.4993632058084,66.69871341581697,203.4993632058084,66.69871341581697,203.4993632058084,66.69871341581697"
    );
  }
  40% {
    clip-path: path(
      "M218.0202107407407,96.03577175925923C218.0202107407407,96.03577175925923,218.2196321604938,96.43978095679013,218.2196321604938,96.43978095679013C225.10774953703702,110.51446580246913,238.58346765432097,120.19741682098766,254.05556932098764,122.4932837345679C254.05556932098764,122.4932837345679,254.51072546294245,122.55941311728097,254.51072546294245,122.55941311728097C293.4423021913459,128.23461459876367,308.9751395370283,176.0284769135888,280.7970655864049,203.50965067902683C280.7970655864049,203.50965067902683,280.4643521296296,203.83409796296291,280.4643521296296,203.83409796296291C269.2860508333333,214.71291589506168,264.0963835493827,230.48191774691352,266.79121719135804,245.95143623456786C266.79121719135804,245.95143623456786,266.8712957416512,246.4184750052836,266.8712957416512,246.4184750052836C273.5418475005365,285.14746855250405,232.82163676207182,314.7167596928374,197.97559423314226,296.39787151484927C197.97559423314226,296.39787151484927,197.54110351851855,296.16951848767053,197.54110351851855,296.16951848767053C183.67778466049384,288.8886340123619,167.12169870370371,288.8886340123619,153.25837984567903,296.16951848767053C153.25837984567903,296.16951848767053,152.82079066611837,296.39942071494147,152.82079066611837,296.39942071494147C117.97629748986813,314.71779254836787,77.35711938501989,285.1495342081231,83.92767125023121,246.422089958075C83.92767125023121,246.422089958075,84.01136599686755,245.93387061728396,84.01136599686755,245.93387061728396C86.704133095633,230.4752014814815,81.51808226229966,214.8170489814815,70.34804713884287,203.8470138580247C70.34804713884287,203.8470138580247,70.0015421609728,203.50930107416173,70.0015421609728,203.50930107416173C41.82361485668548,176.02827043554768,57.35637125359035,128.23569127768405,96.28774502346477,122.56051912546856C96.28774502346477,122.56051912546856,96.74443068822559,122.4943181793435,96.74443068822559,122.4943181793435C112.21704899069472,120.19845126576325,125.59328374378114,110.51550024724473,132.58036784871942,96.4408154015657C132.58036784871942,96.4408154015657,132.7797892684725,96.0368062040348,132.7797892684725,96.0368062040348C150.30642697530863,60.78456287037035,200.69357302469137,60.78456287037035,218.0202107407407,96.03577175925923C218.0202107407407,96.03577175925923,218.0202107407407,96.03577175925923,218.0202107407407,96.03577175925923"
    );
  }
  60% {
    clip-path: path(
      "M203.41586329570876,66.53000951581973C203.41586329570876,66.53000951581973,222.02174962423857,104.2446439655423,222.02174962423857,104.2446439655423C226.6085853779889,113.41659839744521,235.381684526957,119.79771056586962,245.45077716619696,121.29313169760889C245.45077716619696,121.29313169760889,253.9994276414674,122.50000000000001,253.9994276414674,122.50000000000001C293.09942764146746,128.20000000000002,308.6994276414674,176.20000000000002,280.3994276414674,203.8C280.3994276414674,203.8,280.3994276414674,203.8,280.3994276414674,203.8C269.1994276414674,214.70000000000002,263.99942764146743,230.5,266.6994276414674,246C266.6994276414674,246,266.6994276414674,246,266.6994276414674,246C273.3994276414674,284.9,232.4994276414674,314.6,197.4994276414674,296.2C197.4994276414674,296.2,197.4994276414674,296.2,197.4994276414674,296.2C183.5994276414674,288.9,166.9994276414674,288.9,153.0994276414674,296.2C153.0994276414674,296.2,153.0994276414674,296.2,153.0994276414674,296.2C118.0994276414674,314.59999999999997,77.2994276414674,284.9,83.8994276414674,246C83.8994276414674,246,83.8994276414674,246,83.8994276414674,246C86.5994276414674,230.5,81.3994276414674,214.8,70.1994276414674,203.8C70.1994276414674,203.8,70.1994276414674,203.8,70.1994276414674,203.8C41.8994276414674,176.20000000000002,57.49942764146739,128.20000000000002,96.5994276414674,122.50000000000001C96.5994276414674,122.50000000000001,105.14807811673785,121.29313169760889,105.14807811673785,121.29313169760889C115.31774311451039,119.79771056586964,124.09141462201109,113.41659839744521,128.57710565869624,104.24464396554231C128.57710565869624,104.24464396554231,147.18299198722605,66.53000951581973,147.18299198722605,66.53000951581973C158.94979519233564,43.29926489826353,192.05020480766436,43.29926489826353,203.41586329570876,66.53000951581973C203.41586329570876,66.53000951581973,203.41586329570876,66.53000951581973,203.41586329570876,66.53000951581973"
    );
  }
  80% {
    clip-path: path(
      "M210.55225962962925,80.90673287036961C210.55225962962925,80.90673287036961,219.03509808641974,98.0921724382716,219.03509808641974,98.0921724382716C225.42964398148146,111.11533543209876,237.89675950617283,120.09011867283951,252.2100411728395,122.21430854938271C252.2100411728395,122.21430854938271,271.5711310181451,125.02727052463715,271.5711310181451,125.02727052463715C303.506868487434,129.67240978391877,316.24995398132234,168.90387987669894,293.1363526231866,191.4493388274238C293.1363526231866,191.4493388274238,278.9836376851852,205.25043351851767,278.9836376851852,205.25043351851767C268.7066408333333,215.24940663580162,263.9461661419753,229.73083070987568,266.42640348765434,243.93423104938185C266.42640348765434,243.93423104938185,269.83272464823864,263.8007751079977,269.83272464823864,263.8007751079977C275.280077510966,295.4266312057767,242.02781792785888,319.5666360178931,213.5767450661684,304.6169097116677C213.5767450661684,304.6169097116677,195.09470574074075,294.9034003398376,195.09470574074075,294.9034003398376C182.75502058641976,288.41652216082525,168.02300314814818,288.41652216082525,155.6833179938272,294.9034003398376C155.6833179938272,294.9034003398376,137.06945581010908,304.68282030780983,137.06945581010908,304.68282030780983C108.68429747067648,319.61057784264773,75.57597400224255,295.5145134285127,80.92332960089101,263.95457042489C80.92332960089101,263.95457042489,84.48347807674776,243.18703802469136,84.48347807674776,243.18703802469136C86.87581036069838,229.44513925925926,82.26916952736505,215.52521675925928,72.34379292242677,205.799840154321C72.34379292242677,205.799840154321,57.60442462696135,191.434467598808,57.60442462696135,191.434467598808C34.49706120029256,168.8950968691941,47.236703356011255,129.71820874249616,79.16380752815047,125.07431706950808C79.16380752815047,125.07431706950808,98.5899590644021,122.25831098369777,98.5899590644021,122.25831098369777C112.92521699650085,120.13412110715456,125.31430878662431,111.15933786641381,131.76490215082185,98.13617487258665C131.76490215082185,98.13617487258665,140.24774060761234,80.95073530468464,140.24774060761234,80.95073530468464C154.72711067901255,51.83589731481436,196.27288932098745,51.83589731481436,210.55225962962925,80.90673287036961C210.55225962962925,80.90673287036961,210.55225962962925,80.90673287036961,210.55225962962925,80.90673287036961"
    );
  }
  100% {
    clip-path: path(
      "M192.13870962962966,43.603420370370415C192.13870962962966,43.603420370370415,221.04577308641976,102.1664349382716,221.04577308641976,102.1664349382716C226.22333148148147,112.59688543209876,236.20355950617284,119.8255561728395,247.6595661728395,121.52644604938271C247.6595661728395,121.52644604938271,313.6365685185375,131.1122080246941,313.6365685185375,131.1122080246941C328.3228309876655,133.21754728395223,334.1872914814896,151.33692987653532,323.5610401234705,161.71251382714715C323.5610401234705,161.71251382714715,275.3326751851852,208.74265851851854,275.3326751851852,208.74265851851854C267.27800333333334,216.5722191358025,263.5757786419753,227.87889320987657,265.5268909876543,238.96045604938274C265.5268909876543,238.96045604938274,277.1346496274613,306.65989998741554,277.1346496274613,306.65989998741554C279.5659899987222,320.7717186345408,264.7272803636715,331.52486098413067,252.0441324578291,324.88239715453074C252.0441324578291,324.88239715453074,189.06268074074075,291.7815628394675,189.06268074074075,291.7815628394675C180.47978308641976,287.2524471604551,170.24532814814816,287.2524471604551,161.66243049382717,291.7815628394675C161.66243049382717,291.7815628394675,98.2316351548966,325.1070692298904,98.2316351548966,325.1070692298904C85.77315807788007,331.6746419144598,71.18423118622466,321.0712809483785,73.51557068874337,307.1841335834134C73.51557068874337,307.1841335834134,85.64755276404084,236.41423802469134,85.64755276404084,236.41423802469134C87.29911004799145,226.90533925925925,84.12110671465813,217.27132925925926,77.26465510971985,210.61487765432096C77.26465510971985,210.61487765432096,27.098590846864063,161.7216764279507,27.098590846864063,161.7216764279507C16.468496116024674,151.3423413454663,22.335078151645547,133.36618717646164,37.02665984875689,131.26007924263945C37.02665984875689,131.26007924263945,103.14043375169517,121.67619283326437,103.14043375169517,121.67619283326437C114.67132918379393,119.97530295672117,124.62644597391738,112.74663221598041,129.75422683811493,102.31618172215325C129.75422683811493,102.31618172215325,158.66129029490503,43.75316715425206,158.66129029490503,43.75316715425206C165.62708567901234,29.77138481481484,185.37291432098766,29.77138481481484,192.13870962962966,43.603420370370415C192.13870962962966,43.603420370370415,192.13870962962966,43.603420370370415,192.13870962962966,43.603420370370415"
    );
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console