<div class="square">
<div class="hole"></div>
</div>
<div class="cable">
<div class="stick">
<div class="main"></div>
<div class="fil"></div>
</div>
</div>
*{
margin:0;
}
:root{
--bg : #ff6b81;
--cable : #666666;
--cable-shadow: #565656;
--big-hole: #bdbec0;
--hole-shadow:#939393;
--small-holes: #58595b;
--border: #414141;
--main: #5e5e5e;
}
body{
width:100%;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
position:relative;
flex-direction:column;
background: var(--bg);
overflow:hidden;
}
.square{
width:20vw;
height:20vw;
background:#fff;
position:relative;
display:flex;
align-items:center;
justify-content:center;
box-shadow: 1vw 1vw rgba(0,0,0,.2);
}
.square::before{
content:'';
width:17vw;
height:17vw;
border:.2vw solid var(--border);
position:absolute;
}
.hole{
width: 10vw;
height:10vw;
background:var(--big-hole);
border-radius:50%;
box-shadow:inset .8vw .8vw var(--hole-shadow);
position:relative;
display:flex;
align-items:center;
}
.hole::before, .hole::after{
content:'';
width:2vw;
height:2vw;
border-radius:50%;
background:var(--small-holes);
left:1.5vw;
position:absolute;
}
.hole::after{
right:1.5vw;
left:auto;
}
.stick{
width:10vw;
height:1.5vw;
background:var(--cable);
margin-top:8vw;
position:relative;
}
.stick::before,.stick::after{
content:'';
width:1.25vw;
height:4.5vw;
border-radius:1.5vw 1.5vw 0 0;
background:#fff;
left:1.75vw;
bottom:1.5vw;
z-index:1;
position:absolute;
}
.stick::after{
left:auto;
right:1.75vw;
}
.main{
width:8vw;
height:3.5vw;
background:var(--main);
position:absolute;
bottom:-3.5vw;
left:1vw;
}
.main::before{
content:'';
width:8vw;
height:3vw;
background:var(--cable-shadow);
position:absolute;
bottom:-3vw;
clip-path:polygon(0 0, 8vw 0, 6vw 3vw, 2vw 3vw)
}
.main::after{
content:'';
width:4vw;
height:3.5vw;
background:var(--cable);
position:absolute;
bottom:-6.4vw;
left:2vw;
clip-path:polygon(0 0, 4vw 0, 3.5vw 3.5vw, 0.5vw 3.5vw)
}
.fil{
width:2vw;
background:var(--cable);
height: 50vw;
position:absolute;
top:10vw;
left:4vw;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.