<svg viewBox="0 0 1093 227" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
<g id="Forem">
<g id="M">
<path class="m" id="m-1" d="M768.322 46.287H753.58c-2.442 0-4.421 5.938-4.421 13.269v114.996c0 7.324 1.979 13.269 4.421 13.269h14.742c2.442 0 4.421-5.945 4.421-13.269V59.556c0-7.331-1.979-13.269-4.421-13.269z" style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:5px"/>
<path class="m" id="m-2" d="M865.497 55.859c-1.714-1.709-4.53-1.709-6.245 0l-13.55 13.551-16.697 16.684-.337.338-.344-.338-16.678-16.684-13.557-13.551a4.415 4.415 0 00-6.244 0l-10.428 10.428c-1.707 1.716-1.707 4.529 0 6.245l43.785 43.785a5.355 5.355 0 006.937 0l13.557-13.55 16.679-16.679 13.55-13.556a4.417 4.417 0 000-6.245l-10.428-10.428z" style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:5px"/>
<path class="m" id="m-3" d="M903.756 46.287h-14.743c-2.448 0-4.427 5.938-4.427 13.269v114.996c0 7.324 1.979 13.269 4.427 13.269h14.743c2.441 0 4.421-5.945 4.421-13.269V59.556c0-7.331-1.98-13.269-4.421-13.269z" style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:5px"/>
</g>
<g id="E">
<path class="e" id="e-1" d="M719.948 53.467a7.083 7.083 0 00-7.08-7.08h-80.199a7.083 7.083 0 00-7.08 7.08v9.431a7.084 7.084 0 007.08 7.08h80.199a7.084 7.084 0 007.08-7.08v-9.431z" style="fill:none;stroke:#000;stroke-width:5px"/>
<path class="e" id="e-2" d="M719.948 112.438a7.084 7.084 0 00-7.08-7.08h-80.199a7.084 7.084 0 00-7.08 7.08v9.431a7.083 7.083 0 007.08 7.08h80.199a7.083 7.083 0 007.08-7.08v-9.431z" style="fill:none;stroke:#000;stroke-width:5px"/>
<path class="e" id="e-3" d="M719.948 171.416a7.083 7.083 0 00-7.08-7.08h-80.199a7.083 7.083 0 00-7.08 7.08v9.431a7.083 7.083 0 007.08 7.08h80.199a7.083 7.083 0 007.08-7.08v-9.431z" style="fill:none;stroke:#000;stroke-width:5px"/>
</g>
<g id="R">
<path class="r" id="r-1" d="M533.923 102.423h-15.767c-2.426 0-4.421-1.995-4.421-4.421V74.399v-.025c0-2.425 1.995-4.421 4.421-4.421h15.767c2.406 0 4.393-1.965 4.421-4.371V50.814v-.006c0-2.426-1.996-4.421-4.421-4.421h-39.365c-2.425 0-4.421 1.995-4.421 4.421V183.5c0 2.425 1.996 4.421 4.421 4.421h14.749c2.426 0 4.421-1.996 4.421-4.421v-54.551a2.962 2.962 0 012.948-2.947h17.24c2.426 0 4.421-1.996 4.421-4.421v-14.749c-.006-2.418-1.996-4.405-4.414-4.409z" style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:5px"/>
<path class="r" id="r-2" d="M552.793 106.351a4.383 4.383 0 013.391-4.296c7.427-1.624 12.767-8.258 12.767-15.861 0-7.602-5.34-14.236-12.767-15.86a4.384 4.384 0 01-3.391-4.296V51.095c.018-2.423 2.017-4.406 4.44-4.406.185 0 .371.012.555.035 19.81 2.496 34.832 19.529 34.832 39.495 0 19.967-15.022 37-34.832 39.496-.184.023-.37.035-.555.035-2.423 0-4.422-1.984-4.44-4.406v-14.993z" style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:5px"/>
<path class="r" id="r-3" d="M557.133 133.564c26.574 2.128 47.889 23.442 50.017 50.017.006.091.009.183.009.275 0 2.23-1.835 4.065-4.065 4.065h-13.803a4.067 4.067 0 01-4.052-3.572c-1.684-15.133-13.74-27.178-28.874-28.849a4.066 4.066 0 01-3.572-4.052v-13.8-.028c0-2.23 1.835-4.065 4.065-4.065.092 0 .183.003.275.009z" style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:5px"/>
</g>
<g id="O">
<path class="o" id="o-1" d="M444.379 104.571a4.387 4.387 0 01-4.371-3.865c-1.975-17.794-17.187-31.411-35.09-31.411-17.903 0-33.115 13.617-35.09 31.411a4.387 4.387 0 01-4.371 3.865h-14.924l-.056.001c-2.397 0-4.371-1.973-4.371-4.371 0-.107.004-.213.012-.319 2.417-30.501 28.19-54.314 58.787-54.314 30.597 0 56.371 23.813 58.788 54.314.007.106.011.212.011.319 0 2.398-1.973 4.371-4.371 4.371l-.055-.001h-14.899z" style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:5px"/>
<path class="o" id="o-2" d="M365.432 128.949a4.388 4.388 0 014.371 3.866c1.975 17.793 17.187 31.411 35.09 31.411 17.903 0 33.115-13.618 35.09-31.411a4.387 4.387 0 014.371-3.866H459.309c2.398 0 4.371 1.973 4.371 4.371 0 .108-.004.217-.012.325-2.455 30.472-28.217 54.242-58.788 54.242-30.571 0-56.332-23.77-58.787-54.242a4.412 4.412 0 01-.012-.325c0-2.398 1.973-4.371 4.371-4.371H365.432z" style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:5px"/>
</g>
<g id="F">
<path class="f" id="f-1" d="M321.609 53.467a7.083 7.083 0 00-7.08-7.08h-80.198a7.083 7.083 0 00-7.08 7.08v9.431a7.083 7.083 0 007.08 7.08h80.198a7.083 7.083 0 007.08-7.08v-9.431z" style="fill:none;stroke:#000;stroke-width:5px"/>
<path class="f" id="f-2" d="M321.609 100.649a7.083 7.083 0 00-7.08-7.08h-80.198a7.083 7.083 0 00-7.08 7.08v9.431a7.083 7.083 0 007.08 7.08h80.198a7.083 7.083 0 007.08-7.08v-9.431z" style="fill:none;stroke:#000;stroke-width:5px"/>
<path class="f" id="f-3" d="M231.672 140.745c-2.425 0-4.421 1.996-4.421 4.421V183.5c0 2.425 1.996 4.421 4.421 4.421h14.749c2.425 0 4.421-1.996 4.421-4.421v-38.334c0-2.425-1.996-4.421-4.421-4.421h-14.749z" style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:5px"/>
</g>
</g>
</svg>
body {
background: #FBC1F5;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.f, .o, .r, .e, .m {
visibility: hidden;
}
// .f {
// animation: draw 5s ease-out forwards;
// }
// .o {
// animation: draw 5s 1s ease-out forwards;
// }
// @keyframes draw {
// 60%{
// fill: black;
// }
// 100% {
// stroke-dashoffset: 0;
// }
// }gsap.set(".f, .o, .r, .e, .m", {
strokeDasharray: "100%",
strokeDashoffset: "100%",
autoAlpha: 1
})
// let tl = gsap.timeline();
// tl.from(".f", {
// drawSVG:"0%"
// })
// .to(".f", {
// duration: 0.5,
// fill: "black"
// })
// .from(".o", {
// drawSVG:"0%"
// })
// .to(".o", {
// duration: 0.5,
// fill: "black"
// })
function draw(element) {
let drawTL = gsap.timeline();
drawTL.from(element, {
drawSVG: "0%",
duration: 0.5,
ease: "power1.out"
}).to(element, {
duration: 0.5,
fill: "black",
stagger: {amount: 0.15, ease: "power2.out"}
})
return drawTL
}
let main = gsap.timeline();
main.add(draw(".f"))
.add(draw(".o"),"-=0.7")
.add(draw(".r"),"-=0.7")
.add(draw(".e"),"-=0.7")
.add(draw(".m"),"-=0.7")
External CSS
This Pen doesn't use any external CSS resources.