<h2>Hover me!</h2>
@property --p1{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --p2{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --p3{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --p31{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --p4{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --p5{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --p6{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --p7{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --p8{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --p9{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --p10{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --p11{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --p12{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --p13{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --p14{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --p15{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --p16{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --p17{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --p18{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --p19{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --c1{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --c2{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --t{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

html {
  --t:8px;
  --c:#000;
  height:100%;
  text-align:center;
  cursor:pointer;
  background:
  /* T */
  linear-gradient(var(--c) 0 0) calc(50% - 60px + var(--p1)) calc(50% - 65px + var(--t)/2)/40px var(--t),
  linear-gradient(var(--c) 0 0) calc(50% - 60px) calc(50% - 40px + var(--p2))/var(--t) 50px,
  /* H */
  linear-gradient(var(--c) 0 0) calc(50% - 20px + var(--t)/2) calc(50% - 40px + var(--p3))/var(--t) 50px,
  linear-gradient(var(--c) 0 0) calc(50% + 20px - var(--t)/2) calc(50% - 40px + var(--p31))/var(--t) 50px,
  linear-gradient(var(--c) 0 0) calc(50%) calc(50% - 40px)/var(--p4) var(--t),
   /* E */
  linear-gradient(var(--c) 0 0) calc(50% + 40px + var(--t)/2 + var(--p5)) calc(50% - 40px)/var(--t) 50px,
  linear-gradient(90deg,var(--c) var(--p6),#0000 0) calc(50% + 60px) calc(50% - 65px + var(--t)/2)/40px var(--t),
  linear-gradient(90deg,var(--c) var(--p7),#0000 0) calc(50% + 60px) calc(50% - 40px)/40px var(--t),
  linear-gradient(90deg,var(--c) var(--p8),#0000 0) calc(50% + 60px) calc(50% - 15px - var(--t)/2)/40px var(--t),
    /* E */
  linear-gradient(var(--c) var(--p9),#0000 0) calc(50% - 80px + var(--t)/2) calc(50% + 40px)/var(--t) 50px,
  linear-gradient(90deg,var(--c) var(--p10),#0000 0) calc(50% - 60px) calc(50% + 65px - var(--t)/2)/40px var(--t),
  linear-gradient(90deg,var(--c) var(--p11),#0000 0) calc(50% - 60px) calc(50% + 40px)/40px var(--t),
  linear-gradient(90deg,var(--c) var(--p12),#0000 0) calc(50% - 60px) calc(50% + 15px + var(--t)/2)/40px var(--t),
    /* N */
  linear-gradient(var(--c) 0 0) calc(50% - 20px + var(--t)/2) calc(50% + 40px + var(--p13))/var(--t) 50px,
  linear-gradient(var(--c) 0 0) calc(50% + 20px - var(--t)/2) calc(50% + 40px + var(--p14))/var(--t) 50px,
    linear-gradient(to bottom left,#0000 calc(50% - var(--t)/2), var(--c) calc(50% - var(--t)/2) calc(50% + var(--t)/2),#0000 calc(50% + var(--t)/2)) 50% calc(50% + 40px)/calc(40px - var(--t)/2 - 2px) var(--p15),
    /* D */
  linear-gradient(var(--c) 0 0) calc(50% + 40px + var(--t)/2) calc(50% + 40px + var(--p16))/var(--t) 50px,
   radial-gradient(farthest-side at left,#0000 calc(100% - var(--t)),var(--c) calc(100% - var(--t)) 100%,#0000) calc(50% + 70px + var(--p19)) calc(50% + 40px)/25px 50px,
   linear-gradient(90deg,var(--c) var(--p17),#0000 0) calc(50% + 50px) calc(50% + 15px + var(--t)/2)/15px var(--t),
   linear-gradient(90deg,var(--c) var(--p18),#0000 0) calc(50% + 50px) calc(50% + 65px - var(--t)/2) /15px var(--t),
    /*Circles*/
    radial-gradient(farthest-side,#0000 var(--c1),#ED303C var(--c1) var(--c2),#0000 var(--c2)) calc(50% - 90px) calc(50% - 20px)/30px 30px,
    radial-gradient(farthest-side,#0000 var(--c1),#3B8183 var(--c1) var(--c2),#0000 var(--c2)) calc(50% - 10px) calc(50% + 80px)/80px 80px,
    radial-gradient(farthest-side,#0000 var(--c1),#FAD089 var(--c1) var(--c2),#0000 var(--c2)) calc(50% + 40px) calc(50% - 90px)/50px 50px,
    radial-gradient(farthest-side,#0000 var(--c1),#FF9C5B var(--c1) var(--c2),#0000 var(--c2)) calc(50% + 90px) calc(50% + 30px)/40px 40px;
  background-repeat:no-repeat;
  transition:
      --t   .3s,
      --p1  .5s .3s,
      --p2  .5s .3s,
      --p3  .5s .3s,
      --p31 .5s .3s,
      --p4  .5s .3s,
      --p5  .5s .3s,
      --p6  .5s .3s,
      --p7  .5s .3s,
      --p8  .5s .3s,
      --p9  .5s .3s,
      --p10 .5s .3s,
      --p11 .5s .3s,
      --p12 .5s .3s,
      --p13 .5s .3s,
      --p14 .5s .3s,
      --p15 .5s .3s,
      --p16 .5s .3s,
      --p17 .5s .3s,
      --p18 .5s .3s,
      --p19 .5s .3s,
      --c2   0s,
      --c1   0s; 
  --p1:-50vw;
  --p2:80vh;
  --p3:-80vh;
  --p31:80vh;
  --p4:0px;
  --p5:50vw;
  --p6:0%;
  --p7:0%;
  --p8:0%;
  --p9:0%;
  --p10:0%;
  --p11:0%;
  --p12:0%;
  --p13:-80vh;
  --p14:80vh;
  --p15:0px;
  --p16:80vh;
  --p17:0%;
  --p18:0%;
  --p19:50vw;
  --c1:0%;
  --c2:0%;
}

html:hover {
  transition:
      --p1  .3s,
      --p2  .3s .3s,
      --p3  .3s .6s,
      --p31 .3s .6s,
      --p4  .3s .9s,
      --p5  .3s 1.2s,
      --p6  .3s 1.5s,
      --p7  .3s 1.6s,
      --p8  .3s 1.7s,
      --p9  .3s 2s,
      --p10 .3s 2.1s,
      --p11 .3s 2.2s,
      --p12 .3s 2.3s,
      --p13 .3s 2.6s,
      --p14 .3s 2.6s,
      --p15 .3s 2.9s,
      --p16 .3s 3.2s,
      --p17 .3s 3.5s,
      --p18 .3s 3.5s,
      --p19 .3s 3.8s,
      --c2  .3s 4.1s,
      --c1  .3s 4.4s,
      --t   .3s 4.7s; 
  --p1:0px;
  --p2:0px;
  --p3:0px;
  --p31:0px;
  --p4:40px;
  --p5:0px;
  --p6:100%;
  --p7:100%;
  --p8:100%;
  --p9:100%;
  --p10:100%;
  --p11:100%;
  --p12:100%;
  --p13:0px;
  --p14:0px;
  --p15:50px;
  --p16:0;
  --p17:100%;
  --p18:100%;
  --p19:0;
  --c1:94%;
  --c2:94%;
  --t:0px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.