Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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="container" onclick="this.classList.toggle('mute');">
  <div class="note">
    <div class="fill fill1"></div>
  </div>
  <svg class="strike-through" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M3.312 39.517L96.688 63.56" fill="#fff"
          fill-rule="evenodd" stroke="#fff" stroke-width="26.569" /><path
            d="M3.312 39.517L96.688 63.56" fill="none" stroke="#cac9d1"
            stroke-width="8.856" />
          </svg>
</div>
<div class="container" onclick="this.classList.toggle('mute');">
  <div class="mic">
    <div class="fill fill2"></div>
  </div>
  <svg class="strike-through" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M3.312 39.517L96.688 63.56"
              fill="#fff"
              fill-rule="evenodd" stroke="#fff" stroke-width="26.569" /><path
                d="M3.312 39.517L96.688 63.56" fill="none" stroke="#cac9d1"
                stroke-width="8.856" />
              </svg>
</div>
<div class="container" onclick="this.classList.toggle('mute');">
  <div class="notifications">
    <div class="fill fill3"></div>
  </div>
  <svg class="strike-through" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M3.312 39.517L96.688 63.56"
                  fill="#fff"
                  fill-rule="evenodd" stroke="#fff" stroke-width="26.569" /><path
                    d="M3.312 39.517L96.688 63.56" fill="none" stroke="#cac9d1"
                    stroke-width="8.856" />
                  </svg>
</div>
<div class="container" onclick="this.classList.toggle('mute');">
  <div class="bulb">
    <div class="fill fill4"></div>
  </div>
  <svg class="strike-through" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M3.312 39.517L96.688 63.56"
                      fill="#fff"
                      fill-rule="evenodd" stroke="#fff" stroke-width="26.569" /><path
                        d="M3.312 39.517L96.688 63.56" fill="none"
                        stroke="#cac9d1"
                        stroke-width="8.856" />
                      </svg>
</div>
              
            
!

CSS

              
                body {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  margin: 0;
}
.container {
  cursor: pointer;
  margin-right: 20px;
  height: 50px;
  position: relative;
  width: 50px;
}
.container:last-child {
  margin: 0;
}
.note {
  clip-path: polygon(
    26.431075% 80.222171%,
    22.648927% 80.453012%,
    19.147112% 81.117459%,
    15.992733% 82.173399%,
    13.252895% 83.578721%,
    10.994702% 85.29131%,
    9.2852592% 87.269055%,
    8.1916699% 89.469842%,
    7.7810388% 91.851559%,
    8.0508746% 94.089726%,
    8.8934635% 95.910727%,
    10.218076% 97.348745%,
    11.933982% 98.437963%,
    13.950452% 99.212563%,
    16.176756% 99.706727%,
    18.522165% 99.954638%,
    20.895949% 99.990479%,
    23.448573% 99.734173%,
    26.266535% 99.094015%,
    29.16315% 98.086742%,
    31.951733% 96.729093%,
    34.4456% 95.037806%,
    36.458066% 93.029618%,
    37.802448% 90.721267%,
    38.292061% 88.129492%,
    38.292061% 44.63922%,
    68.38786% 38.313359%,
    67.597125% 73.644829%,
    63.664543% 73.903648%,
    60.208982% 74.640356%,
    57.256346% 75.795327%,
    54.832544% 77.308939%,
    52.96348% 79.121566%,
    51.675061% 81.173584%,
    50.993193% 83.405369%,
    50.943783% 85.757297%,
    51.477166% 87.951159%,
    52.479368% 89.761524%,
    53.879824% 91.207934%,
    55.607972% 92.309931%,
    57.59325% 93.087057%,
    59.765094% 93.558852%,
    62.052942% 93.744858%,
    64.38623% 93.664618%,
    66.885553% 93.222151%,
    69.604869% 92.33078%,
    72.373659% 91.024004%,
    75.021407% 89.335319%,
    77.377593% 87.298223%,
    79.271701% 84.946212%,
    80.533211% 82.312784%,
    80.991608% 79.431436%,
    80.991608% 9.8469948%,
    25.640349% 21.707981%
  );
  height: 100%;
  width: 100%;
}
.mic {
  clip-path: polygon(
    50% 77.330508%,
    50% 78.164194%,
    50% 78.997881%,
    50% 79.831568%,
    50% 80.665254%,
    50% 81.498941%,
    50% 82.332627%,
    50% 83.166313%,
    50% 84%,
    42.507619% 83.05381%,
    36.939162% 80.501307%,
    33.009544% 76.771586%,
    30.433681% 72.293745%,
    28.926489% 67.496883%,
    28.202885% 62.810095%,
    27.977784% 58.66248%,
    27.966102% 55.483135%,
    27.965149% 55.329467%,
    27.928784% 54.924343%,
    27.80675% 54.351581%,
    27.548789% 53.695%,
    27.104646% 53.038418%,
    26.424062% 52.465656%,
    25.456779% 52.060532%,
    24.152542% 51.906864%,
    22.848305% 52.060532%,
    21.881023% 52.465656%,
    21.200439% 53.038418%,
    20.756295% 53.695%,
    20.498335% 54.351581%,
    20.376301% 54.924343%,
    20.339936% 55.329467%,
    20.338983% 55.483135%,
    21.024942% 66.562214%,
    22.921624% 75.162765%,
    25.787234% 81.593414%,
    29.37998% 86.162785%,
    33.458067% 89.179504%,
    37.779702% 90.952196%,
    42.103091% 91.789487%,
    46.186441% 92%,
    46.162885% 93.564401%,
    46.139728% 94.980657%,
    46.188234% 96.230862%,
    46.379668% 97.29711%,
    46.785297% 98.161494%,
    47.476385% 98.806109%,
    48.524198% 99.213048%,
    50% 99.364407%,
    51.494009% 99.262844%,
    52.589822% 98.924038%,
    53.348773% 98.349612%,
    53.832196% 97.54119%,
    54.101425% 96.500395%,
    54.217794% 95.228849%,
    54.242637% 93.728176%,
    54.237288% 92%,
    60.561972% 91.210362%,
    65.858507% 88.966627%,
    70.18387% 85.45656%,
    73.595038% 80.867927%,
    76.148987% 75.388494%,
    77.902694% 69.206026%,
    78.913136% 62.50829%,
    79.237288% 55.483051%,
    79.234292% 55.329383%,
    79.192965% 54.924259%,
    79.064803% 54.351497%,
    78.801298% 53.694916%,
    78.353944% 53.038334%,
    77.674236% 52.465572%,
    76.713666% 52.060448%,
    75.423729% 51.90678%,
    74.133792% 52.060448%,
    73.173222% 52.465572%,
    72.493514% 53.038334%,
    72.04616% 53.694915%,
    71.782655% 54.351497%,
    71.654493% 54.924259%,
    71.613166% 55.329383%,
    71.61017% 55.483051%,
    71.646008% 56.741644%,
    71.540096% 60.052842%,
    70.972292% 64.719776%,
    69.622457% 70.045574%,
    67.170451% 75.333366%,
    63.296133% 79.886281%,
    57.679363% 83.007449%,
    50% 84%,
    50% 83.166313%,
    50% 82.332627%,
    50% 81.498941%,
    50% 80.665254%,
    50% 79.831568%,
    50% 78.997881%,
    50% 78.164194%,
    50% 77.330508%,
    55.710048% 76.769077%,
    59.988175% 75.108009%,
    63.041068% 72.382138%,
    65.075412% 68.626301%,
    66.297893% 63.875333%,
    66.915197% 58.16407%,
    67.13401% 51.527347%,
    67.161017% 44%,
    67.122712% 36.469376%,
    66.874571% 29.824013%,
    66.216753% 24.100534%,
    64.94942% 19.335563%,
    62.872731% 15.565723%,
    59.786847% 12.827637%,
    55.491929% 11.157928%,
    49.788136% 10.59322%,
    44.103718% 11.11758%,
    39.859636% 12.689302%,
    36.845118% 15.306346%,
    34.849393% 18.966671%,
    33.661689% 23.668239%,
    33.071234% 29.409009%,
    32.867256% 36.186943%,
    32.838983% 44%,
    32.854292% 51.80978%,
    33.060711% 58.579073%,
    33.666944% 64.307628%,
    34.881697% 68.995193%,
    36.913674% 72.641515%,
    39.97158% 75.246343%,
    44.26412% 76.809425%
  );
  height: 100%;
  width: 100%;
}
.notifications {
  clip-path: polygon(
    45% 23.43704%,
    42.039633% 23.733486%,
    39.495976% 24.583125%,
    37.33753% 25.926405%,
    35.532796% 27.703777%,
    34.050275% 29.855691%,
    32.858469% 32.322596%,
    31.925879% 35.044942%,
    31.221007% 37.963179%,
    30.712353% 41.017757%,
    30.368418% 44.149126%,
    30.157705% 47.297734%,
    30.048714% 50.404033%,
    30.009947% 53.408471%,
    30.009905% 56.2515%,
    30.017089% 58.873567%,
    30% 61.215124%,
    29.463565% 61.49333%,
    28.995203% 61.826887%,
    28.590296% 62.205681%,
    28.244227% 62.619598%,
    27.952378% 63.058523%,
    27.710132% 63.512344%,
    27.512872% 63.970944%,
    27.355979% 64.424211%,
    27.234838% 64.862031%,
    27.144829% 65.27429%,
    27.081337% 65.650872%,
    27.039742% 65.981665%,
    27.015429% 66.256555%,
    27.003779% 66.465427%,
    27.000175% 66.598167%,
    27% 66.644661%,
    27.010395% 67.733432%,
    27.062767% 68.720699%,
    27.188896% 69.610774%,
    27.42056% 70.407972%,
    27.789539% 71.116605%,
    28.327612% 71.740987%,
    29.066559% 72.285432%,
    30.038159% 72.754254%,
    31.274192% 73.151765%,
    32.806436% 73.48228%,
    34.666672% 73.750112%,
    36.886679% 73.959575%,
    39.498236% 74.114981%,
    42.533122% 74.220645%,
    46.023117% 74.28088%,
    50% 74.3%,
    50% 74.609671%,
    50% 74.919341%,
    50% 75.229012%,
    50% 75.538683%,
    50% 75.848353%,
    50% 76.158024%,
    50% 76.467695%,
    50% 76.777366%,
    50% 77.087036%,
    50% 77.396707%,
    50% 77.706378%,
    50% 78.016048%,
    50% 78.325719%,
    50% 78.63539%,
    50% 78.94506%,
    50% 79.254731%,
    49.127541% 79.247528%,
    48.269358% 79.22717%,
    47.431247% 79.195538%,
    46.619006% 79.154509%,
    45.838431% 79.105965%,
    45.095319% 79.051782%,
    44.395467% 78.993842%,
    43.744672% 78.934022%,
    43.148731% 78.874202%,
    42.613441% 78.816262%,
    42.144599% 78.762079%,
    41.748002% 78.713535%,
    41.429447% 78.672506%,
    41.19473% 78.640874%,
    41.049649% 78.620516%,
    41% 78.613313%,
    40.985078% 78.711842%,
    40.953589% 78.990294%,
    40.925448% 79.422965%,
    40.920567% 79.984153%,
    40.958861% 80.648153%,
    41.060244% 81.389263%,
    41.244631% 82.18178%,
    41.531935% 83%,
    41.942071% 83.81822%,
    42.494953% 84.610737%,
    43.210495% 85.351847%,
    44.10861% 86.015847%,
    45.209214% 86.577035%,
    46.53222% 87.009706%,
    48.097542% 87.288158%,
    49.925095% 87.386687%,
    51.75433% 87.288158%,
    53.324407% 87.009706%,
    54.654801% 86.577035%,
    55.764987% 86.015847%,
    56.674441% 85.351847%,
    57.402638% 84.610737%,
    57.969052% 83.81822%,
    58.393159% 83%,
    58.694435% 82.18178%,
    58.892355% 81.389263%,
    59.006393% 80.648153%,
    59.056026% 79.984153%,
    59.060727% 79.422965%,
    59.039973% 78.990294%,
    59.013239% 78.711842%,
    59% 78.613313%,
    58.950428% 78.620516%,
    58.805556% 78.640874%,
    58.57115% 78.672506%,
    58.252977% 78.713535%,
    57.856804% 78.762079%,
    57.388395% 78.816262%,
    56.853518% 78.874202%,
    56.25794% 78.934022%,
    55.607425% 78.993842%,
    54.907742% 79.051782%,
    54.164655% 79.105965%,
    53.383932% 79.154509%,
    52.571339% 79.195538%,
    51.732641% 79.22717%,
    50.873606% 79.247528%,
    50% 79.254731%,
    50% 78.94506%,
    50% 78.63539%,
    50% 78.325719%,
    50% 78.016048%,
    50% 77.706378%,
    50% 77.396707%,
    50% 77.087036%,
    50% 76.777366%,
    50% 76.467695%,
    50% 76.158024%,
    50% 75.848353%,
    50% 75.538683%,
    50% 75.229012%,
    50% 74.919341%,
    50% 74.609671%,
    50% 74.3%,
    53.961509% 74.248641%,
    57.440092% 74.100909%,
    60.46712% 73.866324%,
    63.073962% 73.554403%,
    65.291987% 73.174665%,
    67.152565% 72.736628%,
    68.687064% 72.249812%,
    69.926855% 71.723733%,
    70.903307% 71.167912%,
    71.647789% 70.591866%,
    72.19167% 70.005113%,
    72.566321% 69.417173%,
    72.80311% 68.837564%,
    72.933406% 68.275803%,
    72.98858% 67.741411%,
    73% 67.243904%,
    73.00142% 67.190471%,
    73.002178% 67.03785%,
    72.997016% 66.797561%,
    72.98068% 66.48112%,
    72.947915% 66.100048%,
    72.893463% 65.665862%,
    72.81207% 65.19008%,
    72.698481% 64.684222%,
    72.547439% 64.159805%,
    72.353689% 63.628348%,
    72.111974% 63.10137%,
    71.817041% 62.590388%,
    71.463632% 62.106921%,
    71.046493% 61.662488%,
    70.560368% 61.268607%,
    70% 60.936796%,
    70.017681% 58.60741%,
    70.050382% 56.000889%,
    70.067596% 53.17621%,
    70.038811% 50.192348%,
    69.933519% 47.10828%,
    69.721209% 43.982981%,
    69.371372% 40.875428%,
    68.853497% 37.844597%,
    68.137076% 34.949463%,
    67.191598% 32.249003%,
    65.986554% 29.802192%,
    64.491434% 27.668006%,
    62.675729% 25.905423%,
    60.508927% 24.573416%,
    57.960521% 23.730963%,
    55% 23.43704%,
    55.002367% 23.353519%,
    55.003628% 23.11748%,
    54.995024% 22.750712%,
    54.967796% 22.275002%,
    54.913184% 21.712141%,
    54.82243% 21.083914%,
    54.686773% 20.412111%,
    54.497455% 19.71852%,
    54.245717% 19.024929%,
    53.922799% 18.353126%,
    53.519943% 17.724899%,
    53.028387% 17.162037%,
    52.439375% 16.686328%,
    51.744146% 16.31956%,
    50.93394% 16.083521%,
    50% 16%,
    49.06606% 16.083521%,
    48.255854% 16.31956%,
    47.560625% 16.686328%,
    46.971613% 17.162038%,
    46.480057% 17.724899%,
    46.077201% 18.353126%,
    45.754283% 19.024929%,
    45.502544% 19.71852%,
    45.313227% 20.412111%,
    45.17757% 21.083914%,
    45.086816% 21.712141%,
    45.032204% 22.275002%,
    45.004976% 22.750712%,
    44.996372% 23.11748%,
    44.997633% 23.353519%
  );
  height: 100%;
  width: 100%;
}
.bulb {
  clip-path: polygon(
    53.495763% 88.029661%,
    52.932998% 88.036282%,
    52.370233% 88.042902%,
    51.807468% 88.049523%,
    51.244703% 88.056144%,
    50.681939% 88.062765%,
    50.119174% 88.069386%,
    49.556409% 88.076006%,
    48.993644% 88.082627%,
    48.430879% 88.089248%,
    47.868114% 88.095868%,
    47.305349% 88.102489%,
    46.742585% 88.10911%,
    46.17982% 88.115731%,
    45.617055% 88.122352%,
    45.05429% 88.128972%,
    44.491525% 88.135593%,
    44.467125% 88.111283%,
    44.396571% 88.040367%,
    44.283828% 87.925865%,
    44.132864% 87.770798%,
    43.947644% 87.578187%,
    43.732137% 87.35105%,
    43.490309% 87.09241%,
    43.226126% 86.805286%,
    42.943554% 86.492699%,
    42.646562% 86.15767%,
    42.339115% 85.803218%,
    42.02518% 85.432364%,
    41.708725% 85.048129%,
    41.393715% 84.653533%,
    41.084117% 84.251596%,
    40.783898% 83.845339%,
    40.748358% 83.788232%,
    40.722068% 83.728493%,
    40.705293% 83.666992%,
    40.698294% 83.604602%,
    40.701334% 83.542193%,
    40.714675% 83.480639%,
    40.738581% 83.420809%,
    40.773314% 83.363577%,
    40.819136% 83.309814%,
    40.87631% 83.260391%,
    40.945099% 83.21618%,
    41.025766% 83.178053%,
    41.118572% 83.146881%,
    41.223781% 83.123536%,
    41.341656% 83.10889%,
    41.472458% 83.103814%,
    42.442929% 83.103814%,
    43.413401% 83.103814%,
    44.383872% 83.103814%,
    45.354343% 83.103814%,
    46.324815% 83.103814%,
    47.295286% 83.103814%,
    48.265758% 83.103814%,
    49.236229% 83.103814%,
    50.2067% 83.103814%,
    51.177172% 83.103814%,
    52.147643% 83.103814%,
    53.118115% 83.103814%,
    54.088586% 83.103814%,
    55.059057% 83.103814%,
    56.029529% 83.103814%,
    57% 83.103814%,
    57% 82.997326%,
    57% 82.890837%,
    57% 82.784349%,
    57% 82.677861%,
    57% 82.571372%,
    57% 82.464884%,
    57% 82.358395%,
    57% 82.251907%,
    57% 82.145419%,
    57% 82.03893%,
    57% 81.932442%,
    57% 81.825953%,
    57% 81.719465%,
    57% 81.612977%,
    57% 81.506488%,
    57% 81.4%,
    55.946769% 81.4%,
    54.893538% 81.4%,
    53.840307% 81.4%,
    52.787076% 81.4%,
    51.733845% 81.4%,
    50.680614% 81.4%,
    49.627383% 81.4%,
    48.574152% 81.4%,
    47.520922% 81.4%,
    46.467691% 81.4%,
    45.41446% 81.4%,
    44.361229% 81.4%,
    43.307998% 81.4%,
    42.254767% 81.4%,
    41.201536% 81.4%,
    40.148305% 81.4%,
    40.13165% 81.397859%,
    40.08458% 81.389973%,
    40.011441% 81.374152%,
    39.916578% 81.348203%,
    39.804336% 81.309936%,
    39.679058% 81.257159%,
    39.545091% 81.187679%,
    39.406779% 81.099305%,
    39.268468% 80.989847%,
    39.134501% 80.857111%,
    39.009223% 80.698907%,
    38.896981% 80.513043%,
    38.802118% 80.297327%,
    38.728979% 80.049568%,
    38.681909% 79.767574%,
    38.665254% 79.449153%,
    38.683099% 79.133012%,
    38.733531% 78.857459%,
    38.811894% 78.61971%,
    38.913533% 78.416976%,
    39.033793% 78.246473%,
    39.168018% 78.105414%,
    39.311554% 77.991013%,
    39.459745% 77.900483%,
    39.607937% 77.831039%,
    39.751473% 77.779893%,
    39.885698% 77.74426%,
    40.005958% 77.721354%,
    40.107597% 77.708388%,
    40.18596% 77.702577%,
    40.236392% 77.701133%,
    40.254237% 77.701271%,
    41.300847% 77.694942%,
    42.347457% 77.688612%,
    43.394068% 77.682283%,
    44.440678% 77.675953%,
    45.487288% 77.669624%,
    46.533898% 77.663294%,
    47.580508% 77.656965%,
    48.627119% 77.650635%,
    49.673729% 77.644306%,
    50.720339% 77.637977%,
    51.766949% 77.631647%,
    52.813559% 77.625318%,
    53.860169% 77.618988%,
    54.90678% 77.612659%,
    55.95339% 77.606329%,
    57% 77.6%,
    57% 77.49375%,
    57% 77.3875%,
    57% 77.28125%,
    57% 77.175%,
    57% 77.06875%,
    57% 76.9625%,
    57% 76.85625%,
    57% 76.75%,
    57% 76.64375%,
    57% 76.5375%,
    57% 76.43125%,
    57% 76.325%,
    57% 76.21875%,
    57% 76.1125%,
    57% 76.00625%,
    57% 75.9%,
    55.943459% 75.9%,
    54.886917% 75.9%,
    53.830376% 75.9%,
    52.773835% 75.9%,
    51.717293% 75.9%,
    50.660752% 75.9%,
    49.604211% 75.9%,
    48.547669% 75.9%,
    47.491128% 75.9%,
    46.434587% 75.9%,
    45.378046% 75.9%,
    44.321504% 75.9%,
    43.264963% 75.9%,
    42.208422% 75.9%,
    41.15188% 75.9%,
    40.095339% 75.9%,
    40.078089% 75.8968%,
    40.029338% 75.886104%,
    39.953587% 75.866269%,
    39.855336% 75.835651%,
    39.739085% 75.792607%,
    39.609334% 75.735493%,
    39.470582% 75.662667%,
    39.327331% 75.572485%,
    39.184079% 75.463303%,
    39.045327% 75.333478%,
    38.915576% 75.181367%,
    38.799325% 75.005327%,
    38.701074% 74.803713%,
    38.625323% 74.574883%,
    38.576572% 74.317193%,
    38.559322% 74.029%,
    38.577167% 73.741279%,
    38.627599% 73.484922%,
    38.705962% 73.258163%,
    38.807601% 73.059236%,
    38.927861% 72.886374%,
    39.062086% 72.737811%,
    39.205622% 72.61178%,
    39.353813% 72.506515%,
    39.502005% 72.42025%,
    39.645541% 72.351218%,
    39.779766% 72.297652%,
    39.900026% 72.257787%,
    40.001665% 72.229856%,
    40.080028% 72.212091%,
    40.13046% 72.202728%,
    40.148305% 72.2%,
    41.176536% 72.2%,
    42.204767% 72.2%,
    43.232998% 72.2%,
    44.261229% 72.2%,
    45.28946% 72.2%,
    46.317691% 72.2%,
    47.345922% 72.2%,
    48.374152% 72.2%,
    49.402383% 72.2%,
    50.430614% 72.2%,
    51.458845% 72.2%,
    52.487076% 72.2%,
    53.515307% 72.2%,
    54.543538% 72.2%,
    55.571769% 72.2%,
    56.6% 72.2%,
    56.6% 72.06875%,
    56.6% 71.9375%,
    56.6% 71.80625%,
    56.6% 71.675%,
    56.6% 71.54375%,
    56.6% 71.4125%,
    56.6% 71.28125%,
    56.6% 71.15%,
    56.6% 71.01875%,
    56.6% 70.8875%,
    56.6% 70.75625%,
    56.6% 70.625%,
    56.6% 70.49375%,
    56.6% 70.3625%,
    56.6% 70.23125%,
    56.6% 70.1%,
    55.571769% 70.1%,
    54.543538% 70.1%,
    53.515307% 70.1%,
    52.487076% 70.1%,
    51.458845% 70.1%,
    50.430614% 70.1%,
    49.402383% 70.1%,
    48.374152% 70.1%,
    47.345922% 70.1%,
    46.317691% 70.1%,
    45.28946% 70.1%,
    44.261229% 70.1%,
    43.232998% 70.1%,
    42.204767% 70.1%,
    41.176536% 70.1%,
    40.148305% 70.1%,
    39.937381% 70.093329%,
    39.746587% 70.073689%,
    39.574799% 70.041639%,
    39.420891% 69.997738%,
    39.283739% 69.942545%,
    39.162219% 69.876618%,
    39.055205% 69.800518%,
    38.961574% 69.714801%,
    38.8802% 69.620029%,
    38.809959% 69.51676%,
    38.749726% 69.405552%,
    38.698377% 69.286964%,
    38.654786% 69.161556%,
    38.61783% 69.029887%,
    38.586384% 68.892515%,
    38.559322% 68.75%,
    38.536536% 68.585011%,
    38.537925% 68.499581%,
    38.558013% 68.476078%,
    38.591325% 68.496873%,
    38.632387% 68.544333%,
    38.675723% 68.600828%,
    38.715858% 68.648727%,
    38.747317% 68.6704%,
    38.764625% 68.648214%,
    38.762308% 68.56454%,
    38.73489% 68.401746%,
    38.676896% 68.142201%,
    38.582851% 67.768275%,
    38.44728% 67.262337%,
    38.264709% 66.606755%,
    38.029661% 65.783898%,
    37.683014% 64.779132%,
    37.185251% 63.603655%,
    36.56031% 62.278584%,
    35.832128% 60.825039%,
    35.024641% 59.264139%,
    34.161788% 57.617002%,
    33.267504% 55.904747%,
    32.365728% 54.148493%,
    31.480396% 52.369358%,
    30.635446% 50.588461%,
    29.854815% 48.826921%,
    29.162439% 47.105856%,
    28.582256% 45.446386%,
    28.138204% 43.869629%,
    27.854218% 42.396703%,
    27.754237% 41.048728%,
    27.824067% 39.680249%,
    28.037448% 38.154645%,
    28.400212% 36.506285%,
    28.918193% 34.769538%,
    29.597226% 32.978771%,
    30.443143% 31.168354%,
    31.461779% 29.372655%,
    32.658968% 27.626042%,
    34.040542% 25.962885%,
    35.612337% 24.417552%,
    37.380184% 23.024411%,
    39.349919% 21.817831%,
    41.527375% 20.83218%,
    43.918386% 20.101827%,
    46.528786% 19.661142%,
    49.364407% 19.544491%,
    52.192296% 19.758389%,
    54.780841% 20.266335%,
    57.137895% 21.038174%,
    59.271307% 22.043754%,
    61.188929% 23.25292%,
    62.898613% 24.635519%,
    64.408208% 26.161398%,
    65.725566% 27.800402%,
    66.858538% 29.522378%,
    67.814975% 31.297173%,
    68.602728% 33.094632%,
    69.229648% 34.884603%,
    69.703586% 36.636931%,
    70.032393% 38.321463%,
    70.223919% 39.908046%,
    70.286017% 41.366525%,
    70.198514% 42.78396%,
    69.949352% 44.259072%,
    69.558554% 45.779201%,
    69.046142% 47.331687%,
    68.432136% 48.90387%,
    67.736558% 50.483091%,
    66.979432% 52.056688%,
    66.180777% 53.612002%,
    65.360617% 55.136373%,
    64.538972% 56.617141%,
    63.735865% 58.041645%,
    62.971317% 59.397227%,
    62.26535% 60.671225%,
    61.637986% 61.85098%,
    61.109246% 62.923831%,
    60.699153% 63.877119%,
    60.580506% 64.196273%,
    60.476798% 64.500432%,
    60.386705% 64.790878%,
    60.308902% 65.068895%,
    60.242064% 65.335765%,
    60.184867% 65.592772%,
    60.135986% 65.841197%,
    60.094096% 66.082324%,
    60.057873% 66.317435%,
    60.025991% 66.547814%,
    59.997127% 66.774743%,
    59.969954% 66.999505%,
    59.94315% 67.223384%,
    59.915388% 67.447661%,
    59.885345% 67.673619%,
    59.851695% 67.902542%,
    59.808632% 68.130101%,
    59.751921% 68.350427%,
    59.682597% 68.562492%,
    59.601691% 68.765268%,
    59.51024% 68.957729%,
    59.409275% 69.138846%,
    59.299831% 69.307591%,
    59.182941% 69.462936%,
    59.059639% 69.603855%,
    58.930958% 69.729319%,
    58.797933% 69.838301%,
    58.661597% 69.929772%,
    58.522983% 70.002705%,
    58.383126% 70.056073%,
    58.243058% 70.088847%,
    58.103814% 70.1%,
    58.009826% 70.1%,
    57.915837% 70.1%,
    57.821849% 70.1%,
    57.72786% 70.1%,
    57.633872% 70.1%,
    57.539884% 70.1%,
    57.445895% 70.1%,
    57.351907% 70.1%,
    57.257919% 70.1%,
    57.16393% 70.1%,
    57.069942% 70.1%,
    56.975954% 70.1%,
    56.881965% 70.1%,
    56.787977% 70.1%,
    56.693988% 70.1%,
    56.6% 70.1%,
    56.6% 70.23125%,
    56.6% 70.3625%,
    56.6% 70.49375%,
    56.6% 70.625%,
    56.6% 70.75625%,
    56.6% 70.8875%,
    56.6% 71.01875%,
    56.6% 71.15%,
    56.6% 71.28125%,
    56.6% 71.4125%,
    56.6% 71.54375%,
    56.6% 71.675%,
    56.6% 71.80625%,
    56.6% 71.9375%,
    56.6% 72.06875%,
    56.6% 72.2%,
    56.677201% 72.2%,
    56.754402% 72.2%,
    56.831604% 72.2%,
    56.908805% 72.2%,
    56.986006% 72.2%,
    57.063207% 72.2%,
    57.140408% 72.2%,
    57.21761% 72.2%,
    57.294811% 72.2%,
    57.372012% 72.2%,
    57.449213% 72.2%,
    57.526414% 72.2%,
    57.603615% 72.2%,
    57.680817% 72.2%,
    57.758018% 72.2%,
    57.835219% 72.2%,
    57.853701% 72.202448%,
    57.905933% 72.211052%,
    57.987094% 72.2277%,
    58.092362% 72.254278%,
    58.216915% 72.292675%,
    58.355933% 72.344779%,
    58.504593% 72.412477%,
    58.658076% 72.497658%,
    58.811558% 72.602208%,
    58.960218% 72.728017%,
    59.099236% 72.876971%,
    59.223789% 73.050959%,
    59.329057% 73.251868%,
    59.410218% 73.481586%,
    59.46245% 73.742%,
    59.480932% 74.035%,
    59.461897% 74.328341%,
    59.408104% 74.589722%,
    59.324517% 74.82094%,
    59.216102% 75.023795%,
    59.087824% 75.200085%,
    58.94465% 75.35161%,
    58.791545% 75.480166%,
    58.633475% 75.587554%,
    58.475404% 75.675572%,
    58.322299% 75.746019%,
    58.179125% 75.800693%,
    58.050847% 75.841392%,
    57.942432% 75.869917%,
    57.858845% 75.888064%,
    57.805052% 75.897634%,
    57.786017% 75.900424%,
    57.736891% 75.900424%,
    57.687765% 75.900424%,
    57.638639% 75.900424%,
    57.589513% 75.900424%,
    57.540387% 75.900424%,
    57.491261% 75.900424%,
    57.442135% 75.900424%,
    57.393008% 75.900424%,
    57.343882% 75.900424%,
    57.294756% 75.900424%,
    57.24563% 75.900424%,
    57.196504% 75.900424%,
    57.147378% 75.900424%,
    57.098252% 75.900424%,
    57.049126% 75.900424%,
    57% 75.900424%,
    57% 76.006647%,
    57% 76.112871%,
    57% 76.219094%,
    57% 76.325318%,
    57% 76.431542%,
    57% 76.537765%,
    57% 76.643989%,
    57% 76.750212%,
    57% 76.856436%,
    57% 76.962659%,
    57% 77.068882%,
    57% 77.175106%,
    57% 77.281329%,
    57% 77.387553%,
    57% 77.493776%,
    57% 77.6%,
    57.057852% 77.6%,
    57.115705% 77.6%,
    57.173557% 77.6%,
    57.231409% 77.6%,
    57.289262% 77.6%,
    57.347114% 77.6%,
    57.404967% 77.6%,
    57.462819% 77.6%,
    57.520671% 77.6%,
    57.578524% 77.6%,
    57.636376% 77.6%,
    57.694228% 77.6%,
    57.752081% 77.6%,
    57.809933% 77.6%,
    57.867786% 77.6%,
    57.925638% 77.6%,
    57.942004% 77.600652%,
    57.988249% 77.60446%,
    58.060089% 77.614197%,
    58.153244% 77.632638%,
    58.263431% 77.66256%,
    58.386368% 77.706736%,
    58.517774% 77.767942%,
    58.653367% 77.848953%,
    58.788864% 77.952543%,
    58.919985% 78.081487%,
    59.042446% 78.238562%,
    59.151966% 78.42654%,
    59.244264% 78.648199%,
    59.315056% 78.906311%,
    59.360062% 79.203653%,
    59.375% 79.543%,
    59.358195% 79.881381%,
    59.313493% 80.175993%,
    59.244894% 80.429865%,
    59.156396% 80.646022%,
    59.051998% 80.827492%,
    58.935699% 80.977302%,
    58.811498% 81.098478%,
    58.683392% 81.194047%,
    58.555383% 81.267037%,
    58.431467% 81.320475%,
    58.315644% 81.357386%,
    58.211913% 81.380799%,
    58.124272% 81.39374%,
    58.056721% 81.399236%,
    58.013257% 81.400313%,
    57.997881% 81.4%,
    57.935513% 81.4%,
    57.873146% 81.4%,
    57.810778% 81.4%,
    57.748411% 81.4%,
    57.686043% 81.4%,
    57.623676% 81.4%,
    57.561308% 81.4%,
    57.498941% 81.4%,
    57.436573% 81.4%,
    57.374205% 81.4%,
    57.311838% 81.4%,
    57.24947% 81.4%,
    57.187103% 81.4%,
    57.124735% 81.4%,
    57.062368% 81.4%,
    57% 81.4%,
    57% 81.506488%,
    57% 81.612977%,
    57% 81.719465%,
    57% 81.825953%,
    57% 81.932442%,
    57% 82.03893%,
    57% 82.145419%,
    57% 82.251907%,
    57% 82.358395%,
    57% 82.464884%,
    57% 82.571372%,
    57% 82.677861%,
    57% 82.784349%,
    57% 82.890837%,
    57% 82.997326%,
    57% 83.103814%,
    57.117235% 83.106983%,
    57.223213% 83.116309%,
    57.318024% 83.131515%,
    57.401755% 83.152328%,
    57.474492% 83.178473%,
    57.536325% 83.209675%,
    57.58734% 83.245659%,
    57.627625% 83.286151%,
    57.657268% 83.330876%,
    57.676357% 83.37956%,
    57.684979% 83.431927%,
    57.683222% 83.487704%,
    57.671173% 83.546615%,
    57.64892% 83.608385%,
    57.616551% 83.672741%,
    57.574153% 83.739407%,
    57.393035% 83.981011%,
    57.16316% 84.260739%,
    56.892867% 84.571179%,
    56.590497% 84.90492%,
    56.264389% 85.254552%,
    55.922883% 85.612663%,
    55.57432% 85.971842%,
    55.22704% 86.324677%,
    54.889382% 86.663758%,
    54.569686% 86.981674%,
    54.276293% 87.271012%,
    54.017542% 87.524363%,
    53.801774% 87.734314%,
    53.637328% 87.893455%,
    53.532544% 87.994374%
  );
  height: 100%;
  width: 100%;
}
.fill {
  height: 240%;
  transform: translateY(-58%);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}
.fill1 {
  background: linear-gradient(
    #cac9d1 0%,
    #cac9d1 36%,
    #91f4f8 60%,
    #1b68cb 100%
  );
}
.fill2 {
  background: linear-gradient(
    #cac9d1 0%,
    #cac9d1 36%,
    #ffd196 60%,
    #803c11 100%
  );
}
.fill3 {
  background: linear-gradient(
    #cac9d1 0%,
    #cac9d1 36%,
    #8f94fb 60%,
    #4e54c8 100%
  );
}
.fill4 {
  background: linear-gradient(
    #cac9d1 0%,
    #cac9d1 36%,
    #eeb565 60%,
    #f46b45 100%
  );
}
.strike-through {
  clip-path: polygon(0% 0%, -28% 99%, -31% 116%, 20% 0%);
  position: absolute;
  top: 0;
  transition: clip-path 300ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}
.container.mute .strike-through {
  clip-path: polygon(0% 0%, -28% 99%, 84% 137%, 122% 10%);
}
.container.mute .fill {
  transform: translateY(0);
}

              
            
!

JS

              
                
              
            
!
999px

Console