Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>CSS Showcase: Particle Animation</title>
<meta name="description" content="Tutorial on creating particle animation using CSS">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:700,800,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/midterm.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<main id="body-wrapper">
<header>
<h2>CSS Showcase:</h2>
<h1>Particle Animation</h1>
<p>by Maria Raykova &#8226; March 2020</p>
</header>
<section class="particle-wrapper" id="subtle">
<div class="particle-container">
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
</div>
<h3>You can use animated particles to create a subtle background effect...</h3>
</section>
<section class="particle-wrapper" id="fireworks">
<div class="particle-container">
<div class="starburst" id="starburst1">
<div class="star-wrapper rotate1"><div class="particle-star"></div></div>
<div class="star-wrapper rotate2"><div class="particle-star"></div></div>
<div class="star-wrapper rotate3"><div class="particle-star"></div></div>
<div class="star-wrapper rotate4"><div class="particle-star"></div></div>
<div class="star-wrapper rotate5"><div class="particle-star"></div></div>
<div class="star-wrapper rotate6"><div class="particle-star"></div></div>
<div class="star-wrapper rotate7"><div class="particle-star"></div></div>
<div class="star-wrapper rotate8"><div class="particle-star"></div></div>
<div class="star-wrapper rotate9"><div class="particle-star"></div></div>
<div class="star-wrapper rotate10"><div class="particle-star"></div></div>
</div>
<div class="starburst" id="starburst2">
<div class="star-wrapper rotate1"><div class="particle-star"></div></div>
<div class="star-wrapper rotate2"><div class="particle-star"></div></div>
<div class="star-wrapper rotate3"><div class="particle-star"></div></div>
<div class="star-wrapper rotate4"><div class="particle-star"></div></div>
<div class="star-wrapper rotate5"><div class="particle-star"></div></div>
<div class="star-wrapper rotate6"><div class="particle-star"></div></div>
<div class="star-wrapper rotate7"><div class="particle-star"></div></div>
<div class="star-wrapper rotate8"><div class="particle-star"></div></div>
<div class="star-wrapper rotate9"><div class="particle-star"></div></div>
<div class="star-wrapper rotate10"><div class="particle-star"></div></div>
</div>
<div class="starburst" id="starburst3">
<div class="star-wrapper rotate1"><div class="particle-star"></div></div>
<div class="star-wrapper rotate2"><div class="particle-star"></div></div>
<div class="star-wrapper rotate3"><div class="particle-star"></div></div>
<div class="star-wrapper rotate4"><div class="particle-star"></div></div>
<div class="star-wrapper rotate5"><div class="particle-star"></div></div>
<div class="star-wrapper rotate6"><div class="particle-star"></div></div>
<div class="star-wrapper rotate7"><div class="particle-star"></div></div>
<div class="star-wrapper rotate8"><div class="particle-star"></div></div>
<div class="star-wrapper rotate9"><div class="particle-star"></div></div>
<div class="star-wrapper rotate10"><div class="particle-star"></div></div>
</div>
<div class="starburst" id="starburst4">
<div class="star-wrapper rotate1"><div class="particle-star"></div></div>
<div class="star-wrapper rotate2"><div class="particle-star"></div></div>
<div class="star-wrapper rotate3"><div class="particle-star"></div></div>
<div class="star-wrapper rotate4"><div class="particle-star"></div></div>
<div class="star-wrapper rotate5"><div class="particle-star"></div></div>
<div class="star-wrapper rotate6"><div class="particle-star"></div></div>
<div class="star-wrapper rotate7"><div class="particle-star"></div></div>
<div class="star-wrapper rotate8"><div class="particle-star"></div></div>
<div class="star-wrapper rotate9"><div class="particle-star"></div></div>
<div class="star-wrapper rotate10"><div class="particle-star"></div></div>
</div>
<div class="starburst" id="starburst5">
<div class="star-wrapper rotate1"><div class="particle-star"></div></div>
<div class="star-wrapper rotate2"><div class="particle-star"></div></div>
<div class="star-wrapper rotate3"><div class="particle-star"></div></div>
<div class="star-wrapper rotate4"><div class="particle-star"></div></div>
<div class="star-wrapper rotate5"><div class="particle-star"></div></div>
<div class="star-wrapper rotate6"><div class="particle-star"></div></div>
<div class="star-wrapper rotate7"><div class="particle-star"></div></div>
<div class="star-wrapper rotate8"><div class="particle-star"></div></div>
<div class="star-wrapper rotate9"><div class="particle-star"></div></div>
<div class="star-wrapper rotate10"><div class="particle-star"></div></div>
</div>
</div>
<h2>...or you can make particles that POP!</h2>
<p class="attribution">"Sandiego skyline at night" by Whoismanu is licensed under CC BY-SA 3.0.</p>
</section>
<section class="particle-wrapper" id="rain">
<input type="checkbox" id="rainswitch"/>
<div class="particle-container">
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain1 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
<div class="particle-rain2 switch"></div>
</div>
<div id="character-wrapper">
<svg class="hide" id="sad-girl" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 101.68 264.89"><defs><style>.cls-a{fill:#503932;}.cls-b{fill:#edbf8c;}.cls-c{fill:#813d96;}.cls-d{fill:#d99557;}.cls-e{fill:#fff;}.cls-f{fill:#c98a51;}</style></defs><path class="cls-a" d="M78.36,108.16S50.08,129.22,93.24,154C93.24,154,106.64,127.11,78.36,108.16Z"/><polygon class="cls-b" points="34.69 239.61 41.78 239.61 41 201.4 32.08 201.4 34.69 239.61"/><path class="cls-b" d="M77.73,176s-8.39,4.91.62,4.69c0,0-3.18,8.36,2.3,2.73,0,0-1.07,6.42,2.07.76,0,0,1.77,5.09,2.61-.71,0,0,4.9,3.93-.86-7.59Z"/><path class="cls-c" d="M58.12,144.09s16,6.52,16.44,32.79l12.31-.32S84.6,136.9,63.59,121.93C63.59,121.93,48.7,127.3,58.12,144.09Z"/><path class="cls-b" d="M13.6,176s8.38,4.91-.63,4.69c0,0,3.18,8.36-2.29,2.73,0,0,1.06,6.42-2.07.76,0,0-1.78,5.09-2.61-.71,0,0-4.91,3.93.86-7.59Z"/><path class="cls-c" d="M33.21,144.09s-16,6.52-16.44,32.79l-12.32-.32s2.27-39.66,23.28-54.63C27.73,121.93,42.63,127.3,33.21,144.09Z"/><polygon class="cls-b" points="47.84 239.61 54.94 239.61 57.55 201.4 48.63 201.4 47.84 239.61"/><path class="cls-a" d="M75.13,111.8s-101.93-55-28.62-82.24C78.36,17.75,92,30.13,99.14,47.27c11.7,27.87-20.78,63.44-20.78,63.44Z"/><polygon class="cls-b" points="34.78 126.83 45.55 133.76 57.04 126.83 57.04 111.8 34.78 111.8 34.78 126.83"/><path class="cls-b" d="M78.2,71.52a9.3,9.3,0,0,0-1.5.15C74.28,43.45,60.49,43.25,43.54,43.25c-18.67,0-33.79,6.63-33.79,37.34,0,20.63,15.12,37.35,33.79,37.35,16.36,0,30-12.87,33.11-29.94a9,9,0,0,0,1.81.19,8,8,0,0,0,8.31-8.1A8.57,8.57,0,0,0,78.2,71.52Z"/><path class="cls-d" d="M32.34,94.25c-3.78-.63-5.25-1.76-5.44-3.32-.23-1.87,2-3.38,3.58-4.25a1,1,0,1,1,.9,1.83c-1.36.84-2.52,1.73-2.46,2.17,0,0,.2,1.3,3.79,1.56C34.36,92.36,33.55,94.45,32.34,94.25Z"/><path d="M47.84,241.78v-4.2H55s8.53.9,8.14,4.2Z"/><path d="M41.78,241.78v-4.2H34.62s-8.53.9-8.15,4.2Z"/><path class="cls-a" d="M67.59,34.22S56.23,86,0,62.91C0,62.91,11.27-2.29,67.59,34.22Z"/><path class="cls-a" d="M76.9,76.23S37.73,62.44,48.78,30.69C48.78,30.69,101.72,30.69,76.9,76.23Z"/><polygon points="29.47 211.76 26.99 175.55 64.04 175.36 61.11 211.76 29.47 211.76"/><path class="cls-e" d="M63.57,169.28l3.54-35.52c0-7-.74-13.56-9.76-13.56l-.34.38a15.41,15.41,0,0,1-21.61,1l-1.47-1.33c-9,0-9.68,6.58-9.68,13.56l3.46,35.52C28.48,173.7,62.8,173.7,63.57,169.28Z"/><path class="cls-c" d="M19.27,175.88l8-11.71-3.06-30.41c0-7,.67-13.56,9.68-13.56l1.47,1.33c3.12,2.82,11,17.82,11,17.82S54.14,123.66,57,120.58l.34-.38c9,0,9.76,6.58,9.76,13.56L64,164.57,72.45,176C56.44,182.77,30.91,182.13,19.27,175.88Z"/><path class="cls-a" d="M50.5,75c-1.47-1.82-3-2.78-4.55-2.86a5.27,5.27,0,0,0-3.67,1.47c-.24.22-1.29-1-.85-1.34a6.7,6.7,0,0,1,4.6-1.7c2,.09,3.81,1.26,5.6,3.33C52,74.32,50.71,75.26,50.5,75Z"/><path class="cls-a" d="M21.19,75c1.47-1.82,3-2.78,4.55-2.86a5.27,5.27,0,0,1,3.67,1.47c.24.22,1.29-1,.85-1.34a6.7,6.7,0,0,0-4.6-1.7c-2,.09-3.81,1.26-5.6,3.33C19.68,74.32,21,75.26,21.19,75Z"/><path class="cls-e" d="M82.84,92.32a3.17,3.17,0,1,1-3.17-3.17A3.17,3.17,0,0,1,82.84,92.32Z"/><path class="cls-f" d="M36.56,99.22q-.3,0-.6,0c-3.54.44-5.26,4.53-5.44,5,0,0,4-2,5.8-2.08,2.74-.07,7,1.77,7,1.77C41.1,100.8,38.82,99.22,36.56,99.22Z"/><path d="M23.43,80.59a3.07,3.07,0,1,0,3.07-3.07A3.07,3.07,0,0,0,23.43,80.59Z"/><path d="M41.32,80.59a3.08,3.08,0,1,0,3.07-3.07A3.08,3.08,0,0,0,41.32,80.59Z"/></svg>
<svg class="show" id="happy-girl" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 158.79 244.82"><defs><style>.cls-1{fill:#636363;}.cls-2{fill:#503932;}.cls-3{fill:#edbf8c;}.cls-4{fill:#813d96;}.cls-5{fill:#d99557;}.cls-6{fill:#fff;}</style></defs><path class="cls-1" d="M87.43,243.88l-.55-.63c.13-.11,13-11.19,26.42-12.77l.1.83C100.23,232.86,87.55,243.77,87.43,243.88Z"/><path class="cls-1" d="M96.35,244.82,96,244.4c.08-.07,8.57-7.38,17.44-8.43l.06.55C104.8,237.54,96.43,244.74,96.35,244.82Z"/><path class="cls-1" d="M87.43,238.35,87,238c.08-.08,8.11-7.9,16.89-9.49l.1.54C95.41,230.57,87.51,238.27,87.43,238.35Z"/><path class="cls-1" d="M39.07,243.21l.55-.63c-.13-.11-13-11.19-26.42-12.77l-.1.83C26.28,232.19,39,243.1,39.07,243.21Z"/><path class="cls-1" d="M30.15,244.15l.36-.42c-.08-.07-8.57-7.38-17.44-8.43l-.06.55C21.7,236.87,30.07,244.07,30.15,244.15Z"/><path class="cls-1" d="M39.07,237.68l.39-.39c-.08-.08-8.11-7.9-16.89-9.49l-.1.54C31.09,229.9,39,237.6,39.07,237.68Z"/><path class="cls-2" d="M46.94,87.69S78,109.4,33.51,135C33.51,135,17.78,107.23,46.94,87.69Z"/><path class="cls-3" d="M54.23,182.79c-3.73,5.63-8.67,10.7-14.42,10.9-10.47.36-23.45-21.77-23.45-21.77l-7,2.2s14.17,32.34,31.08,32.37c10,0,19.78-10.42,26.66-20C72.82,178.55,59,175.57,54.23,182.79Z"/><path class="cls-3" d="M73.4,183.55c-3.86,6.51-7.76,12.87-14.33,13.1C48.61,197,36.55,174.8,36.55,174.8l-7.64,2s13.83,32.63,30.75,32.66c9.59,0,17.43-9.44,24.26-18.66C90.14,182.39,77.26,177,73.4,183.55Z"/><path class="cls-3" d="M146.1,89.12s-2.25-9.84,4-2.86c0,0,4.06-8.35,3.69-.21,0,0,4.11-5.37,2.05,1,0,0,5.12-2.28,1.33,2.47,0,0,6.46.92-6.36,4.75Z"/><path class="cls-3" d="M20.66,79.17s5.54-8.43-2.75-4.08c0,0-.88-9.24-3.38-1.48,0,0-2-6.47-2.28.25,0,0-4-3.92-2.11,1.85,0,0-6.37-1.39,4.3,6.67Z"/><path class="cls-4" d="M146.16,88.82S118,109.28,96.32,101.46c-11.79-4.26-2,16.83-2,16.83s39.87,2.77,57.3-23.55Z"/><path class="cls-4" d="M60.9,101s-28.32,2.4-39.46-22.51l-8,3.87S19.65,109.74,57,119C57,119,65.21,105.29,60.9,101Z"/><path class="cls-2" d="M50.27,91.44S155.38,34.69,79.78,6.65C46.94-5.53,32.94,7.23,25.52,24.91,13.46,53.64,46.94,90.32,46.94,90.32Z"/><polygon class="cls-3" points="89.06 106.94 77.95 114.09 66.1 106.94 66.1 91.44 89.06 91.44 89.06 106.94"/><path class="cls-3" d="M47.1,49.91a8.87,8.87,0,0,1,1.56.16C51.15,21,65.37,20.76,82.85,20.76c19.24,0,34.84,6.83,34.84,38.51,0,21.26-15.6,38.5-34.84,38.5C66,97.77,51.91,84.51,48.7,66.9a8.74,8.74,0,0,1-1.85.2,8.22,8.22,0,0,1-8.58-8.35A8.84,8.84,0,0,1,47.1,49.91Z"/><path class="cls-5" d="M92.48,73.34c3.89-.65,5.42-1.81,5.61-3.42.24-1.93-2.1-3.48-3.69-4.38a1.05,1.05,0,1,0-.93,1.89c1.4.86,2.6,1.78,2.54,2.23,0,0-.21,1.34-3.91,1.61C90.39,71.4,91.23,73.55,92.48,73.34Z"/><path d="M15.07,167.79l1.29,4.13-7,2.2S.64,175.87,0,172.5Z"/><path d="M35.43,170.63l1.12,4.17-7.13,1.92s-8.74,1.38-9.24-2Z"/><path class="cls-2" d="M58.05,11.45S69.76,64.8,127.74,41C127.74,41,116.12-26.19,58.05,11.45Z"/><path class="cls-2" d="M48.45,54.76s40.38-14.21,29-47C77.44,7.8,22.86,7.8,48.45,54.76Z"/><polygon points="86.81 188.87 94.81 153.89 55.72 153.13 50.07 183.71 86.81 188.87"/><path class="cls-6" d="M60,150.17l-4.31-36.08c0-7.2.77-14,10.06-14l.36.38a15.88,15.88,0,0,0,22.28,1l1.51-1.36c9.3,0,10,6.78,10,14l-6,35.1C93.15,153.74,60.83,154.73,60,150.17Z"/><path class="cls-4" d="M104.65,155.83l-10-13.21,5.29-28.53c0-7.2-.68-14-10-14l-1.51,1.36c-3.23,2.91-11.34,18.38-11.34,18.38s-8-16.18-10.94-19.36l-.36-.38c-9.29,0-10.06,6.78-10.06,14l4,28.85L49.82,156C70.87,162.21,98.17,162.05,104.65,155.83Z"/><path class="cls-2" d="M73.76,53.49c1.51-1.88,3.08-2.87,4.69-3a5.43,5.43,0,0,1,3.78,1.52c.25.22,1.33-1,.88-1.39a7,7,0,0,0-4.74-1.75c-2.05.1-3.93,1.3-5.78,3.43C72.2,52.79,73.54,53.76,73.76,53.49Z"/><path class="cls-2" d="M105.28,53.49c-1.51-1.88-3.09-2.87-4.69-3a5.44,5.44,0,0,0-3.79,1.52c-.24.22-1.33-1-.88-1.39a7,7,0,0,1,4.75-1.75c2,.1,3.93,1.3,5.78,3.43C106.83,52.79,105.5,53.76,105.28,53.49Z"/><path class="cls-6" d="M42.33,71.36a3.27,3.27,0,1,0,3.27-3.27A3.27,3.27,0,0,0,42.33,71.36Z"/><path d="M77.2,64.57c1.37-2.84,2.82-4.38,4.08-4.37,1.67,0,3.22,2.69,3.63,3.62l1.75-.77c-.21-.48-2.15-4.71-5.34-4.77-2.11,0-4.06,1.75-5.84,5.46Z"/><path d="M94.24,63.23c1.37-2.84,2.85-4.45,4.08-4.38,1.67,0,3.22,2.7,3.63,3.63l1.75-.77c-.21-.48-2.15-4.71-5.34-4.77-2.16-.08-4.06,1.75-5.84,5.46Z"/><path class="cls-6" d="M99.63,74.63s-12.81,6.44-22,.83C77.58,75.46,88.7,98,99.63,74.63Z"/></svg>
<label class="hide" id="button" for="rainswitch"><span>Click here to make me smile!</span></label>
</div>
<h2 id="insert1">See particle animation turn this frown upside down with the power of pure CSS...</h2>
<p class="attribution">Spinning coin gif via <a href="https://gifimage.net/spinning-coin-gif/">GifImage</a> | dollar bill clip art via <a href="https://www.kissclipart.com/100-dollar-bill-drawing-clipart-united-states-one-vdl3xk/">kissclipart</a> | <a href="https://www.freepik.com/free-photos-vectors/business">Businesswoman vector created by macrovector - www.freepik.com</a></p>
</section>
<h2 id="insert2">...just imagine what it can do for YOU!</h2>
<section class="copy" id="info1">
<h3>Say you’re already familiar with the animation properties of CSS.
What makes "particle" animation any different?</h3>
<p>The defining characteristics of a particle animation are: </p>
<ol>
<li>Numerous like items being animated simultaneously</li>
<li>Randomness/variation: of particle speed, size, color, etc (This gives the animation a more interesting and natural appearance.)</li>
</ol>
<p>Professional animation software can automatically generate an infinite number of particles with randomized properties and realistic physics. With CSS, however, we are limited in a few ways:</p>
<ul>
<li>We have to individually create each particle we want to see;</li>
<li>we have to manually define the motion using keyframes;</li>
<li>and there is no built-in way to generate random values.</li>
</ul>
<p>This means that animating just 20 particles could take quite a while to code by hand! Fortunately, there's a more efficient way, using a CSS pre-processor such as SASS.</p>
</section>
<section class="copy" id="info2">
<h2>Example: using SASS</h2>
<p>Running SASS turns this...</p>
<div id="scss-demo"><img src="img/scss_example.png" alt="SCSS demo"></div>
<p>...into this!</p>
<div id="css-demo"><img src="img/css_example.png" alt="CSS demo"></div>
<h3>Bottom line:</h3>
<p>If you can animate one particle, you can animate a thousand with the automation power of SASS!</p>
</section>
<section class="copy" id="resources">
<h1>Resources</h1>
<h3>Relevant CSS tips & tricks: </h3>
<ul>
<li>Using pseudo-elements to create custom shapes with CSS: <a target="_blank" href="https://css-tricks.com/the-shapes-of-css">https://css-tricks.com/the-shapes-of-css</a></li>
<li>Simple hack for on-click events without Javascript: <a target="_blank" href="https://css-tricks.com/the-checkbox-hack/">https://css-tricks.com/the-checkbox-hack/</a></li>
</ul>
<h3>More examples of particle animation:</h3>
<ul>
<li>Multiple examples by different creators: <a target="_blank" href="https://codier.io/challenge/SJHHNMDrQ">https://codier.io/challenge/SJHHNMDrQ</a></li>
<li>Elegant floating points: <a target="_blank" href="https://codepen.io/robinselmer/pen/mRjoXr">https://codepen.io/robinselmer/pen/mRjoXr</a></li>
<li>Fireflies? <a target="_blank" href="https://codepen.io/tonkotsuboy/pen/zJbKNN">https://codepen.io/tonkotsuboy/pen/zJbKNN</a></li>
<li>3D movement converging at a single point - could create a "warp speed" effect with some tweaks: <a target="_blank" href="https://codepen.io/natewiley/pen/Ciwyn">https://codepen.io/natewiley/pen/Ciwyn</a></li>
<li>Bubbles: <a target="_blank" href="https://codepen.io/matchboxhero/pen/LzdgOv?editors=1100">https://codepen.io/matchboxhero/pen/LzdgOv?editors=1100</a></li>
</ul>
<h3>SASS:</h3>
<ul>
<li>Official SASS documentation: <a target="_blank" href="https://sass-lang.com/guide">https://sass-lang.com/guide</a></li>
<li>Free app for SASS with easy-to-use GUI: <a target="_blank" href="https://scout-app.io">https://scout-app.io</a></li>
<li>The @for rule: <a target="_blank" href="https://sass-lang.com/documentation/at-rules/control/for">https://sass-lang.com/documentation/at-rules/control/for</a></li>
<li>Demo of random() and @for: <a target="_blank" href="https://codepen.io/dan10gc/post/use-the-random-sass-function-to-create-unique-animations">https://codepen.io/dan10gc/post/use-the-random-sass-function-to-create-unique-animations</a></li>
<li>Concise explanation of random function: <a target="_blank" href="https://muffinman.io/sass-random-and-circle-animation/">https://muffinman.io/sass-random-and-circle-animation/</a></li>
</ul>
</section>
</main>
<script src="js/vendor/modernizr-3.8.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
</body>
</html>