<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 332.58 239.81"><defs><style>.cls-1,.cls-6{fill:#1d1d1b;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5{stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:5px;}.cls-2{fill:#ededed;}.cls-3{fill:#dadada;}.cls-4{fill:#b2b2b2;}.cls-5{fill:none;stroke-linecap:round;}.cls-6{font-size:48px;font-family:MyriadPro-Regular, Myriad Pro;}</style></defs><title>css-2</title><g id="computer">
<path class="cls-1" d="M73.18,2.5H247.61a29.13,29.13,0,0,1,29.13,29.13V150.15a0,0,0,0,1,0,0H44a0,0,0,0,1,0,0V31.63A29.13,29.13,0,0,1,73.18,2.5Z"/><polygon class="cls-2" points="263.08 137.22 58.68 137.22 58.31 26.04 262.71 26.04 263.08 137.22"/><path class="cls-3" d="M44.07,150.15H276.54a0,0,0,0,1,0,0v9a15.4,15.4,0,0,1-15.4,15.4H59.47a15.4,15.4,0,0,1-15.4-15.4v-9a0,0,0,0,1,0,0Z"/><circle class="cls-1" cx="159.29" cy="163.44" r="5.91"/><polygon class="cls-4" points="140.35 174.79 130.22 223.48 191.34 223.48 180.55 175.12 140.35 174.79"/><rect class="cls-4" x="107.91" y="224.34" width="101.64" height="9.15" rx="4.58"/><line class="cls-5" x1="2.5" y1="237.31" x2="201.58" y2="237.31"/><line class="cls-5" x1="267.31" y1="237.31" x2="330.08" y2="237.31"/><path class="cls-5" d="M472.26,525.58" transform="translate(-105.44 -288.27)"/><line class="cls-5" x1="214.5" y1="237.31" x2="253.49" y2="237.31"/></g>
<g id="html"><text class="cls-6" transform="translate(105.71 98.8)"><tspan xml:space="preserve"> </></tspan></text></g></svg>
body {
background: #28afb0;
}
.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6 {
stroke-dasharray: 1650;
stroke-dashoffset: 1650;
animation: draw 3.5s linear forwards;
}
svg {
position: absolute;
top: 100px;
left: 15%;
width: 70%;
height: 70%;
fill-opacity: 0;
}
@keyframes draw {
0% {
stroke-dashoffset: 1650;
fill-opacity: 0;
}
75% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
95% {
stroke-dashoffset: 0;
}
100% {
fill-opacity: 1;
stroke-dashoffset: 0;
}
}
#html {
position: absolute;
transform: translateX(-1px);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.