Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
273 lines (253 sloc) 22.1 KB
<!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>
You can’t perform that action at this time.