Skip to content

Instantly share code, notes, and snippets.

@EmelieSonjaBoss

EmelieSonjaBoss/index.html

Created March 13, 2025 21:37
Show Gist options
  • Save EmelieSonjaBoss/782b6ae891798a1a0c1e23f627b68ffa to your computer and use it in GitHub Desktop.
Save EmelieSonjaBoss/782b6ae891798a1a0c1e23f627b68ffa to your computer and use it in GitHub Desktop.
Download ZIP
Troms
Raw
index.html
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
</head>
<body>
<div id="troms">
<svg width="369" height="75" viewBox="0 0 369 75" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="oo" d="M362.062 7.125L359.25 13.2188C362.219 15.875 364.5 19.1094 366.094 22.9219C367.719 26.7344 368.531 31.0625 368.531 35.9062C368.531 38.75 368.203 41.5 367.547 44.1562C366.891 46.7812 365.938 49.25 364.688 51.5625C363.469 53.875 361.969 56 360.188 57.9375C358.438 59.8438 356.453 61.4844 354.234 62.8594C352.047 64.2344 349.656 65.3125 347.062 66.0938C344.469 66.8438 341.719 67.2188 338.812 67.2188L336.188 74.5312L317.438 67.2188L320.062 60.6562C318.344 59.3125 316.797 57.7812 315.422 56.0625C314.078 54.3125 312.922 52.4375 311.953 50.4375C311.016 48.4375 310.281 46.3281 309.75 44.1094C309.25 41.8594 309 39.5312 309 37.125C309 34.4062 309.328 31.75 309.984 29.1562C310.641 26.5312 311.578 24.0625 312.797 21.75C314.047 19.4375 315.547 17.3125 317.297 15.375C319.047 13.4375 321 11.7656 323.156 10.3594C325.344 8.95312 327.703 7.85938 330.234 7.07812C332.766 6.29688 335.438 5.90625 338.25 5.90625C339.281 5.90625 340.281 5.95312 341.25 6.04688C342.25 6.10938 343.219 6.21875 344.156 6.375L347.062 0.5625L362.062 7.125ZM329.344 36.6562C329.344 37.6562 329.438 38.6562 329.625 39.6562C329.812 40.625 330.125 41.5625 330.562 42.4688L337.5 26.625C336.219 26.7812 335.078 27.1562 334.078 27.75C333.078 28.3438 332.219 29.0938 331.5 30C330.812 30.875 330.281 31.8906 329.906 33.0469C329.531 34.2031 329.344 35.4062 329.344 36.6562ZM347.719 37.125C347.719 36.375 347.641 35.625 347.484 34.875C347.359 34.0938 347.156 33.3438 346.875 32.625L340.031 47.5312C341.219 47.3125 342.281 46.875 343.219 46.2188C344.188 45.5625 345 44.7656 345.656 43.8281C346.312 42.8906 346.812 41.8594 347.156 40.7344C347.531 39.5781 347.719 38.375 347.719 37.125Z" fill="#2E4090" />
<path id="s" d="M307.594 45C307.594 49.2812 306.844 52.9844 305.344 56.1094C303.875 59.2031 301.844 61.7656 299.25 63.7969C296.688 65.7969 293.672 67.2812 290.203 68.25C286.766 69.1875 283.062 69.6562 279.094 69.6562C277.562 69.6562 275.875 69.4531 274.031 69.0469C272.219 68.6406 270.375 68.1406 268.5 67.5469C266.625 66.9219 264.812 66.2656 263.062 65.5781C261.344 64.8594 259.812 64.1875 258.469 63.5625L260.531 45.1875C263.188 46.7812 266.125 48 269.344 48.8438C272.594 49.6562 275.781 50.0625 278.906 50.0625C279.5 50.0625 280.219 50.0469 281.062 50.0156C281.906 49.9531 282.703 49.8125 283.453 49.5938C284.234 49.3438 284.891 48.9844 285.422 48.5156C285.953 48.0469 286.219 47.375 286.219 46.5C286.219 45.9062 286.031 45.4062 285.656 45C285.281 44.5625 284.797 44.2188 284.203 43.9688C283.609 43.6875 282.938 43.4844 282.188 43.3594C281.438 43.2031 280.703 43.0938 279.984 43.0312C279.266 42.9688 278.594 42.9375 277.969 42.9375C277.344 42.9375 276.844 42.9375 276.469 42.9375C273.781 42.9375 271.328 42.5156 269.109 41.6719C266.922 40.8281 265.031 39.6406 263.438 38.1094C261.875 36.5469 260.656 34.6719 259.781 32.4844C258.906 30.2656 258.469 27.8125 258.469 25.125C258.469 21.4375 259.203 18.1406 260.672 15.2344C262.172 12.2969 264.156 9.8125 266.625 7.78125C269.125 5.71875 271.984 4.14062 275.203 3.04688C278.422 1.95312 281.75 1.40625 285.188 1.40625C286.719 1.40625 288.297 1.46875 289.922 1.59375C291.547 1.6875 293.156 1.875 294.75 2.15625C296.375 2.4375 297.953 2.79688 299.484 3.23438C301.016 3.67188 302.469 4.21875 303.844 4.875L302.062 23.9062C299.938 23.1875 297.703 22.5938 295.359 22.125C293.047 21.625 290.781 21.375 288.562 21.375C288.156 21.375 287.625 21.3906 286.969 21.4219C286.344 21.4219 285.672 21.4688 284.953 21.5625C284.266 21.625 283.562 21.7344 282.844 21.8906C282.125 22.0469 281.484 22.2656 280.922 22.5469C280.359 22.7969 279.906 23.1406 279.562 23.5781C279.219 24.0156 279.062 24.5312 279.094 25.125C279.125 25.8125 279.375 26.3438 279.844 26.7188C280.344 27.0938 280.969 27.375 281.719 27.5625C282.5 27.7188 283.344 27.7969 284.25 27.7969C285.188 27.7969 286.109 27.7812 287.016 27.75C287.922 27.6875 288.766 27.6406 289.547 27.6094C290.328 27.5469 290.969 27.5312 291.469 27.5625C293.969 27.7188 296.219 28.25 298.219 29.1562C300.219 30.0625 301.906 31.2656 303.281 32.7656C304.688 34.2656 305.75 36.0625 306.469 38.1562C307.219 40.2188 307.594 42.5 307.594 45Z" fill="#2E4090" />
<path id="m" d="M255.234 37.2188C255.234 41.6875 255.094 46.1406 254.812 50.5781C254.531 55.0156 254.203 59.4688 253.828 63.9375L229.734 65.0625C230.453 59.625 231.094 54.1875 231.656 48.75C232.25 43.2812 232.547 37.8125 232.547 32.3438C232.547 32 232.531 31.4062 232.5 30.5625C232.469 29.6875 232.406 28.7031 232.312 27.6094C232.25 26.5156 232.141 25.3906 231.984 24.2344C231.859 23.0469 231.672 21.9688 231.422 21C231.203 20 230.922 19.1875 230.578 18.5625C230.234 17.9375 229.828 17.625 229.359 17.625C228.266 17.625 227.406 18.0469 226.781 18.8906C226.156 19.7031 225.688 20.6875 225.375 21.8438C225.094 23 224.922 24.1875 224.859 25.4062C224.797 26.5938 224.766 27.5625 224.766 28.3125C224.766 29.625 224.797 30.9375 224.859 32.25C224.922 33.5625 224.953 34.9062 224.953 36.2812C224.953 41.125 224.828 45.9531 224.578 50.7656C224.359 55.5781 224.078 60.4062 223.734 65.25L201.516 66.0938C202.234 60.6562 202.859 55.2344 203.391 49.8281C203.953 44.3906 204.234 38.9375 204.234 33.4688C204.234 33.125 204.219 32.5 204.188 31.5938C204.156 30.6875 204.094 29.6719 204 28.5469C203.938 27.4219 203.828 26.25 203.672 25.0312C203.516 23.8125 203.312 22.7031 203.062 21.7031C202.844 20.6719 202.562 19.8281 202.219 19.1719C201.875 18.5156 201.453 18.1875 200.953 18.1875C200.172 18.1875 199.516 18.5 198.984 19.125C198.453 19.7188 198.016 20.5 197.672 21.4688C197.359 22.4375 197.109 23.5156 196.922 24.7031C196.766 25.8594 196.641 27 196.547 28.125C196.484 29.25 196.438 30.2969 196.406 31.2656C196.406 32.2031 196.391 32.9062 196.359 33.375L195.328 67.5938H171.703C172.203 62.3125 172.703 57.0156 173.203 51.7031C173.734 46.3906 174.188 41.0938 174.562 35.8125C174.969 30.5 175.297 25.1875 175.547 19.875C175.797 14.5625 175.922 9.25 175.922 3.9375L198.234 3L198.141 8.4375C198.828 7.5625 199.609 6.6875 200.484 5.8125C201.359 4.90625 202.281 4.10938 203.25 3.42188C204.25 2.70312 205.297 2.125 206.391 1.6875C207.516 1.25 208.672 1.03125 209.859 1.03125C211.391 1.03125 212.766 1.15625 213.984 1.40625C215.203 1.625 216.297 2.01562 217.266 2.57812C218.266 3.14062 219.141 3.92188 219.891 4.92188C220.641 5.89062 221.297 7.125 221.859 8.625C222.859 7.53125 223.859 6.51562 224.859 5.57812C225.891 4.64062 226.969 3.84375 228.094 3.1875C229.219 2.5 230.438 1.96875 231.75 1.59375C233.062 1.21875 234.516 1.03125 236.109 1.03125C239.141 1.03125 241.719 1.625 243.844 2.8125C245.969 3.96875 247.734 5.51562 249.141 7.45312C250.578 9.39062 251.688 11.6094 252.469 14.1094C253.281 16.6094 253.891 19.2031 254.297 21.8906C254.703 24.5781 254.953 27.25 255.047 29.9062C255.172 32.5625 255.234 35 255.234 37.2188Z" fill="#2E4090" />
<path id="o" d="M170.859 33.0938C170.859 35.9375 170.531 38.6875 169.875 41.3438C169.219 43.9688 168.266 46.4375 167.016 48.75C165.797 51.0625 164.297 53.1875 162.516 55.125C160.766 57.0312 158.781 58.6719 156.562 60.0469C154.375 61.4219 151.984 62.5 149.391 63.2812C146.797 64.0312 144.047 64.4062 141.141 64.4062C138.328 64.4062 135.641 64.0469 133.078 63.3281C130.547 62.6094 128.172 61.6094 125.953 60.3281C123.734 59.0156 121.719 57.4531 119.906 55.6406C118.125 53.7969 116.594 51.7656 115.312 49.5469C114.062 47.2969 113.078 44.8906 112.359 42.3281C111.672 39.7656 111.328 37.0938 111.328 34.3125C111.328 31.5938 111.656 28.9375 112.312 26.3438C112.969 23.7188 113.906 21.25 115.125 18.9375C116.375 16.625 117.875 14.5 119.625 12.5625C121.375 10.625 123.328 8.95312 125.484 7.54688C127.672 6.14062 130.031 5.04688 132.562 4.26562C135.094 3.48438 137.766 3.09375 140.578 3.09375C145.109 3.09375 149.234 3.79688 152.953 5.20312C156.703 6.60938 159.891 8.625 162.516 11.25C165.172 13.8438 167.219 17 168.656 20.7188C170.125 24.4062 170.859 28.5312 170.859 33.0938ZM150.047 34.3125C150.047 32.9688 149.844 31.6719 149.438 30.4219C149.062 29.1406 148.5 28.0156 147.75 27.0469C147 26.0469 146.062 25.25 144.938 24.6562C143.844 24.0312 142.578 23.7188 141.141 23.7188C139.672 23.7188 138.359 23.9844 137.203 24.5156C136.047 25.0469 135.047 25.7812 134.203 26.7188C133.391 27.625 132.766 28.7031 132.328 29.9531C131.891 31.1719 131.672 32.4688 131.672 33.8438C131.672 35.1562 131.859 36.4688 132.234 37.7812C132.609 39.0938 133.172 40.2812 133.922 41.3438C134.672 42.4062 135.594 43.2656 136.688 43.9219C137.812 44.5781 139.109 44.9062 140.578 44.9062C142.047 44.9062 143.359 44.625 144.516 44.0625C145.703 43.4688 146.703 42.6875 147.516 41.7188C148.328 40.7188 148.953 39.5781 149.391 38.2969C149.828 37.0156 150.047 35.6875 150.047 34.3125Z" fill="#2E4090" />
<path id="r" d="M109.641 23.8125C109.641 26.25 109.422 28.4688 108.984 30.4688C108.578 32.4375 107.922 34.25 107.016 35.9062C106.109 37.5625 104.938 39.0938 103.5 40.5C102.062 41.9062 100.328 43.25 98.2969 44.5312L109.453 64.4062L88.3594 68.5312L81.1406 48.5625L75.3281 48.75L74.4844 68.25H54.3281C54.4844 61.125 54.625 54.0312 54.75 46.9688C54.9062 39.9062 55.0781 32.8125 55.2656 25.6875C55.3281 22.0938 55.3906 18.5312 55.4531 15C55.5156 11.4688 55.6406 7.90625 55.8281 4.3125C58.0156 3.5 60.1719 2.82812 62.2969 2.29688C64.4219 1.76562 66.5469 1.35938 68.6719 1.07812C70.8281 0.765625 73 0.5625 75.1875 0.46875C77.4062 0.34375 79.6719 0.28125 81.9844 0.28125C85.5469 0.28125 88.9844 0.78125 92.2969 1.78125C95.6406 2.75 98.5938 4.21875 101.156 6.1875C103.719 8.15625 105.766 10.6094 107.297 13.5469C108.859 16.4844 109.641 19.9062 109.641 23.8125ZM88.6406 25.3125C88.6406 24 88.4531 22.7969 88.0781 21.7031C87.7344 20.6094 87.2031 19.6719 86.4844 18.8906C85.7969 18.0781 84.9219 17.4531 83.8594 17.0156C82.8281 16.5469 81.6094 16.3125 80.2031 16.3125C79.5781 16.3125 78.9688 16.3594 78.375 16.4531C77.7812 16.5156 77.2031 16.625 76.6406 16.7812L75.8906 34.2188H77.0156C78.3594 34.2188 79.7188 34.0469 81.0938 33.7031C82.5 33.3594 83.75 32.8281 84.8438 32.1094C85.9688 31.3906 86.875 30.4688 87.5625 29.3438C88.2812 28.2188 88.6406 26.875 88.6406 25.3125Z" fill="#2E4090" />
<path id="t" d="M52.0312 2.90625L51.5625 22.7812L37.5938 23.3438L35.9062 66.8438L16.125 67.875L14.3438 24.375L0.375 25.125L0.9375 3L52.0312 2.90625Z" fill="#2E4090" />
</svg>
</div>
<div class="sun" id="sun"><svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 511.72">
<path fill="#FFC106" d="M256 109.28c80.96 0 146.58 65.62 146.58 146.58 0 80.96-65.62 146.58-146.58 146.58-80.96 0-146.58-65.62-146.58-146.58 0-80.96 65.62-146.58 146.58-146.58zM40.04 151.45c-7.93-4.36-10.81-14.36-6.45-22.29s14.35-10.83 22.3-6.45l36.87 20.39c7.94 4.36 10.82 14.36 6.45 22.28-4.37 7.93-14.35 10.84-22.29 6.46l-36.88-20.39zm0 208.82c-7.93 4.36-10.81 14.36-6.45 22.29s14.35 10.83 22.3 6.45l36.87-20.39c7.94-4.36 10.82-14.36 6.45-22.28-4.37-7.93-14.35-10.84-22.29-6.46l-36.88 20.39zm81.17 93.96c-4.68 7.78-2.17 17.89 5.62 22.58 7.78 4.68 17.89 2.17 22.58-5.61l21.73-36.1c4.69-7.78 2.18-17.89-5.6-22.58-7.79-4.69-17.9-2.18-22.59 5.61l-21.74 36.1zM238.6 495c-.17 9.04 7 16.51 16.04 16.72 9.03.17 16.52-7 16.72-16.05l.76-42.13c.18-9.03-6.99-16.51-16.05-16.71-9.03-.18-16.51 7-16.7 16.04L238.6 495zm121.95-23.32c4.36 7.92 14.36 10.8 22.29 6.44s10.83-14.34 6.45-22.29l-20.38-36.88c-4.37-7.93-14.36-10.81-22.3-6.45-7.92 4.37-10.83 14.35-6.45 22.3l20.39 36.88zm93.96-81.18c7.79 4.68 17.89 2.17 22.58-5.61 4.69-7.78 2.18-17.89-5.61-22.58l-36.1-21.74c-7.79-4.68-17.89-2.18-22.58 5.61-4.69 7.78-2.18 17.89 5.61 22.58l36.1 21.74zm40.78-117.39c9.03.18 16.51-6.99 16.71-16.03.17-9.04-7-16.53-16.05-16.72l-42.13-.76c-9.03-.19-16.51 6.99-16.7 16.04-.19 9.04 6.99 16.51 16.03 16.71l42.14.76zM16.71 238.32C7.68 238.15.2 245.31 0 254.36c-.17 9.03 7 16.52 16.04 16.71l42.14.77c9.03.18 16.51-6.99 16.7-16.04.18-9.04-6.99-16.52-16.03-16.71l-42.14-.77zm104.5-180.83c-4.68-7.78-2.17-17.89 5.62-22.58 7.78-4.68 17.89-2.18 22.58 5.61l21.73 36.1c4.69 7.78 2.18 17.88-5.6 22.58-7.79 4.68-17.9 2.17-22.59-5.61l-21.74-36.1zM238.6 16.72C238.43 7.68 245.6.2 254.64 0c9.03-.17 16.52 7 16.72 16.05l.76 42.13c.18 9.03-6.99 16.51-16.05 16.71-9.03.18-16.51-7-16.7-16.04l-.77-42.13zm121.95 23.32c4.36-7.92 14.36-10.8 22.29-6.44s10.83 14.34 6.45 22.29l-20.38 36.87c-4.37 7.94-14.36 10.82-22.3 6.46-7.92-4.37-10.83-14.35-6.45-22.3l20.39-36.88zm93.96 81.18c7.79-4.68 17.89-2.17 22.58 5.61 4.69 7.78 2.18 17.89-5.61 22.57l-36.1 21.75c-7.79 4.68-17.89 2.18-22.58-5.61-4.69-7.79-2.18-17.89 5.61-22.58l36.1-21.74z" />
<path fill="#FFD205" d="M256 109.28c45.28 0 85.76 20.54 112.65 52.8L116.6 301.25a146.424 146.424 0 01-7.18-45.39c0-80.96 65.62-146.58 146.58-146.58zM40.04 151.45c-7.93-4.36-10.81-14.36-6.45-22.29s14.35-10.83 22.3-6.45l36.87 20.39c7.94 4.36 10.82 14.36 6.45 22.28-4.37 7.93-14.35 10.84-22.29 6.46l-36.88-20.39zm-23.33 86.87C7.68 238.15.2 245.31 0 254.36c-.17 9.03 7 16.52 16.04 16.71l42.14.77c9.03.18 16.51-6.99 16.7-16.04.18-9.04-6.99-16.52-16.03-16.71l-42.14-.77zm104.5-180.83c-4.68-7.78-2.17-17.89 5.62-22.58 7.78-4.68 17.89-2.18 22.58 5.61l21.73 36.1c4.69 7.78 2.18 17.88-5.6 22.58-7.79 4.68-17.9 2.17-22.59-5.61l-21.74-36.1zM238.6 16.72C238.43 7.68 245.6.2 254.64 0c9.03-.17 16.52 7 16.72 16.05l.76 42.13c.18 9.03-6.99 16.51-16.05 16.71-9.03.18-16.51-7-16.7-16.04l-.77-42.13zm121.95 23.32c4.36-7.92 14.36-10.8 22.29-6.44s10.83 14.34 6.45 22.29l-20.38 36.87c-4.37 7.94-14.36 10.82-22.3 6.46-7.92-4.37-10.83-14.35-6.45-22.3l20.39-36.88z" />
</svg></div>
</body>
Raw
script.js
const container = document.body;
const numFlakes = 50;
const numRaindrops = 150;
const snowTarget = document.getElementById("t");
const rainTarget = document.getElementById("r");
const sunTarget = document.getElementById("o");
const sun = document.getElementById("sun");
// ❄️ Snow Effect
function createSnowflake() {
const snowflake = document.createElement("div");
snowflake.classList.add("snowflake");
snowflake.style.left = `${Math.random() * window.innerWidth}px`;
container.appendChild(snowflake);
gsap.to(snowflake, {
y: window.innerHeight + 10,
x: `+=${Math.random() * 100 - 50}`,
duration: Math.random() * 4 + 2,
opacity: 0,
ease: "linear",
onComplete: () => snowflake.remove()
});
}
// 🌧️ Heavy Vertical Rainstorm
function createRaindrop() {
const raindrop = document.createElement("div");
raindrop.classList.add("raindrop");
raindrop.style.left = `${Math.random() * window.innerWidth}px`;
raindrop.style.top = `${Math.random() * -100}px`;
container.appendChild(raindrop);
gsap.to(raindrop, {
y: window.innerHeight + 100,
duration: Math.random() * 0.5 + 0.3,
opacity: 0,
ease: "power1.in",
onComplete: () => raindrop.remove()
});
}
// 🎯 Hover Effects for Snow & Rain
snowTarget.addEventListener("mouseenter", () => {
for (let i = 0; i < numFlakes; i++) {
setTimeout(createSnowflake, i * 100);
}
gsap.to(snowTarget, { opacity: 0.7, duration: 0.3 });
});
snowTarget.addEventListener("mouseleave", () => {
gsap.to(snowTarget, { opacity: 1, duration: 0.3 });
});
rainTarget.addEventListener("mouseenter", () => {
for (let i = 0; i < numRaindrops; i++) {
setTimeout(createRaindrop, i * 10);
}
gsap.to(rainTarget, { opacity: 0.6, duration: 0.3 });
});
rainTarget.addEventListener("mouseleave", () => {
gsap.to(rainTarget, { opacity: 1, duration: 0.3 });
});
Raw
style.css
body {
background-color: black;
overflow: clip;
}
#troms {
text-align: center;
margin: 3%;
}
#t {
top: 30%;
}
#r {
top: 50%;
background: lightblue;
}
#o {
top: 70%;
background: yellow;
}
.snowflake,
.raindrop,
.sun {
position: absolute;
border-radius: 50%;
}
.snowflake {
top: -10px;
width: 5px;
height: 5px;
background: white;
opacity: 0.7;
filter: blur(1px);
}
.raindrop {
width: 2px;
height: 30px;
background: rgba(173, 216, 230, 0.9);
opacity: 0.4;
filter: blur(1px);
}
.sun {
top: 7%;
left: 60%;
width: 100px;
height: 100px;
position: absolute;
display: none;
z-index: -2;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment