<div class="container">
<svg id="text-svg" xmlns="http://www.w3.org/2000/svg" width="400px" viewBox="100 70 276.87 167.02">
<g id="Text-thin" fill="none" stroke="#cf1515" stroke-linecap="round" stroke-linejoin="round">
<!-- <path id="T-top-2" pathLength="1" d="M146.3 118.61c23.43-15.65 51.15-23.28 78.29-30.74" /> -->
<!-- <path id="T-bottom-2" pathLength="1" d="M186.56 113.03c-2.28 19.11-20.13 34.24-20.29 53.48" /> -->
<!-- <path id="ripti-thin" pathLength="1" stroke="blue" d="m189.97 127.67 8.32-5.91c1.72-1.22.39-4.02-1.6-3.32-1.63.57-2.02 2.92-1.12 4.39.44.72 1.08 1.26 1.77 1.83.87.7.71 2.02-.26 2.59-1.43.84-2.45 2.51-2.02 4.07.66 2.39 4.21 1.58 6.27.58 5.63-2.74 9.55-6.31 13.9-10.85-1.38 1.38-3.51 4.13-5.38 6-3.22 3.22-3.68 3.79-3.86 4.71-.12.62-.05 1.05.65.98l1.2-.1c.24-.02.48-.07.71-.16.88-.33 2.08-.7 2.39-.81 2.23-.84 12.12-7.74 18.2-12.08 0 0 .01 0 .01.01a158.063 158.063 0 0 1-23.88 35.33h-.01c.27-7.05 4.26-13.98 8.18-19.84 4.28-6.4 8.73-9.74 14.26-13.6 2.22-1.55 2.96-2.23 5.21-3.23 6.22-2.79 4.54 9.7.14 12.29-3.2 1.89-5.61.56-7.72-.97h-.01c10.37 2 23.92-6.41 30.9-19.46-1.45 3.4-3.74 6.22-6.24 8.94-2.64 2.88-3.68 5.33-4.96 9.1-2.08 6.11 5.08 6.29 8.76 4.47 5.6-2.77 8.37-7.67 12.23-11.52-1.08 1.98-1.71 1.26-3.29 3.31s-3.72 4.15-5.5 6.46c-1.25 1.62 2.93 1.61 4.74.64l10.25-5.26" /> -->
</g>
<g id="Text-thick" fill="none" stroke="#cf1515" stroke-linecap="round" stroke-linejoin="round" stroke-width="3">
<path id="T-top" pathLength="1" d="M143.1 116.56c23.43-15.65 51.15-23.28 78.29-30.74" />
<path id="T-bottom" pathLength="1" d="M183.37 110.99c-2.28 19.11-20.13 34.24-20.29 53.48" />
<path id="T-small-h" pathLength="1" d="m237.84 117 31.19-3.02" />
<path id="ripti" pathLength="1" d="m186.78 125.62 8.32-5.91c1.72-1.22.39-4.02-1.6-3.32-1.63.57-2.02 2.92-1.12 4.39.44.72 1.08 1.26 1.77 1.83.87.7.71 2.02-.26 2.59-1.43.84-2.45 2.51-2.02 4.07.66 2.39 4.21 1.58 6.27.58 5.63-2.74 9.55-6.31 13.9-10.85-1.38 1.38-3.51 4.13-5.38 6-3.22 3.22-3.68 3.79-3.86 4.71-.12.62-.05 1.05.65.98l1.2-.1c.24-.02.48-.07.71-.16.88-.33 2.08-.7 2.39-.81 2.23-.84 12.12-7.74 18.2-12.08 0 0 .01 0 .01.01a158.063 158.063 0 0 1-23.88 35.33h-.01c.27-7.05 4.26-13.98 8.18-19.84 4.28-6.4 8.73-9.74 14.26-13.6 2.22-1.55 2.96-2.23 5.21-3.23 6.22-2.79 4.54 9.7.14 12.29-3.2 1.89-5.61.56-7.72-.97h-.01c10.37 2 23.92-6.41 30.9-19.46-1.45 3.4-3.74 6.22-6.24 8.94-2.64 2.88-3.68 5.33-4.96 9.1-2.08 6.11 5.08 6.29 8.76 4.47 5.6-2.77 8.37-7.67 12.23-11.52-1.08 1.98-1.71 1.26-3.29 3.31s-3.72 4.15-5.5 6.46c-1.25 1.62 2.93 1.61 4.74.64l10.25-5.26" />
<path id="i-2-dot" pathLength="1" d="m270.92 106.1-1.79 1.84c.07 1.16 1.86 1.71 2.57.8s-.27-2.51-.78-2.64Z" />
<path id="i-1-dot" pathLength="1" d="m219.86 106.23-.78 2.03c.67.61 1.97 0 1.91-.91s-1.43-1.35-1.13-1.11Z" />
</g>
<g id="bottom-line" pathLength="1" fill="none" stroke="#cf1515" stroke-linecap="round" stroke-linejoin="round">
<path id="bottom-line-2" pathLength="1" d="M215.84 158.38c18.97-9.1 39.57-14.78 60.52-16.66" />
<path id="bottom-line-3" pathLength="1" d="M215.84 156.75c18.97-9.1 39.57-14.78 60.52-16.66" />
<path id="bottom-line-1" pathLength="1" d="M213.84 153.7c18.97-9.1 39.57-14.78 60.52-16.66" stroke-width="3" />
</g>
<g id="Text-thin" fill="none" stroke="#cf1515" stroke-linecap="round" stroke-linejoin="round">
<!-- <path id="T-top-2" pathLength="1" d="M146.3 118.61c23.43-15.65 51.15-23.28 78.29-30.74" /> -->
<!-- <path id="T-bottom-2" pathLength="1" d="M186.56 113.03c-2.28 19.11-20.13 34.24-20.29 53.48" /> -->
<!-- <path id="ripti-thin" pathLength="1" d="m189.97 127.67 8.32-5.91c1.72-1.22.39-4.02-1.6-3.32-1.63.57-2.02 2.92-1.12 4.39.44.72 1.08 1.26 1.77 1.83.87.7.71 2.02-.26 2.59-1.43.84-2.45 2.51-2.02 4.07.66 2.39 4.21 1.58 6.27.58 5.63-2.74 9.55-6.31 13.9-10.85-1.38 1.38-3.51 4.13-5.38 6-3.22 3.22-3.68 3.79-3.86 4.71-.12.62-.05 1.05.65.98l1.2-.1c.24-.02.48-.07.71-.16.88-.33 2.08-.7 2.39-.81 2.23-.84 12.12-7.74 18.2-12.08 0 0 .01 0 .01.01a158.063 158.063 0 0 1-23.88 35.33h-.01c.27-7.05 4.26-13.98 8.18-19.84 4.28-6.4 8.73-9.74 14.26-13.6 2.22-1.55 2.96-2.23 5.21-3.23 6.22-2.79 4.54 9.7.14 12.29-3.2 1.89-5.61.56-7.72-.97h-.01c10.37 2 23.92-6.41 30.9-19.46-1.45 3.4-3.74 6.22-6.24 8.94-2.64 2.88-3.68 5.33-4.96 9.1-2.08 6.11 5.08 6.29 8.76 4.47 5.6-2.77 8.37-7.67 12.23-11.52-1.08 1.98-1.71 1.26-3.29 3.31s-3.72 4.15-5.5 6.46c-1.25 1.62 2.93 1.61 4.74.64l10.25-5.26" /> -->
</g>
<g id="Text-T" fill="none" stroke="#cf1515" stroke-linecap="round" stroke-linejoin="round">
<!-- <path id="T-top-3" pathLength="1" d="M137.56 116.56c23.43-15.65 51.15-23.28 78.29-32.74" />
<path id="T-bottom-3" pathLength="1" d="M177.82 110.99c-2.28 19.11-20.13 34.24-20.29 53.48" /> -->
</g>
</svg>
</div>
<div class="template-footer">
<a href="https://www.youtube.com/@trapti_rahangdale"><svg xmlns="http://www.w3.org/2000/svg" width="30px" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z" fill="#FF0000"/></svg></a>
<a href="https://iamtrapti.com/"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" viewBox="0 0 26 26">
<defs />
<g fill="#030104">
<path d="M8.083 11.222L6.419 15a.276.276 0 01-.257.154H5.31c-.113 0-.216-.061-.256-.154l-.79-1.803a15.454 15.454 0 01-.213-.517c-.073.186-.148.359-.223.525l-.833 1.8a.277.277 0 01-.255.149h-.852a.276.276 0 01-.259-.158L.072 11.217c-.03-.074-.018-.156.034-.221s.135-.103.225-.103h.959c.121 0 .227.069.263.169l.684 1.92c.057.162.11.315.159.461.06-.146.125-.3.194-.463l.842-1.932a.277.277 0 01.256-.155h.792c.115 0 .217.063.258.157l.798 1.89c.072.17.136.329.195.479.049-.142.106-.296.171-.465l.737-1.898a.275.275 0 01.26-.164h.926a.29.29 0 01.227.104.22.22 0 01.031.226zm8.922 0L15.341 15a.276.276 0 01-.256.154h-.854a.276.276 0 01-.256-.154l-.789-1.803a13.647 13.647 0 01-.214-.517c-.073.186-.148.359-.223.525l-.833 1.8a.276.276 0 01-.255.149h-.853a.277.277 0 01-.259-.158l-1.557-3.779a.218.218 0 01.034-.221.291.291 0 01.225-.103h.959c.121 0 .227.069.263.169l.683 1.92.161.461c.059-.146.123-.3.192-.463l.843-1.932a.275.275 0 01.256-.155h.792c.115 0 .218.063.258.157l.799 1.89c.071.17.135.329.193.479.051-.142.106-.296.172-.465l.737-1.898c.038-.098.144-.164.261-.164h.926c.092 0 .177.039.227.104a.218.218 0 01.032.226zm8.921 0L24.263 15a.277.277 0 01-.257.154h-.853c-.113 0-.216-.061-.256-.154l-.789-1.803a13.647 13.647 0 01-.214-.517c-.073.186-.149.359-.224.525l-.833 1.8a.277.277 0 01-.255.149h-.852a.277.277 0 01-.26-.158l-1.557-3.779c-.029-.074-.019-.156.033-.221s.136-.103.226-.103h.96c.121 0 .227.069.262.169l.684 1.92.16.461c.059-.146.123-.3.192-.463l.843-1.932a.278.278 0 01.257-.155h.791c.115 0 .218.063.258.157l.798 1.89c.072.17.137.329.196.479.049-.142.106-.296.171-.465l.738-1.898c.037-.098.142-.164.26-.164h.926c.092 0 .176.039.227.104a.224.224 0 01.031.226zM2.71 9c.283-.718.637-1.401 1.057-2.037.062.012.12.037.185.037h1.88a18.675 18.675 0 00-.49 2h2.055c.155-.699.335-1.376.562-2h9.986c.227.624.407 1.301.562 2h2.055a18.675 18.675 0 00-.49-2h1.88c.065 0 .123-.025.186-.037.418.636.773 1.319 1.056 2.037h2.121c-1.691-5.216-6.591-9-12.363-9S2.28 3.784.588 9H2.71zm17.768-4H19.29a12.54 12.54 0 00-.851-1.519c.74.428 1.422.938 2.039 1.519zm-7.526-3c1.551 0 2.983 1.154 4.062 3H8.89c1.079-1.846 2.511-3 4.062-3zM7.463 3.481c-.308.469-.592.976-.85 1.519H5.426a11.074 11.074 0 012.037-1.519zM23.194 17c-.283.719-.638 1.4-1.057 2.037-.062-.012-.12-.037-.185-.037h-1.881c.199-.634.355-1.309.49-2h-2.055a15.848 15.848 0 01-.562 2H7.959a16.018 16.018 0 01-.562-2H5.343c.135.691.291 1.366.49 2H3.952c-.065 0-.123.025-.185.037A11.107 11.107 0 012.71 17H.588c1.692 5.216 6.592 9 12.364 9s10.672-3.784 12.363-9h-2.121zM5.426 21h1.188c.258.543.542 1.051.85 1.519A11.048 11.048 0 015.426 21zm7.526 3c-1.551 0-2.983-1.154-4.062-3h8.123c-1.078 1.846-2.51 3-4.061 3zm5.488-1.481c.309-.468.593-.976.851-1.519h1.188c-.618.581-1.3 1.091-2.039 1.519z" />
</g>
</svg> </a>
<a href="https://twitter.com/imtraptir">
<svg width="20px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512">
<path style="fill:#03A9F4;" d="M512,97.248c-19.04,8.352-39.328,13.888-60.48,16.576c21.76-12.992,38.368-33.408,46.176-58.016
c-20.288,12.096-42.688,20.64-66.56,25.408C411.872,60.704,384.416,48,354.464,48c-58.112,0-104.896,47.168-104.896,104.992
c0,8.32,0.704,16.32,2.432,23.936c-87.264-4.256-164.48-46.08-216.352-109.792c-9.056,15.712-14.368,33.696-14.368,53.056
c0,36.352,18.72,68.576,46.624,87.232c-16.864-0.32-33.408-5.216-47.424-12.928c0,0.32,0,0.736,0,1.152
c0,51.008,36.384,93.376,84.096,103.136c-8.544,2.336-17.856,3.456-27.52,3.456c-6.72,0-13.504-0.384-19.872-1.792
c13.6,41.568,52.192,72.128,98.08,73.12c-35.712,27.936-81.056,44.768-130.144,44.768c-8.608,0-16.864-0.384-25.12-1.44
C46.496,446.88,101.6,464,161.024,464c193.152,0,298.752-160,298.752-298.688c0-4.64-0.16-9.12-0.384-13.568
C480.224,136.96,497.728,118.496,512,97.248z" />
</svg>
</a>
</div>:root {
/* 12.75-13.33px */
--step--1: clamp(0.83rem, calc(0.78rem + 0.07vw), 0.8rem);
/* 17-20px */
--step-0: clamp(1.06rem, calc(0.99rem + 0.37vw), 1.25rem);
/* 22.66-30px */
--step-1: clamp(1.42rem, calc(1.24rem + 0.9vw), 1.88rem);
/* 30.21-45px */
--step-2: clamp(1.89rem, calc(1.53rem + 1.8vw), 2.81rem);
/* 40.27-67.5px */
--step-3: clamp(2.52rem, calc(1.85rem + 3.32vw), 4.22rem);
/* 53.67-101.25px */
--step-4: clamp(3.35rem, calc(2.19rem + 5.8vw), 6.33rem);
/* 71.55-151.88px */
--step-5: clamp(4.47rem, calc(2.51rem + 9.8vw), 9.49rem);
--delay-1: 1s;
--delay-2: 2s;
--delay-3: 3s;
--delay-4: 4s;
--delay-5: 5s;
}
body {
font-family: "Montserrat", sans-serif;
font-size: 1rem;
/* background-color: #191919; */
/* background-color: #F5F5F5; */
}
#text-svg path:not(#i-2-dot, #i-1-dot) {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation-name: line-animation;
animation-timing-function: cubic-bezier(0.23, 0.75, 0.4, 1);
animation-fill-mode: forwards;
}
#T-top {
/* stroke: #e3651d; */
stroke: #363062;
stroke-width: 3.5px;
animation-duration: 0.8s;
animation-delay: 0s;
}
#T-bottom {
opacity: 0;
/* stroke: #e3651d; */
stroke: #363062;
stroke-width: 3.5px;
animation-duration: 0.5s;
animation-delay: 0.8s;
}
#ripti {
opacity: 0;
/* stroke: #e3651d; */
stroke: #363062;
stroke-width: 3.5px;
animation-duration: 2.2s;
animation-delay: 1.3s;
}
#T-small-h {
/* stroke: #e3651d; */
stroke: #363062;
animation-duration: 1s;
animation-delay: 2.3s;
}
#i-2-dot,
#i-1-dot {
/* stroke: #bed754; */
stroke: #F99417;
animation-name: bounce-4;
animation-timing-function: ease;
animation-duration: 1.8s;
animation-delay: 3.2s;
opacity: 0;
animation-fill-mode: forwards;
transform: scale(1.1, 0.9) translateX(0) translateY(0);
}
#i-2-dot {
animation-delay: 3.5s;
}
@keyframes bounce-4 {
0% {
transform: scale(1.1, 0.9) translateX(0) translateY(0);
opacity: 1;
}
30% {
transform: scale(0.9, 1.1) translateX(50) translateY(-50px);
opacity: 1;
}
50% {
transform: scale(1, 1) translateX(0) translateY(0);
opacity: 1;
}
100% {
transform: scale(1, 1) translateX(0) translateY(0);
opacity: 1;
}
}
#bottom-line-1 {
opacity: 0;
/* stroke: #bed754; */
stroke: #F99417;
animation-duration: 1s;
animation-delay: 3.2s;
}
#bottom-line-3 {
opacity: 0;
/* stroke: #bed754; */
stroke: #F99417;
animation-duration: 0.8s;
animation-delay: 3.5s;
}
#bottom-line-2 {
opacity: 0;
/* stroke: #bed754; */
stroke: #F99417;
animation-duration: 0.8s;
animation-delay: 3.8s;
}
/* #ripti-thin {
opacity: 0;
stroke: #750e21;
animation: line-animation 1s 0.2s linear forwards;
}
#T-top-2,
#T-bottom-2,
#T-top-3,
#T-bottom-3 {
opacity: 0;
stroke: #750e21;
animation: line-animation 1s 0.2s linear forwards;
} */
@keyframes line-animation {
from {
opacity: 1;
stroke-dashoffset: 1;
}
to {
opacity: 1;
stroke-dashoffset: 0;
}
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.template-footer {
position: fixed;
bottom: 0;
right: 0;
height: 2rem;
width: 10rem;
border-radius: 5px 0 0 0;
background-color: #ffffba;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.8rem 1.6rem;
}
// gsap.set('#text-svg', {autoAlpha: 1})
// gsap.set(["#Text-thick #T-top", "#Text-thick #T-bottom", "#bottom-line-1", "#bottom-line-2", "#bottom-line-3", "#Text-thin #T-top-2","#Text-thin #T-bottom-2", "#T-top-3", "#T-bottom-3", "#ripti", "#ripti-thin", "#T-small-h", "#i-2-dot", "#i-1-dot"], {drawSVG: "0% 0%"})
// let tl = gsap.timeline({defaults: {ease: "sine.out"}})
// const duration = 0.3
// tl
// .to("#Text-thick #T-top", {drawSVG: true, duration: duration})
// .to("#Text-thin #T-top-2", {drawSVG: true, duration: duration}, "<0.01")
// .to("#Text-thin #T-top-2", {drawSVG: "100% 100%", duration: duration}, ">")
// .to("#T-top-3", {drawSVG: "20% 50%", duration: duration/2}, "<")
// .to("#T-top-3", {drawSVG: "100% 100%", duration: duration/2}, ">")
// .to("#Text-thick #T-bottom", {drawSVG: true, duration: duration}, 0)
// .to("#Text-thin #T-bottom-2", {drawSVG: true, duration: duration}, "<0.01")
// .to("#Text-thin #T-bottom-2", {drawSVG: "100% 100%", duration: duration}, ">")
// .to("#T-bottom-3", {drawSVG: "20% 50%", duration: duration/2}, "<")
// .to("#T-bottom-3", {drawSVG: "100% 100%", duration: duration/2}, ">")
// .to("#ripti", {drawSVG: true, duration: 1})
// .to("#ripti-thin", {drawSVG: true, duration: 1}, "<0.1")
// .to("#ripti-thin", {drawSVG: "100% 100%", duration: 1}, "<0.1")
// .to("#i-1-dot", {drawSVG: true, duration: 0.15})
// .to("#T-small-h", {drawSVG: true, duration: 0.15}, ">")
// .to("#i-2-dot", {drawSVG: true, duration: 0.15}, ">")
// .to("#bottom-line-1", {drawSVG: true, duration: duration*2})
// .to("#bottom-line-3", {drawSVG: "0% 50%", duration: duration}, "<")
// .to("#bottom-line-3", {drawSVG: "50% 100%", duration: duration/2},">")
// .to("#bottom-line-3", {drawSVG: "100% 100%", duration: duration/2},">")
// .to("#bottom-line-2", {drawSVG: "0% 50%", duration: duration/2}, "<-0.25")
// .to("#bottom-line-2", {drawSVG: "100% 100%", duration: duration/2}, ">")
External CSS
This Pen doesn't use any external CSS resources.