<form class='signup'>
<input class='email' placeholder='email' type='email' maxlength="20">
<input type='submit' value='Subscribe'>
</form>
<div class="wrap">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 570.9 139.6">
<defs>
<filter id="squiggly-0">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"/>
<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="2" />
</filter>
<filter id="squiggly-1">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
</filter>
<filter id="squiggly-2">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
</filter>
<filter id="squiggly-3">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
</filter>
<filter id="squiggly-4">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="1" />
</filter>
<linearGradient id="Gradient1" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="rgba(166,166,164,0.0001)" />
<stop offset="5%" stop-color="rgba(166,166,164,0.0001)" />
<stop offset="30%" stop-color="rgba(166,166,164,1)" />
<stop offset="95%" stop-color="rgba(166,166,164,1)" />
<stop offset="100%" stop-color="rgba(119,119,119,0.5)" />
</linearGradient>
<linearGradient id="Gradient2" gradientTransform="rotate(0)">
<stop offset="0%" stop-color="rgba(255,255,255,1)" />
<stop offset="0.5%" stop-color="rgba(255,255,255,1)" />
<stop offset="0.5%" stop-color="rgba(255,255,255,0.00001)" />
<stop offset="95%" stop-color="rgba(255,255,255,0.00001)" />
<stop offset="100%" stop-color="rgba(255,255,255,0.00001)" />
</linearGradient>
<linearGradient id="Gradient3" gradientTransform="rotate(0)">
<stop offset="0%" stop-color="rgba(173,216,230,1)" />
<stop offset="4.5%" stop-color="rgba(173,216,230,1)" />
<stop offset="4.5%" stop-color="rgba(173,216,230,0.00001)" />
<stop offset="95%" stop-color="rgba(173,216,230,0.00001)" />
<stop offset="100%" stop-color="rgba(173,216,230,0.00001)" />
</linearGradient>
<linearGradient id="Gradient4" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#fff" />
<stop offset="2.5%" stop-color="#fff" />
<stop offset="5%" stop-color="#222" />
<stop offset="95%" stop-color="#222" />
<stop offset="100%" stop-color="#222" />
</linearGradient>
<pattern id="pattern"
width="1" height="10"
patternUnits="userSpaceOnUse"
patternTransform="rotate(-45 50 50)">
<line stroke="#fff" stroke-width="10px" y2="10"/>
<line stroke="#222" stroke-width="0.5px" y2="10"/>
</pattern>
</defs>
<g id="Layer_2" data-name="Layer 2"><path class="cls-1" d="M10.7,123h1.9a2,2,0,0,1,2,2v9.7a2,2,0,0,1-2,2H10.7a2,2,0,0,1-2-2V125A1.94,1.94,0,0,1,10.7,123Z" transform="translate(0 0)"/><path class="cls-1" d="M62.7,123h1.9a2,2,0,0,1,2,2v9.7a2,2,0,0,1-2,2H62.7a2,2,0,0,1-2-2V125A1.94,1.94,0,0,1,62.7,123Z" transform="translate(0 0)"/><path id="track-wide" class="cls-1" d="M497.4,123.6c-25.9,0-39.5-6.7-55.4-14.5-4.7-2.3-9.5-4.7-15-7-21.3,11.4-40,16.8-58.8,16.8-31.4,0-165.6.5-242.9.8H106.1l-25.1.1H72.7c-10.9.1-20.2.1-25.8.1a3.5,3.5,0,0,1,0-7l34.1-.1,25.1-.1h.1l18.7-.1c7.4-1.1,18.1-21.1,27.6-38.8,14.9-27.7,31.8-59.1,52.7-59.8,20.6-.6,28,22.6,34.5,43,5.2,16.4,10.2,32,20.2,32,14.6-.1,24.7-12.1,32.9-21.7,6.4-7.6,11.5-13.6,17.8-13.6,7.5,0,17,10,28,21.5,7.9,8.2,17.6,18.5,22.2,19a67.92,67.92,0,0,0,7.8.4A93.54,93.54,0,0,0,396.8,90c-25.5-11.1-48-26.7-41.6-54.4,4.5-19.4,23-32,47.1-32,11.7,0,23,3.1,31.9,8.8,15.6,10,24.1,22.4,24.1,34.7-.1,12-8,23-23.5,32.7A162.12,162.12,0,0,1,416,90l2.5.9c2.7,1,5.4,2.1,8.2,3.2,8.4-4.7,16.3-9.8,24-14.7,19-12.3,35.5-22.8,51.8-22.8a34.54,34.54,0,0,1,12.4,2.3c20.4,7.9,32.4,23.7,30,39.3-2.3,14.4-16.2,23.8-37.2,25C504,123.5,500.6,123.6,497.4,123.6ZM434.6,97.8c3.7,1.7,7.1,3.4,10.5,5,15.7,7.7,28.1,13.8,52.3,13.8,3.1,0,6.4-.1,9.8-.3,17.5-1,29-8.2,30.7-19.1,1.9-12.1-8.6-25.1-25.6-31.7a28,28,0,0,0-9.9-1.8c-14.2,0-29.9,10.1-48,21.7C448,89.5,441.5,93.7,434.6,97.8ZM206,21h-.6c-16.9.5-33.4,31.4-46.7,56.2-8,15-15,27.9-21.9,35.4,78.5-.3,201.5-.8,231.4-.8,16.1,0,32.2-4.2,50.3-13.3l-2.5-.9c-3.5-1.3-6.6-2.5-9.5-3.6-13.1,4.9-25.9,7.4-37.9,7.4a79.35,79.35,0,0,1-8.5-.4c-7.1-.8-16.1-10.2-26.5-21.1-7.8-8.2-18.4-19.3-23-19.3-3.1,0-7.8,5.7-12.4,11.1-8.6,10.2-20.4,24.2-38.1,24.2h0c-15.2,0-20.9-17.9-26.9-36.8C227.1,40.4,220.9,21,206,21ZM402.2,10.6c-15.7,0-35.7,7-40.2,26.6-5.8,25.1,17.8,38.6,44.6,49.3A156.34,156.34,0,0,0,431,73.9c13.3-8.3,20.1-17.4,20.2-26.8.1-9.9-7.3-20.1-20.9-28.8C422.6,13.4,412.6,10.6,402.2,10.6Z" transform="translate(0 0)"/><path id="track-narrow" class="cls-1" d="M500.4,114.3c-26.1,0-39.2-6.4-55.9-14.6-5.5-2.7-11.2-5.5-17.8-8.3-22.2,12.5-40.3,18.1-58.6,18.1H368c-32.4,0-169.3.5-248.1.8H100.1l-25.1.1H66.3c-11.2.1-20.6.1-26.3.1h0a1,1,0,0,1,0-2l35.1-.1c8,0,16.6-.1,25.1-.1h.1l19.6-.1c8.8-1.1,19.2-20.5,30.2-41.1,14.9-27.8,31.8-59.3,51.7-60h.7c18.6,0,27.5,19.1,34.1,39.9,5.6,17.7,8.9,36.8,21,36.8h0c16.1-.1,26.2-12.8,34.3-23C297.5,53.7,302,48,307.3,48c6.6,0,17,11.2,26.5,22.1,8.4,9.7,15.6,18.7,21.2,19.3q3,.3,6,.3c5.9,0,21.4-.8,41.5-7.4-8.4-3-22.9-8.7-30.2-10.8-4.9-1.4-3.1,1.3-6.9-1.4-2.9-2-5.8-7-7.7-9.9C353.6,54,351.8,42.4,354,33c5.2-22.7,30.3-33,51.5-33,11.2,0,22.7,2.5,30.5,7.6,15.8,10.1,23.1,20.4,23,31.1,0,24.6-7.4,20.7-21.7,29.6a169.74,169.74,0,0,1-28.7,14.1l.4.2c3.2,1.1,6.4,2.3,9.6,3.5,2.7,1,5.3,2,8,3.2,7.9-4.5,15.5-9.4,22.9-14.1,19.4-12.4,37.8-24.2,55-24.2A35.4,35.4,0,0,1,517,53.2c21.9,8.1,28.2,22,28.1,37.6-.1,8.6-.5,9.2-1.8,11.6-1.8,3.5-5.3,1.7-9.2,4.5-5.5,3.9-13.3,6.8-23.8,7.3C506.9,114.2,503.6,114.3,500.4,114.3ZM429,90.1c6.1,2.6,11.4,5.2,16.5,7.7,16.4,8.1,29.4,14.4,55,14.4,3.1,0,6.4-.1,9.8-.3,13-.7,23.1-5.3,28.5-12.5,2.2-2.9,3.9-5.5,4.2-9.3,1-13.4-5.8-27.4-26.7-35.2a33.73,33.73,0,0,0-11.8-2.1c-16.6,0-34.7,11.6-53.9,23.8C443.7,81.2,436.5,85.8,429,90.1ZM202.4,9.2h-.6c-18.7.6-35.3,31.5-49.9,58.9-9.8,18.3-18.5,34.5-26.8,40.1,79.5-.3,211.3-.8,243-.8h.1c17.5,0,34.9-5.3,56.2-17-2.2-.9-4.3-1.7-6.5-2.5-3.2-1.2-6.4-2.3-9.6-3.5l-2.7-1c-21.5,7.6-38.3,8.4-44.5,8.4-2.1,0-4.1-.1-6.2-.3-6.4-.7-13.5-10-22.5-20.5-8.8-10-19.3-20.9-25-20.9-4.3,0-8.8,5.6-14,12.2C285,72.8,274.5,85.9,257.5,86h0c-13.7,0-16.5-17.8-22.3-36.3C228.8,29.6,219.5,9.2,202.4,9.2ZM405.5,2.1C385.1,2,361,11.9,356,33.5c-5.9,25.5,16.8,35.9,49.6,47.8a162.59,162.59,0,0,0,30.6-14.7C449.9,58,456.9,49,457,39.6c.1-10-5.8-20-21-29.7-7.6-4.8-19.7-7.9-30.5-7.8Z" transform="translate(0 0)"/><rect class="cls-1" x="210.8" y="16.6" width="2.1" height="118.9"/><rect class="cls-1" x="227.8" y="34.9" width="2.1" height="100.6"/><rect class="cls-1" x="244.8" y="84.3" width="2.1" height="51.1"/><rect class="cls-1" x="261.8" y="90.4" width="2.1" height="45.1"/><rect class="cls-1" x="278.8" y="85.2" width="2.1" height="50.3"/><rect class="cls-1" x="295.8" y="70.2" width="2.1" height="65.3"/><rect class="cls-1" x="312.8" y="58.7" width="2.1" height="76.8"/><rect class="cls-1" x="329.8" y="70.2" width="2.1" height="65.3"/><rect class="cls-1" x="346.8" y="86.2" width="2.1" height="49.3" transform="translate(-0.33 1.03) rotate(-0.17)"/><rect class="cls-1" x="363.8" y="24.1" width="2.1" height="111.3"/><rect class="cls-1" x="380.8" y="12.4" width="2.1" height="123.1"/><rect class="cls-1" x="397.8" y="7.6" width="2.1" height="127.9"/><rect class="cls-1" x="414.8" y="7.6" width="2.1" height="127.9"/><rect class="cls-1" x="431.8" y="16.6" width="2.1" height="118.9"/><rect class="cls-1" x="448.8" y="30" width="2.1" height="105.4"/><rect class="cls-1" x="465.8" y="73.2" width="2.1" height="62.3"/><rect class="cls-1" x="482.8" y="62.5" width="2.1" height="73"/><rect class="cls-1" x="499.8" y="62.5" width="2.1" height="73"/><rect class="cls-1" x="516.8" y="62.5" width="2.1" height="73"/><rect class="cls-1" x="533.8" y="78.7" width="2.1" height="56.8"/><rect class="cls-1" x="195.1" y="20.9" width="2.1" height="115.6"/><rect class="cls-1" x="179.6" y="34.9" width="2.1" height="102.3"/><rect class="cls-1" x="163.6" y="59.7" width="2.1" height="78.4"/><rect class="cls-1" x="147.6" y="88.4" width="2.1" height="50.5"/><rect class="cls-1" x="131.6" y="116" width="2.1" height="23.4"/><rect class="cls-1" x="115.6" y="116.2" width="2.1" height="23.4"/><rect class="cls-1" x="99.6" y="115.9" width="2.1" height="23.4"/><rect class="cls-1" x="83.6" y="116.1" width="2.1" height="23.4"/></g></g><path id="coaster-track" class="cls-2" d="M43.4,116c20.25.2,40.42-.26,60.07,0,20.48.27,40.95-.19,61.43,0,40.58.38,81.17.21,121.75,0,22.55-.12,45.47,1.41,68.08.88,4.11-.1,8.21-.26,12.29-.52A148.35,148.35,0,0,0,438.18,93c13.35-8.66,25.37-19.54,39.81-26.23,8.25-3.82,17.42-6.22,26.43-5.07,10.12,1.3,19.27,7,26.53,14.13,5,5,9.49,11.19,9.62,18.25.17,10-8.39,18.08-17.47,22.23-14.61,6.66-31.59,6.49-47.18,2.69-18.19-4.44-34.59-13.76-51.73-20.86-16.53-6.84-33.86-12.72-48.43-23.38C363.57,65.83,354.13,51,356.93,36.17c2.05-10.81,10.41-19.76,20.45-24.25S398.9,7,409.74,8.82c22.89,3.84,56.48,24.63,39.51,52-6.77,10.92-18.63,16.81-29.8,22.91-12.18,6.67-25.67,10.64-39.29,13.34-6,1.19-12.27,2.15-18.3.92-9.54-2-17.17-9.06-23.37-16.57-6.53-7.93-14.41-23.35-26.18-23.34-4.87,0-9.39,3.28-12.56,6.78-12.38,13.66-30.26,40.06-50.9,22.51-9.2-7.82-9.52-21.58-12.79-32.43-3.57-11.78-8.62-23.58-17.25-32.57-11.16-11.62-23-5.12-32.26,5C165.63,50.11,157.2,75.19,141.7,102c-2.39,4.14-5.88,8.48-9.91,11s-17.87,2.93-22.55,3.21c-11.4.7-22.83-.15-34.25-.21-5.63,0-22.16.24-27.78,0" transform="translate(0 0)"/>
<path id="coaster-track2" class="cls-2" d="M43.4,116c20.25.2,40.42-.26,60.07,0,20.48.27,40.95-.19,61.43,0,40.58.38,81.17.21,121.75,0,22.55-.12,45.47,1.41,68.08.88,4.11-.1,8.21-.26,12.29-.52A148.35,148.35,0,0,0,438.18,93c13.35-8.66,25.37-19.54,39.81-26.23,8.25-3.82,17.42-6.22,26.43-5.07,10.12,1.3,19.27,7,26.53,14.13,5,5,9.49,11.19,9.62,18.25.17,10-8.39,18.08-17.47,22.23-14.61,6.66-31.59,6.49-47.18,2.69-18.19-4.44-34.59-13.76-51.73-20.86-16.53-6.84-33.86-12.72-48.43-23.38C363.57,65.83,354.13,51,356.93,36.17c2.05-10.81,10.41-19.76,20.45-24.25S398.9,7,409.74,8.82c22.89,3.84,56.48,24.63,39.51,52-6.77,10.92-18.63,16.81-29.8,22.91-12.18,6.67-25.67,10.64-39.29,13.34-6,1.19-12.27,2.15-18.3.92-9.54-2-17.17-9.06-23.37-16.57-6.53-7.93-14.41-23.35-26.18-23.34-4.87,0-9.39,3.28-12.56,6.78-12.38,13.66-30.26,40.06-50.9,22.51-9.2-7.82-9.52-21.58-12.79-32.43-3.57-11.78-8.62-23.58-17.25-32.57-11.16-11.62-23-5.12-32.26,5C165.63,50.11,157.2,75.19,141.7,102c-2.39,4.14-5.88,8.48-9.91,11s-17.87,2.93-22.55,3.21c-11.4.7-22.83-.15-34.25-.21-5.63,0-22.16.24-27.78,0" transform="translate(0 0)"/>
<path id="coaster-track3" class="cls-2" d="M43.4,116c20.25.2,40.42-.26,60.07,0,20.48.27,40.95-.19,61.43,0,40.58.38,81.17.21,121.75,0,22.55-.12,45.47,1.41,68.08.88,4.11-.1,8.21-.26,12.29-.52A148.35,148.35,0,0,0,438.18,93c13.35-8.66,25.37-19.54,39.81-26.23,8.25-3.82,17.42-6.22,26.43-5.07,10.12,1.3,19.27,7,26.53,14.13,5,5,9.49,11.19,9.62,18.25.17,10-8.39,18.08-17.47,22.23-14.61,6.66-31.59,6.49-47.18,2.69-18.19-4.44-34.59-13.76-51.73-20.86-16.53-6.84-33.86-12.72-48.43-23.38C363.57,65.83,354.13,51,356.93,36.17c2.05-10.81,10.41-19.76,20.45-24.25S398.9,7,409.74,8.82c22.89,3.84,56.48,24.63,39.51,52-6.77,10.92-18.63,16.81-29.8,22.91-12.18,6.67-25.67,10.64-39.29,13.34-6,1.19-12.27,2.15-18.3.92-9.54-2-17.17-9.06-23.37-16.57-6.53-7.93-14.41-23.35-26.18-23.34-4.87,0-9.39,3.28-12.56,6.78-12.38,13.66-30.26,40.06-50.9,22.51-9.2-7.82-9.52-21.58-12.79-32.43-3.57-11.78-8.62-23.58-17.25-32.57-11.16-11.62-23-5.12-32.26,5C165.63,50.11,157.2,75.19,141.7,102c-2.39,4.14-5.88,8.48-9.91,11s-17.87,2.93-22.55,3.21c-11.4.7-22.83-.15-34.25-.21-5.63,0-22.16.24-27.78,0" transform="translate(-1.25 0)"/>
<foreignobject class="node" x="0" y="0" width="5000" height="1222.63">
</foreignobject>
</svg>
</div>
<div class="abyss"></div>
<div class="abyss"></div>
body{
display:grid;
place-items:center;
height:100vh;
width:100vw;
overflow:hidden;
font-family:'Roboto Mono';
background:#fff;
animation: squiggly-anim 0.4s infinite;
@keyframes squiggly-anim {
0% {
-webkit-filter: url('#squiggly-0');
filter: url('#squiggly-0');
}
25% {
-webkit-filter: url('#squiggly-1');
filter: url('#squiggly-1');
}
50% {
-webkit-filter: url('#squiggly-2');
}
75% {
-webkit-filter: url('#squiggly-3');
filter: url('#squiggly-3');
}
100% {
-webkit-filter: url('#squiggly-4');
filter: url('#squiggly-4');
}
}
.abyss{
width:80px;
height:200px;
position:absolute;
top:calc(50% - 30px);
left:calc(50% - 500px);
border-radius:100%;
z-index:9999;
transform:translateX(-50vw);
transition:1s ease-in-out;
transition-delay:0s;
@media (max-width:1000px){
left:50%;
transform:translateX(-100vw);
}
&:nth-of-type(2){
z-index:-1;
&:after{
content:'';
position:absolute;
width:100%;
height:100%;
top:0;
right:17.5px;
border-radius:100%;
background:#222;
}
}
&:before{
content:'';
position:absolute;
width:100%;
height:300px;
top:-50px;
right:50%;
background:linear-gradient(to bottom, transparent 50px, #222 50px, #222 51px, #fff 51px, #fff 249px, #222 249px, #222 250px, transparent 250px);
z-index:-1;
mask:radial-gradient(ellipse at right, transparent 0%, transparent 50%, #fff 50%);
}
&:after{
content:'';
position:absolute;
width:100vw;
height:300px;
top:-50px;
right:150%;
background:linear-gradient(to bottom, transparent 50px, #222 50px, #222 51px, #fff 51px, #fff 249px, #222 249px, #222 250px, transparent 250px);
z-index:-1;
}
}
&.submitted{
.abyss{
transition-delay:11.5s;
transform:translateX(0);
}
form{
opacity:0;
input[type="email"]{
color:transparent;
background:rgba(255,255,255,0);
}
}
}
form{
position:absolute;
z-index:9999;
width: 500px;
left: calc(50% - 280px);
margin-left: 30px;
height: 45px;
top: calc(50% + 24px);
transition:opacity 0.3s ease-in-out;
transition-delay:1s;
overflow:hidden;
input{
box-shadow:inset 0 0 0 1px #222;
box-sizing:border-box;
outline:none;
}
input[type="email"]{
position:absolute;
left:0;
top:0;
height:100%;
background:transparent;
border:none;
width:100%;
padding:0 5px;
font-family:'Roboto Mono';
font-size:25px;
letter-spacing:1.5px;
background:rgba(255,255,255,1);
transition:0.3s ease-in-out;
}
input[type="submit"]{
left:auto;
right:0;
position:absolute;
height:100%;
width:150px;
background:#222;
color:#fff;
border:none;
font-family:'Roboto Mono';
font-size:25px;
transform-origin:right;
transition:transform 0.3s ease-in-out, color 0.2s ease-in-out;
transition-delay:0.3s, 0s;
cursor:pointer;
}
}
.wrap{
width:500px;
height:100%;
position:absolute;
z-index:999;
left:calc(50% - 280px);
&:after{
content:'';
position:absolute;
width:1000vw;
height:100vh;
top:calc(50% + 135px);
left:-50vw;
box-shadow:0 -1px 0 0 #222;
z-index:-1;
}
svg{
g{
rect{
transform-origin:bottom;
transform:scaleY(0);
transition:1s ease-in-out;
fill:#fff;
stroke:url(#Gradient4);
stroke-width:0.2;
rx: 1;
}
}
foreignObject{
.char{
display:flex;
justify-content:center;
align-items:center;
font-size:0px;
color:transparent;
line-height:0;
@for $i from 1 through 40{
&:nth-of-type(#{$i}){
offset-distance:calc(0% + #{($i) * 1.875}px);
&.empty{
div{
display:none;
}
}
&:before{
color:#222;
content:attr('data-char');
position:absolute;
font-size:3px;
left:0;
width:100%;
text-align:center;
height:100%;
display:flex;
justify-content:center;
align-items:center;
letter-spacing:0.25px;
}
}
}
}
}
}
.char{
font-size:0px;
color:transparent;
line-height:0;
position:absolute;
height:1.875px;
width:1.875px;
margin-top:-4px;
offset-path:path("M43.4,116h0c26.71.09,101-.19,121.5,0,40.58.38,81.17.21,121.75,0,22.55-.12,45.47,1.41,68.08.88,4.11-.1,8.21-.26,12.29-.52A148.36,148.36,0,0,0,438.18,93c13.35-8.66,25.37-19.54,39.81-26.23,8.25-3.82,17.42-6.22,26.43-5.07,10.12,1.3,19.27,7,26.53,14.13,5,5,9.49,11.19,9.62,18.25.17,10-8.39,18.08-17.47,22.23-14.61,6.66-31.59,6.49-47.18,2.69-18.19-4.44-34.59-13.76-51.73-20.86-16.53-6.84-33.86-12.72-48.43-23.38C363.57,65.83,354.13,51,356.93,36.17c2.05-10.81,10.41-19.76,20.45-24.25S398.9,7,409.74,8.82c22.89,3.84,56.48,24.63,39.51,52-6.77,10.92-18.63,16.81-29.8,22.91-12.18,6.67-25.67,10.64-39.29,13.34-6,1.19-12.27,2.15-18.3.92-9.54-2-17.17-9.06-23.37-16.57-6.53-7.93-14.41-23.35-26.18-23.34-4.87,0-9.39,3.28-12.56,6.78-12.38,13.66-30.26,40.06-50.9,22.51-9.2-7.82-9.52-21.58-12.79-32.43-3.57-11.78-8.62-23.58-17.25-32.57-11.16-11.62-23-5.12-32.26,5C165.63,50.11,157.2,75.19,141.7,102c-2.39,4.14-5.88,8.48-9.91,11s-17.87,2.72-22.55,3c-13.19-.16-79.81.06-91.23,0-5.63,0,34.82.24,29.2,0");
offset-rotate:auto;
transition:10s ease-in-out;
&:before{
content:attr(data-char);
color:#222;
font-size:3px;
}
div{
position:absolute;
height:55%;
width:100%;
z-index:2;
bottom:0;
left:0;
&:after{
content:'';
position:absolute;
width:1.75px;
height:1.75px;
border-radius:100%;
background:radial-gradient(circle at center, #222 0.15px, #fff 0.15px, #fff 0.65px, #222 0.65px, #222 0.75px, transparent 0.75px);
z-index:0;
bottom:-2px;
right:0;
opacity:0;
}
&:before{
content: '';
position: absolute;
width: 250%;
height: 5.25px;
left: -30%;
top: -2.5px;
z-index:2;
background: #222;
border-radius: 0;
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}
}
}
}
&.submitted{
svg{
#coaster-track, #coaster-track2{
transition:7s ease-in-out;
transition-delay:0s;
}
foreignObject{
.char{
div{
&:before{
animation:growIn 0.5s ease-in-out 1 forwards;
animation-delay:1.5s;
border-radius:50px;
@keyframes growIn{
from{
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}
to{
clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0% 100%);
}
}
}
&:after{
animation:growIn2 0.5s ease-in-out 1 forwards;
clip-path: polygon(0 30%, 100% 30%, 100% 100%, 0% 100%);
@keyframes growIn2{
from{
opacity:1;
bottom:-1px;
}
to{
opacity:1;
bottom:-3px;
}
}
}
}
}
}
}
.wrap{
animation:travel 10s ease-in-out 1 forwards;
animation-delay:3s;
@keyframes travel{
42.5%{
transform:scale(0.5) translateX(-3700px);
}
100%{
transform:translateX(0%);
}
}
svg{
g{
rect{
animation:grow 0.75s ease-in-out 1 forwards;
animation-delay:3s;
@keyframes grow{
to{
transform:scaleY(1);
}
}
}
}
foreignObject{
animation:fall 3s ease-in-out 1 forwards;
@media (max-width:768px){
animation-duration:6s;
}
animation-delay:12s;
@keyframes fall{
from{
transform:translateX(0);
opacity:1;
}
to{
transform:translateX(calc(-100vw - 500px));
opacity:0;
}
}
.char{
@for $i from 1 through 40{
&:nth-of-type(#{$i}){
animation:coast 10s linear 1 forwards, ride#{$i} 10s ease-in-out 1 forwards;
animation-delay:3s, 3s, 12.5s;
div{
&:after{
animation-delay:#{3 - ($i/20)}s;
}
}
@keyframes ride#{$i}{
to{
offset-distance:calc((100% + 1.875px) + #{(($i) * 1.875) - 75}px);
}
}
@keyframes coast{
41.99%{
transform:rotate(0deg) rotateY(0deg);
}
42%{
transform:rotate(180deg) rotateY(-180deg);
}
100%{
transform:rotate(180deg) rotateY(-180deg);
}
}
}
}
}
}
}
}
svg{
#coaster-track, #coaster-track2{
stroke-dashoffset:0px;
}
}
}
svg{
position:absolute;
width:5000px;
height:auto;
top:calc(50% - 935px);
left:-355.5px;
path{
fill:transparent;
stroke:transparent;
}
#coaster-track, #coaster-track2{
fill:transparent;
stroke:#222;
stroke-dasharray:2200px;
stroke-dashoffset:2200px;
transition:1s ease-in-out;
stroke-width:2.25px;
stroke-linecap: square;
}
#coaster-track2{
stroke:url(#pattern);
stroke-width:2px;
}
#coaster-track3{
stroke:url(#Gradient2);
stroke-width:2.5px;
}
}
}Splitting();
$('.signup').submit(function(event){
event.preventDefault();
var emailText = $('.email').val();
$("svg foreignObject").append('<div data-splitting="chars">' + emailText + "</div>");
Splitting();
$("span.char:first-of-type").unwrap();
var t = 40 - ($(".char").length);
console.log(t);
for (let j = 0; j < t; j++) {
$("svg foreignObject div").append('<span class="char empty"></span>');
}
$(".char").append('<div></div>');
$("body").addClass("submitted");
setTimeout(function(){
$('foreignObject span').remove();
$('.email').val('');
$("body").removeClass("submitted");
}, 16000);
});
External CSS
This Pen doesn't use any external CSS resources.