Skip to content

Commit

Permalink
fix: hackyourfuture
Browse files Browse the repository at this point in the history
  • Loading branch information
@tfjordside
tfjordside committed May 21, 2024
1 parent 1e32be7 commit 159a051
Show file tree
Hide file tree
Showing 7 changed files with 347 additions and 56 deletions.
189 changes: 146 additions & 43 deletions example-1/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,78 +3,147 @@
<head>
<title>Example 1</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="../overall.css" />
<link rel="stylesheet" href="styles.css" />
<script src="scripts.js"></script>
</head>
<body>
<div class="flex justify-center items-center flex-col">
<header class="w-full flex items-center justify-between">
<div>
<svg
width="84"
height="26"
viewBox="0 0 84 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="logo logo-visible"
>
<path d="M4.88001 25V1.89995H0.950012V25H4.88001Z"></path>
<path
d="M10.7537 5.88995C11.6337 5.88995 12.2837 5.68995 12.7037 5.28995C13.1437 4.86995 13.3637 4.19995 13.3637 3.27995C13.3637 2.31995 13.1437 1.64995 12.7037 1.26995C12.2637 0.889952 11.6137 0.699951 10.7537 0.699951C9.89368 0.699951 9.24368 0.889952 8.80368 1.26995C8.36368 1.64995 8.14368 2.31995 8.14368 3.27995C8.14368 4.25995 8.34368 4.93995 8.74368 5.31995C9.14368 5.69995 9.81368 5.88995 10.7537 5.88995ZM12.7037 25V7.74995H8.71368V25H12.7037Z"
></path>
<path
d="M20.4352 15.76C20.4352 14.28 20.7452 13.08 21.3652 12.16C21.9852 11.22 22.9352 10.75 24.2152 10.75C25.1152 10.75 25.8152 10.95 26.3152 11.35C26.8352 11.73 27.1952 12.25 27.3952 12.91C27.5152 13.25 27.5952 13.61 27.6352 13.99C27.6952 14.35 27.7252 14.73 27.7252 15.13V25H31.6252V15.22C31.6252 13.92 31.9052 12.85 32.4652 12.01C33.0252 11.17 33.9452 10.75 35.2252 10.75C36.5452 10.75 37.4752 11.17 38.0152 12.01C38.5552 12.83 38.8252 13.92 38.8252 15.28V25H42.7552V14.2C42.7552 12.06 42.2352 10.38 41.1952 9.15995C40.1752 7.93995 38.6552 7.32995 36.6352 7.32995C35.2352 7.32995 34.0652 7.65995 33.1252 8.31995C32.1852 8.95995 31.4952 9.82995 31.0552 10.93C30.6752 9.80995 30.0452 8.92995 29.1652 8.28995C28.2852 7.64995 27.1052 7.32995 25.6252 7.32995C24.2652 7.32995 23.1252 7.65995 22.2052 8.31995C21.3052 8.95995 20.6252 9.81995 20.1652 10.9L19.8052 7.74995H16.5052V25H20.4352V15.76Z"
></path>
<path
d="M55.7244 25.45C57.9844 25.45 59.7844 24.67 61.1244 23.11C62.4644 21.53 63.1344 19.32 63.1344 16.48V16.03C63.1344 14.11 62.8244 12.51 62.2044 11.23C61.5844 9.94995 60.7244 8.97995 59.6244 8.31995C59.0644 7.99995 58.4744 7.75995 57.8544 7.59995C57.2344 7.41995 56.5644 7.32995 55.8444 7.32995C54.4444 7.32995 53.2444 7.66995 52.2444 8.34995C51.2444 9.00995 50.4944 9.90995 49.9944 11.05V1.89995H46.1844V25H49.5144L49.8744 21.52C50.3344 22.7 51.0544 23.65 52.0344 24.37C53.0144 25.09 54.2444 25.45 55.7244 25.45ZM54.5244 21.97C53.1244 21.97 52.0044 21.47 51.1644 20.47C50.3244 19.47 49.9044 18.08 49.9044 16.3V16C49.9044 14.42 50.3344 13.13 51.1944 12.13C52.0544 11.13 53.1944 10.63 54.6144 10.63C55.9544 10.63 57.0444 11.11 57.8844 12.07C58.7244 13.03 59.1444 14.37 59.1444 16.09V16.45C59.1444 18.27 58.7444 19.65 57.9444 20.59C57.1444 21.51 56.0044 21.97 54.5244 21.97Z"
></path>
<path
d="M74.4057 25.45C76.1457 25.45 77.6657 25.11 78.9657 24.43C80.2657 23.75 81.2857 22.76 82.0257 21.46C82.3857 20.82 82.6557 20.11 82.8357 19.33C83.0157 18.53 83.1057 17.66 83.1057 16.72V16.27C83.1057 14.37 82.7357 12.76 81.9957 11.44C81.2557 10.1 80.2257 9.07995 78.9057 8.37995C78.2657 8.01995 77.5657 7.75995 76.8057 7.59995C76.0657 7.41995 75.2657 7.32995 74.4057 7.32995C72.7257 7.32995 71.2257 7.67995 69.9057 8.37995C68.6057 9.05995 67.5857 10.06 66.8457 11.38C66.4657 12.04 66.1757 12.78 65.9757 13.6C65.7957 14.42 65.7057 15.31 65.7057 16.27V16.72C65.7057 19.52 66.4557 21.68 67.9557 23.2C69.4757 24.7 71.6257 25.45 74.4057 25.45ZM74.4057 22C72.9457 22 71.7957 21.54 70.9557 20.62C70.1357 19.68 69.7257 18.36 69.7257 16.66V16.27C69.7257 14.45 70.1557 13.07 71.0157 12.13C71.8957 11.17 73.0357 10.69 74.4357 10.69C75.8557 10.69 76.9857 11.18 77.8257 12.16C78.6857 13.14 79.1157 14.51 79.1157 16.27V16.66C79.1157 18.36 78.6957 19.68 77.8557 20.62C77.0357 21.54 75.8857 22 74.4057 22Z"
></path>
</svg>
</div>
<svg
width="39"
height="49"
viewBox="0 0 39 49"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="w-[60px] h-[60px] m-[20px]"
style="transform: translate(0px, 0px)"
class=""
class="w-[40px] h-[50px] m-[20px] mark"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 17.9134C0 7.93057 8.89981 0 19.5 0C30.1002 0 39 7.93057 39 17.9134V49H0V17.9134ZM19.5 3C10.2907 3 3 9.84146 3 17.9134V46H36V17.9134C36 9.84146 28.7093 3 19.5 3Z"
fill="#F2CECF"
style="fill: #f2cecf"
class="animation-layer"
></path>
<rect
x="22"
y="19"
width="0"
height="11"
fill="#F2CECF"
style="fill: #f2cecf"
></rect>
<rect
x="14"
y="28"
width="0"
height="11"
fill="#F2CECF"
style="fill: #f2cecf"
></rect>
<rect
x="3"
y="37"
width="0"
height="11"
fill="#F2CECF"
style="fill: #f2cecf"
></rect>
<rect x="22" y="19" width="0" height="11"></rect>
<rect x="14" y="28" width="0" height="11"></rect>
<rect x="3" y="37" width="0" height="11"></rect>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 37H39V49H0V37ZM3 40V46H36V40H3Z"
fill="#F2CECF"
style="fill: #f2cecf"
></path>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11 28H39V40H11V28ZM14 31V37H36V31H14Z"
fill="#F2CECF"
style="fill: #f2cecf"
></path>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M19 19H39V31H19V19ZM22 22V28H36V22H22Z"
fill="#F2CECF"
style="fill: #f2cecf"
></path>
</svg>
<h1 class="text-[2em]">Example oh yeah 1</h1>
<p>This is an example of a simple HTML page.</p>
<div class="w-[200px] h-[200px]">
</header>
<div class="flex justify-center items-center flex-col">
<h1 class="text-[3em] font-bold">Animate on scroll</h1>
<p>How to Animate svg lines on scroll.</p>

<div class="relative mt-[30vh] w-[40vw] ml-[48px]">
<h2>Text information</h2>
<p>
Mauris ultricies nisi nibh, at pretium ipsum porta rutrum.
Pellentesque imperdiet magna viverra enim imperdiet aliquam.
Vestibulum placerat sem et lorem malesuada lacinia. Aenean
porttitor feugiat semper. In sodales eleifend placerat.
Nulla feugiat est nec lorem consectetur sollicitudin. Sed
orci ante, lobortis non varius a, tristique at erat.
Pellentesque gravida iaculis turpis vel porta. Fusce maximus
ullamcorper lectus, sed eleifend urna porta nec. Vestibulum
in risus eleifend, porttitor magna a, volutpat quam. Fusce
faucibus dignissim dignissim. Proin sit amet interdum neque.
</p>
</div>
<div class="relative mt-[30vh] w-[40vw] ml-[48px]">
<h2>Text information</h2>
<p>
Mauris ultricies nisi nibh, at pretium ipsum porta rutrum.
Pellentesque imperdiet magna viverra enim imperdiet aliquam.
Vestibulum placerat sem et lorem malesuada lacinia. Aenean
porttitor feugiat semper. In sodales eleifend placerat.
Nulla feugiat est nec lorem consectetur sollicitudin. Sed
orci ante, lobortis non varius a, tristique at erat.
Pellentesque gravida iaculis turpis vel porta. Fusce maximus
ullamcorper lectus, sed eleifend urna porta nec. Vestibulum
in risus eleifend, porttitor magna a, volutpat quam. Fusce
faucibus dignissim dignissim. Proin sit amet interdum neque.
</p>
</div>
<div class="relative mt-[30vh] w-[40vw] ml-[48px]">
<h2>Text information</h2>
<p>
Mauris ultricies nisi nibh, at pretium ipsum porta rutrum.
Pellentesque imperdiet magna viverra enim imperdiet aliquam.
Vestibulum placerat sem et lorem malesuada lacinia. Aenean
porttitor feugiat semper. In sodales eleifend placerat.
Nulla feugiat est nec lorem consectetur sollicitudin. Sed
orci ante, lobortis non varius a, tristique at erat.
Pellentesque gravida iaculis turpis vel porta. Fusce maximus
ullamcorper lectus, sed eleifend urna porta nec. Vestibulum
in risus eleifend, porttitor magna a, volutpat quam. Fusce
faucibus dignissim dignissim. Proin sit amet interdum neque.
</p>
</div>
<div class="relative mt-[30vh] w-[40vw] ml-[48px]">
<h2>Text information</h2>
<p>
Mauris ultricies nisi nibh, at pretium ipsum porta rutrum.
Pellentesque imperdiet magna viverra enim imperdiet aliquam.
Vestibulum placerat sem et lorem malesuada lacinia. Aenean
porttitor feugiat semper. In sodales eleifend placerat.
Nulla feugiat est nec lorem consectetur sollicitudin. Sed
orci ante, lobortis non varius a, tristique at erat.
Pellentesque gravida iaculis turpis vel porta. Fusce maximus
ullamcorper lectus, sed eleifend urna porta nec. Vestibulum
in risus eleifend, porttitor magna a, volutpat quam. Fusce
faucibus dignissim dignissim. Proin sit amet interdum neque.
</p>
</div>
<div class="relative mt-[30vh] w-[40vw] ml-[48px]">
<h2>Text information</h2>
<p>
Mauris ultricies nisi nibh, at pretium ipsum porta rutrum.
Pellentesque imperdiet magna viverra enim imperdiet aliquam.
Vestibulum placerat sem et lorem malesuada lacinia. Aenean
porttitor feugiat semper. In sodales eleifend placerat.
Nulla feugiat est nec lorem consectetur sollicitudin. Sed
orci ante, lobortis non varius a, tristique at erat.
Pellentesque gravida iaculis turpis vel porta. Fusce maximus
ullamcorper lectus, sed eleifend urna porta nec. Vestibulum
in risus eleifend, porttitor magna a, volutpat quam. Fusce
faucibus dignissim dignissim. Proin sit amet interdum neque.
</p>
</div>
<!-- <div class="w-[200px] h-[200px]">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 113 113"
Expand Down Expand Up @@ -114,7 +183,41 @@ <h1 class="text-[2em]">Example oh yeah 1</h1>
class="st1"
></path>
</svg>
</div>
</div> -->
</div>
<div class="w-auto h-screen fixed -z-1 top-0">
<svg
class="w-full h-full svg-timeline"
viewBox="0 0 786 676"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<!-- <path
d="M48 525C35 327.667 123.4 -27.6 581 130C1153 327 17
21.0001 48 525Z"
stroke="black"
class="animation-out-layer"
stroke-width="10"
/> -->

<path
d="M48 525C35 327.667 123.4 -27.6 581 130C1153 327 17 21.0001 48 525Z"
class="animation-layer"
stroke-width="10"
/>
</svg>
<svg
width="766"
height="543"
viewBox="0 0 766 543"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M765 8C700.333 -2.66667 551 -10 471 46C371 116 327 141 278 133C229 125 174 55 112 94C50 133 -28 100 12 54C52 8 111 91 81 133C51 175 13 165 23 223C33 281 53 368 112 349C171 330 192 291 288 300C384 309 368 352 395 360C422 368 512 377 564 322C616 267 655 358 657 384C659 410 625 432 610 481C593.315 535.503 720 533 758 542"
stroke="black"
/>
</svg>
</div>
</body>
</html>
26 changes: 13 additions & 13 deletions example-1/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,8 @@
animation: dash-2 0.5s ease-in-out forwards;
}

/* .animation-layer {
animation: dash $timing $easing forwards;
opacity: 1;
}
.animation-out-layer {
animation: dash-2 $timing $easing forwards;
} */

.icon .animation-layer {
stroke: #fff; //hsl(239, 16%, 63%);
stroke: #fff;
animation: dash-out 0.5s ease-in-out forwards;
}
.icon .animation-out-layer {
Expand All @@ -25,14 +17,22 @@
transition-delay: 0s;
animation: dash-2-out 0.5s ease-in-out forwards;
}

body {
background: hsl(192, 37%, 60%);
padding: 50px;
.svg-timeline {
z-index: -1;
}
.svg-timeline .animation-layer {
stroke: var(--color-blue);
animation: dash linear;
animation-timeline: scroll();
}
.svg-timeline .animation-out-layer {
animation: dash-2 linear;
animation-timeline: scroll();
}

@keyframes dash {
to {
stroke: var(--color-beige);
stroke-dashoffset: 0;
}
}
Expand Down
Loading

0 comments on commit 159a051

Please sign in to comment.