<article class="erase" role="img" aria-label="cartoon with the word powerless and a pencil erasing the 'less' part"></article>
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');
.erase {
border-radius: 50%;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
background:
linear-gradient(40deg, #0000 50%, #000 0 55%, #0000 0) 100% 60% / 5% 5%,
linear-gradient(130deg, #0000 50%, #000 0 55%, #0000 60%) 86% 54% / 5% 5%,
linear-gradient(20deg, #0000 50%, #000 0 55%, #0000 0) 91% 49.8% / 3% 5%,
radial-gradient(at 90% 50%, #000 1%, #0000 1.5%),
radial-gradient(20% 200% at 69% 55%, #000 1%, #0000 1.5%)
;
background-repeat: no-repeat;
box-shadow:
0 0 10vmin 10vmin #fff,
0 0 0 100vmin #3691;
}
.erase::before {
content: "powerless";
font-family: 'Architects Daughter', serif;
font-size: 10vmin;
display: block;
transform: perspective(1000px) rotateX(50deg);
-webkit-mask:
linear-gradient(90deg, #fff 63%, #fff2 64.75%, #0000 0),
linear-gradient(110deg, #00000008 80%, #f000, #0000 96%),
linear-gradient(110deg, #00000008 83%, #f001, #0000 85%),
linear-gradient(130deg, #0000 66%, #f001, #00000002 86%),
linear-gradient(80deg, #00000003 70%, #f000, #00000003 85%),
linear-gradient(80deg, #00000003 70%, #f001)
}
.erase::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 15%;
height: 200%;
transform: translate(-40%, -20%) rotate(20deg);
border-radius: 100% / 10%;
-webkit-mask:
linear-gradient(#0000 5%, #000 50%);
background:
linear-gradient(90deg, #0000, #f003) 100% 100% / 100% 18%,
linear-gradient(gold, #0000 70%),
radial-gradient(70% 50% at 20% 89%, #fee4 0%, #fff0 15%),
linear-gradient(90deg, #fff2 3%, #0000 10%),
linear-gradient(90deg, #0000, #0001 1%, #0000 10%),
radial-gradient(150% 5% at 50% 100%, #f001 60%, #0000 90%),
radial-gradient(150% 20% at 100% 100%, #3006, #0000 25%),
linear-gradient(90deg, #fff2, #0000 30% 70%, #0002),
repeating-linear-gradient(#0000 0 20%, #0001 0 23%, #fffc 25%) 50% 76% / 100% 13%,
linear-gradient(90deg, #0000, #fffc, #0000 50% 70%, #1353) 0 78% / 100% 17%,
linear-gradient(#0000 65%, #ccc 0 82%, #0000 0),
linear-gradient(90deg, #00000008 23%, #fff 25%, #0000 0 73%, #0002 75%, #0000000c 0) 0 0 / 100% 80%,
linear-gradient(#0000 79%, #0002 0, #0000 95%),
linear-gradient(gold 80%, pink 0)
#00f4
;
background-repeat: no-repeat;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.