<twitch></twitch>



<a href="https://youtu.be/c5YDBfUHqVY" target="blank"><img src="https://assets.codepen.io/2475719/youtube-logo.png" /></a>
:root{
   --twitch-purple:#6441A4;
   --bg-gradient:rgba(0,0,0,0.2) 5px, transparent 5px;
}
*{
   margin:0;
}
body{ 
   width:100vw;
   height:100vh;
   display:grid;
   place-items:center;
   filter:
      drop-shadow(0 0 2px white)
      drop-shadow(0 0 2px white)
      drop-shadow(0 5px 3px black)
      drop-shadow(0 5px 5px black);
   background:
       linear-gradient(225deg,var(--bg-gradient)),
      linear-gradient(-225deg,var(--bg-gradient)),
      linear-gradient(135deg,var(--bg-gradient))5px 5px,
      linear-gradient(-135deg,var(--bg-gradient))-5px -5px,
      radial-gradient(beige, var(--twitch-purple));
      background-size: 
         20px 10px,
         20px 10px,
         20px 10px,
         20px 10px,
         100% 100%;
}
twitch{
   width:400px;
   height:410px;
   background:
      radial-gradient(circle at 56% 40%, transparent 35%, var(--twitch-purple) 35%)0 0,
      linear-gradient(90deg,transparent 62%,  var(--twitch-purple) 60%)5px;
      
   background-size:
      100% 100%,
      100px 190px;
   
   clip-path:polygon(
      /* outer-shape */
      100% 0,
      100% 62%,
      72% 88%,
      52% 88%,
      40% 100%,
      25% 100%,
      25% 88%,
      0 88%,
      0 17%,
      7% 0,
      100% 0,
      /* middle-shape */
      90% 10%,
      16% 10%,
      16% 72%,
      37% 72%,
      37% 84%,
      50% 72%,
      75% 72%,
      90% 57%,
      90% 10%,
      /*inner-shape*/
      75% 25%,
      75% 53%,
      40% 53%,
      40% 25%,
      75% 25%
      );
}










a {
   width: 100px;
   height: 75px;
   position: absolute;
   bottom: 10px;
   right: 10px;
}
img {
   width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.