<div class="site-container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="200" height="200" id="drawable-illustration">
<path d="M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2" />
<path d="M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
</svg>
<p>Reload to draw again</p>
</div>
:root {
--illustration-body-bg-color: #4b6584;
--illustration-body-color: #d1d8e0;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font: 1em/160% sans-serif;
margin: 0;
background-color: var(--illustration-body-bg-color);
color: var(--illustration-body-color);
}
svg {
fill: currentColor;
max-width: 100%;
vertical-align: baseline;
}
.site-container {
padding: 2em;
min-height: 100vh;
display: grid;
place-items: center;
}
#drawable-illustration path:not([fill="none"]) {
fill: transparent;
stroke-width: 0.25;
stroke: currentColor;
animation: draw 2s forwards;
}
#drawable-illustration path:nth-child(1) {
stroke-dasharray: 61.9942626953125;
stroke-dashoffset: 61.9942626953125;
}
#drawable-illustration path:nth-child(2) {
stroke-dasharray: 18.852230072021484;
stroke-dashoffset: 18.852230072021484;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
let icon = document.querySelector("#drawable-illustration");
if (icon) {
let paths = icon.querySelectorAll("path");
if (paths.length) {
for ([index, path] of paths.entries()) {
let pathLength = path.getTotalLength();
console.log(`Path #${index + 1}: ${pathLength}`);
}
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.