congrats particle fountain (lesson finished)

congrats-particle-fountain-lesson-finished.markdown

congrats particle fountain (lesson finished)

A Pen by Snorkl.tv on CodePen.

License.

index.html

<div class="wrapper">
	<svg viewBox="0 0 500 400"  xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient gradientUnits="userSpaceOnUse" cx="239.0048" cy="217.233" r="250" id="gradient-0" gradientTransform="matrix(0.99998452, -0.00556441, 0.00469064, 0.84295776, -1.01526114, 35.44467914)">
      <stop offset="0" style="stop-color: rgb(36, 124, 255);"></stop>
      <stop offset="1" style=""></stop>
    </radialGradient>
    <linearGradient gradientUnits="userSpaceOnUse" x1="250" y1="200" x2="250" y2="400" id="gradient-1" gradientTransform="matrix(0.99980825, 0.01958369, -0.01947243, 0.99999994, 3.94242928, -4.8958971)">
      <stop offset="0" style="stop-opacity: 0.34;"></stop>
      <stop offset="1" style=""></stop>
    </linearGradient>
    <mask id="mask-0">
      <rect width="500" height="200" style="fill: rgb(255, 252, 252);" x="37.1" y="-86.6"></rect>
    </mask>
  </defs>
  <rect width="500" height="400" style="fill: url('#gradient-0');">
    <title>bg</title>
  </rect>
  <g id="balls" transform="matrix(1, 0, 0, 1, -37.06623459, 86.56919861)" style="mask: url(#mask-0);">
    <title>balls</title>
    <ellipse style="fill: rgb(236, 34, 34);" cx="287.5165" cy="112.4835" rx="12.4835" ry="12.4835"></ellipse>
    <ellipse style="fill: rgb(236, 212, 34);" cx="287.5165" cy="112.4835" rx="12.4835" ry="12.4835"></ellipse>
    <ellipse style="fill: rgb(34, 236, 228);" cx="287.5165" cy="112.4835" rx="12.4835" ry="12.4835"></ellipse>
    <ellipse style="fill: rgb(236, 34, 213);" cx="287.5165" cy="112.4835" rx="12.4835" ry="12.4835"></ellipse>
    <ellipse style="fill: rgb(52, 236, 34);" cx="287.5165" cy="112.4835" rx="12.4835" ry="12.4835"></ellipse>
    <ellipse style="fill: rgb(34, 101, 236);" cx="287.5165" cy="112.4835" rx="12.4835" ry="12.4835"></ellipse>
    <ellipse style="fill: rgb(236, 34, 134);" cx="287.5165" cy="112.4835" rx="12.4835" ry="12.4835"></ellipse>
    <ellipse style="fill: rgb(208, 127, 255);" cx="287.5165" cy="112.4835" rx="12.4835" ry="12.4835"></ellipse>
  </g>
  <path d="M 78.0146 200.531 Q 66.6746 200.531 60.5246 194.771 Q 54.3746 189.011 54.3746 176.351 Q 54.3746 152.171 77.8946 152.171 Q 83.5946 152.171 88.4846 153.551 Q 93.3746 154.931 95.7746 156.611 L 95.7746 171.611 L 81.3746 171.611 L 81.3746 167.291 Q 81.3746 165.011 80.3546 163.931 Q 79.3346 162.851 77.2946 162.851 Q 75.2546 162.851 74.2346 163.931 Q 73.2146 165.011 73.2146 167.291 L 73.2146 185.411 Q 73.2146 187.691 74.2346 188.771 Q 75.2546 189.851 77.2946 189.851 Q 79.3346 189.851 80.3546 188.771 Q 81.3746 187.691 81.3746 185.411 L 81.3746 180.551 L 95.7746 180.551 L 95.7746 196.091 Q 93.3146 197.771 88.4846 199.151 Q 83.6546 200.531 78.0146 200.531 Z M 121.4086 200.531 Q 110.4286 200.531 104.4586 194.771 Q 98.4886 189.011 98.4886 176.351 Q 98.4886 163.691 104.4586 157.931 Q 110.4286 152.171 121.4086 152.171 Q 132.3886 152.171 138.3586 157.931 Q 144.3286 163.691 144.3286 176.351 Q 144.3286 189.011 138.3586 194.771 Q 132.3886 200.531 121.4086 200.531 Z M 121.4086 189.851 Q 123.4486 189.851 124.4686 188.771 Q 125.4886 187.691 125.4886 185.411 L 125.4886 167.291 Q 125.4886 165.011 124.4686 163.931 Q 123.4486 162.851 121.4086 162.851 Q 119.3686 162.851 118.3486 163.931 Q 117.3286 165.011 117.3286 167.291 L 117.3286 185.411 Q 117.3286 187.751 118.3486 188.801 Q 119.3686 189.851 121.4086 189.851 Z M 181.7268 153.011 L 201.4068 153.011 L 201.4068 162.851 L 198.4068 162.851 L 198.4068 199.691 L 181.5468 199.691 L 163.9668 172.631 L 163.9668 189.851 L 166.8468 189.851 L 166.8468 199.691 L 147.1668 199.691 L 147.1668 189.851 L 150.1668 189.851 L 150.1668 162.851 L 147.1668 162.851 L 147.1668 153.011 L 168.8268 153.011 L 184.6068 177.071 L 184.6068 162.851 L 181.7268 162.851 Z M 249.722 184.691 L 246.722 184.691 L 246.722 196.691 Q 244.082 198.191 239.012 199.361 Q 233.942 200.531 228.062 200.531 Q 216.842 200.531 210.482 194.621 Q 204.122 188.711 204.122 176.351 Q 204.122 163.691 210.452 157.931 Q 216.782 152.171 228.542 152.171 Q 234.242 152.171 239.222 153.371 Q 244.202 154.571 246.722 156.071 L 246.722 170.411 L 231.722 170.411 L 231.722 167.591 Q 231.722 165.071 230.672 163.961 Q 229.622 162.851 227.342 162.851 Q 225.062 162.851 224.012 163.961 Q 222.962 165.071 222.962 167.591 L 222.962 185.111 Q 222.962 187.631 224.012 188.741 Q 225.062 189.851 227.342 189.851 Q 229.622 189.851 230.672 188.741 Q 231.722 187.631 231.722 185.111 L 231.722 184.691 L 228.482 184.691 L 228.482 175.751 L 249.722 175.751 Z M 252.1964 189.851 L 255.1964 189.851 L 255.1964 162.851 L 252.1964 162.851 L 252.1964 153.011 L 279.7364 153.011 Q 287.4764 153.011 291.5564 156.191 Q 295.6364 159.371 295.6364 166.511 Q 295.6364 170.531 294.0164 173.471 Q 292.3964 176.411 289.3964 177.551 L 289.4564 178.151 Q 295.2164 179.051 295.2164 185.231 L 295.2164 189.851 L 298.0364 189.851 L 298.0364 199.691 L 279.0164 199.691 L 279.0164 185.591 Q 279.0164 183.251 278.3264 182.051 Q 277.6364 180.851 276.1664 180.431 Q 274.6964 180.011 271.9964 180.011 L 271.9964 189.851 L 275.9564 189.851 L 275.9564 199.691 L 252.1964 199.691 Z M 275.2364 172.691 Q 276.9764 172.691 277.8464 171.761 Q 278.7164 170.831 278.7164 168.851 L 278.7164 166.691 Q 278.7164 164.711 277.8464 163.781 Q 276.9764 162.851 275.2364 162.851 L 271.9964 162.851 L 271.9964 172.691 Z M 345.0331 189.851 L 347.4331 189.851 L 347.4331 199.691 L 323.9131 199.691 L 323.9131 189.851 L 327.5131 189.851 L 326.5531 185.051 L 318.3931 185.051 L 317.4331 189.851 L 321.0331 189.851 L 321.0331 199.691 L 300.5131 199.691 L 300.5131 189.851 L 302.9131 189.851 L 313.0531 153.011 L 334.8931 153.011 Z M 319.7131 178.691 L 325.2331 178.691 L 322.7731 166.751 L 322.1731 166.751 Z M 387.71 167.531 L 377.39 167.531 L 377.39 162.851 L 373.55 162.851 L 373.55 189.851 L 377.75 189.851 L 377.75 199.691 L 352.55 199.691 L 352.55 189.851 L 356.75 189.851 L 356.75 162.851 L 352.91 162.851 L 352.91 167.531 L 342.59 167.531 L 342.59 153.011 L 387.71 153.011 Z M 409.1466 200.531 Q 403.3866 200.531 398.2566 199.541 Q 393.1266 198.551 390.3666 197.291 L 390.3666 185.411 L 403.5666 185.411 Q 403.5666 187.271 404.4066 188.111 Q 405.2466 188.951 407.4666 188.951 Q 409.3266 188.951 410.1366 188.381 Q 410.9466 187.811 410.9466 186.671 Q 410.9466 185.711 410.1666 185.021 Q 409.3866 184.331 407.4666 183.611 L 402.3066 181.811 Q 395.6466 179.291 392.7366 175.871 Q 389.8266 172.451 389.8266 166.631 Q 389.8266 159.551 394.4766 155.861 Q 399.1266 152.171 409.9866 152.171 Q 415.2066 152.171 419.7966 153.221 Q 424.3866 154.271 427.2066 156.011 L 427.2066 166.751 L 415.2066 166.751 Q 415.2066 163.751 411.4866 163.751 Q 409.6866 163.751 408.9366 164.201 Q 408.1866 164.651 408.1866 165.791 Q 408.1866 166.811 409.0566 167.411 Q 409.9266 168.011 411.9066 168.671 L 417.1266 170.471 Q 423.4866 172.631 426.3966 176.081 Q 429.3066 179.531 429.3066 185.111 Q 429.3066 192.731 424.1766 196.631 Q 419.0466 200.531 409.1466 200.531 Z" style="fill: rgb(255, 255, 255);">
    <title>text</title>
  </path>
  <rect y="200" width="500" height="200" style="fill: url(#gradient-1);">
    <title>dark shadow</title>
  </rect>
  <path d="M 78.3086 200.308 C 70.7486 200.308 64.9186 201.5385 60.8186 203.9996 C 56.7186 206.4606 54.6686 210.3957 54.6686 215.8048 C 54.6686 226.1361 62.5086 231.3017 78.1886 231.3017 C 81.9886 231.3017 85.5186 231.0069 88.7786 230.4172 C 92.0386 229.8276 94.4686 229.1739 96.0686 228.4561 L 96.0686 218.8427 L 81.6686 218.8427 L 81.6686 221.6114 C 81.6686 222.5855 81.3286 223.3033 80.6486 223.7648 C 79.9686 224.2262 78.9486 224.4569 77.5886 224.4569 C 76.2286 224.4569 75.2086 224.2262 74.5286 223.7648 C 73.8486 223.3033 73.5086 222.5855 73.5086 221.6114 L 73.5086 209.9983 C 73.5086 209.0242 73.8486 208.3064 74.5286 207.8449 C 75.2086 207.3835 76.2286 207.1528 77.5886 207.1528 C 78.9486 207.1528 79.9686 207.3835 80.6486 207.8449 C 81.3286 208.3064 81.6686 209.0242 81.6686 209.9983 L 81.6686 213.1131 L 96.0686 213.1131 L 96.0686 203.1536 C 94.4286 202.4358 91.9986 201.7821 88.7786 201.1925 C 85.5586 200.6028 82.0686 200.308 78.3086 200.308 Z M 121.7026 200.308 C 114.3826 200.308 108.7326 201.5385 104.7526 203.9996 C 100.7726 206.4606 98.7826 210.3957 98.7826 215.8048 C 98.7826 221.214 100.7726 225.1491 104.7526 227.6101 C 108.7326 230.0712 114.3826 231.3017 121.7026 231.3017 C 129.0226 231.3017 134.6726 230.0712 138.6526 227.6101 C 142.6326 225.1491 144.6226 221.214 144.6226 215.8048 C 144.6226 210.3957 142.6326 206.4606 138.6526 203.9996 C 134.6726 201.5385 129.0226 200.308 121.7026 200.308 Z M 121.7026 207.1528 C 123.0626 207.1528 124.0826 207.3835 124.7626 207.8449 C 125.4426 208.3064 125.7826 209.0242 125.7826 209.9983 L 125.7826 221.6114 C 125.7826 222.5855 125.4426 223.3033 124.7626 223.7648 C 124.0826 224.2262 123.0626 224.4569 121.7026 224.4569 C 120.3426 224.4569 119.3226 224.2262 118.6426 223.7648 C 117.9626 223.3033 117.6226 222.5855 117.6226 221.6114 L 117.6226 209.9983 C 117.6226 208.9985 117.9626 208.2743 118.6426 207.8257 C 119.3226 207.3771 120.3426 207.1528 121.7026 207.1528 Z M 182.0208 230.7633 L 201.7008 230.7633 L 201.7008 224.4569 L 198.7008 224.4569 L 198.7008 200.8464 L 181.8408 200.8464 L 164.2608 218.189 L 164.2608 207.1528 L 167.1408 207.1528 L 167.1408 200.8464 L 147.4608 200.8464 L 147.4608 207.1528 L 150.4608 207.1528 L 150.4608 224.4569 L 147.4608 224.4569 L 147.4608 230.7633 L 169.1208 230.7633 L 184.9008 215.3434 L 184.9008 224.4569 L 182.0208 224.4569 L 182.0208 230.7633 Z M 250.016 210.4598 L 247.016 210.4598 L 247.016 202.7691 C 245.256 202.1282 242.686 201.5578 239.306 201.0579 C 235.926 200.558 232.276 200.308 228.356 200.308 C 220.876 200.308 215.016 201.5706 210.776 204.0957 C 206.536 206.6208 204.416 210.5239 204.416 215.8048 C 204.416 221.214 206.526 225.1491 210.746 227.6101 C 214.966 230.0712 220.996 231.3017 228.836 231.3017 C 232.636 231.3017 236.196 231.0453 239.516 230.5326 C 242.836 230.0199 245.336 229.4431 247.016 228.8022 L 247.016 219.6118 L 232.016 219.6118 L 232.016 221.4191 C 232.016 222.4958 231.666 223.2713 230.966 223.7455 C 230.266 224.2198 229.156 224.4569 227.636 224.4569 C 226.116 224.4569 225.006 224.2198 224.306 223.7455 C 223.606 223.2713 223.256 222.4958 223.256 221.4191 L 223.256 210.1906 C 223.256 209.1139 223.606 208.3384 224.306 207.8642 C 225.006 207.3899 226.116 207.1528 227.636 207.1528 C 229.156 207.1528 230.266 207.3899 230.966 207.8642 C 231.666 208.3384 232.016 209.1139 232.016 210.1906 L 232.016 210.4598 L 228.776 210.4598 L 228.776 216.1894 L 250.016 216.1894 L 250.016 210.4598 Z M 252.4903 207.1528 L 255.4903 207.1528 L 255.4903 224.4569 L 252.4903 224.4569 L 252.4903 230.7633 L 280.0303 230.7633 C 285.1903 230.7633 289.1303 230.084 291.8503 228.7253 C 294.5703 227.3666 295.9303 225.1619 295.9303 222.1112 C 295.9303 220.3937 295.3903 218.9068 294.3103 217.6506 C 293.2303 216.3945 291.6903 215.5229 289.6903 215.0358 L 289.7503 214.6512 C 293.5903 214.2667 295.5103 212.7542 295.5103 210.1137 L 295.5103 207.1528 L 298.3303 207.1528 L 298.3303 200.8464 L 279.3103 200.8464 L 279.3103 209.883 C 279.3103 210.8828 279.0803 211.639 278.6203 212.1517 C 278.1603 212.6645 277.4403 213.0105 276.4603 213.19 C 275.4803 213.3694 274.0903 213.4592 272.2903 213.4592 L 272.2903 207.1528 L 276.2503 207.1528 L 276.2503 200.8464 L 252.4903 200.8464 L 252.4903 207.1528 Z M 275.5303 218.1505 C 276.6903 218.1505 277.5603 218.3492 278.1403 218.7466 C 278.7203 219.1439 279.0103 219.7656 279.0103 220.6116 L 279.0103 221.9959 C 279.0103 222.8419 278.7203 223.4635 278.1403 223.8609 C 277.5603 224.2582 276.6903 224.4569 275.5303 224.4569 L 272.2903 224.4569 L 272.2903 218.1505 L 275.5303 218.1505 Z M 345.3271 207.1528 L 347.7271 207.1528 L 347.7271 200.8464 L 324.2071 200.8464 L 324.2071 207.1528 L 327.8071 207.1528 L 326.8471 210.2291 L 318.6871 210.2291 L 317.7271 207.1528 L 321.3271 207.1528 L 321.3271 200.8464 L 300.8071 200.8464 L 300.8071 207.1528 L 303.2071 207.1528 L 313.3471 230.7633 L 335.1871 230.7633 L 345.3271 207.1528 Z M 320.0071 214.3052 L 325.5271 214.3052 L 323.0671 221.9574 L 322.4671 221.9574 L 320.0071 214.3052 Z M 388.004 221.4575 L 377.684 221.4575 L 377.684 224.4569 L 373.844 224.4569 L 373.844 207.1528 L 378.044 207.1528 L 378.044 200.8464 L 352.844 200.8464 L 352.844 207.1528 L 357.044 207.1528 L 357.044 224.4569 L 353.204 224.4569 L 353.204 221.4575 L 342.884 221.4575 L 342.884 230.7633 L 388.004 230.7633 L 388.004 221.4575 Z M 409.4406 200.308 C 405.6006 200.308 401.9706 200.5195 398.5506 200.9425 C 395.1306 201.3655 392.5006 201.8462 390.6606 202.3845 L 390.6606 209.9983 L 403.8606 209.9983 C 403.8606 209.2036 404.1406 208.6268 404.7006 208.2679 C 405.2606 207.909 406.2806 207.7296 407.7606 207.7296 C 409.0006 207.7296 409.8906 207.8513 410.4306 208.0949 C 410.9706 208.3384 411.2406 208.7037 411.2406 209.1908 C 411.2406 209.601 410.9806 209.9535 410.4606 210.2483 C 409.9406 210.5431 409.0406 210.8443 407.7606 211.152 L 402.6006 212.3056 C 398.1606 213.3823 394.9706 214.6512 393.0306 216.1125 C 391.0906 217.5737 390.1206 219.5477 390.1206 222.0343 C 390.1206 225.0594 391.6706 227.3602 394.7706 228.9368 C 397.8706 230.5134 403.0406 231.3017 410.2806 231.3017 C 413.7606 231.3017 417.0306 231.0774 420.0906 230.6287 C 423.1506 230.1801 425.6206 229.5841 427.5006 228.8406 L 427.5006 221.9574 L 415.5006 221.9574 C 415.5006 223.2392 414.2606 223.8801 411.7806 223.8801 C 410.5806 223.8801 409.7306 223.784 409.2306 223.5917 C 408.7306 223.3994 408.4806 223.0598 408.4806 222.5727 C 408.4806 222.1369 408.7706 221.7908 409.3506 221.5344 C 409.9306 221.2781 410.8806 221.0089 412.2006 220.7269 L 417.4206 219.5733 C 421.6606 218.6504 424.7506 217.4519 426.6906 215.9779 C 428.6306 214.5038 429.6006 212.5747 429.6006 210.1906 C 429.6006 206.9349 427.8906 204.4738 424.4706 202.8075 C 421.0506 201.1412 416.0406 200.308 409.4406 200.308 Z" style="fill: rgb(255, 255, 255); fill-opacity: 0.1;">
    <title>text reflection</title>
  </path>
</svg>
</div>

script.js

gsap.to("svg", {opacity:1})

const balls = document.querySelectorAll("#balls > ellipse")

let tl = gsap.timeline({repeat:-1, repeatRefresh:true})

tl.set(balls, {scale:"random(0.3, 1)", y:50, x:0})
tl.to(balls, {y:-100, stagger:{each:0.1, repeat:1, yoyo:true}})
  .to(balls, {x:"random(-200, 200)", duration:1, ease:"none", stagger:0.1}, 0)

	
//click to pause

document.addEventListener("click", function(){
	tl.paused(!tl.paused())
})

scripts

<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>

style.css

body {
	margin:0;
	background:black;
	overflow:hidden;
}
svg {
	opacity:0;
}