<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.