Flocking simulation from The Coding Train
https://www.youtube.com/watch?v=mhjuuHl6qHM
A Pen by Shashamura1 on CodePen.
Flocking simulation from The Coding Train
https://www.youtube.com/watch?v=mhjuuHl6qHM
A Pen by Shashamura1 on CodePen.
Designed by: Mauricio Bucardo
Original image: https://dribbble.com/shots/5619509-Animated-Tab-Bar
You can use this menu in your projects. It also works with 100% width and reacts to changing the size of the window :)
| sectio.nav | |
| h1 FRONTEND TRENDS | |
| h3.span.loader | |
| span.m B | |
| span.m E | |
| span.m N | |
| span.m E | |
| span.m F | |
| span.m I | |
| span.m T |
| sectio.nav | |
| h1 FRONTEND TRENDS | |
| h3.span.loader | |
| span.m B | |
| span.m E | |
| span.m N | |
| span.m E | |
| span.m F | |
| span.m I | |
| span.m T |
| <svg viewBox="0 0 2500 1667" | |
| xmlns="http://www.w3.org/2000/svg" | |
| shape-rendering="crispEdges"> | |
| <polygon points="1251,842 1232,850 1250,859" style="fill:rgb(84,61,35)"/> | |
| <polygon points="1232,850 1232,852 1250,859" style="fill:rgb(55,37,20)"/> | |
| <polygon points="1232,852 1232,860 1250,859" style="fill:rgb(20,9,4)"/> | |
| <polygon points="1232,860 1252,870 1250,859" style="fill:rgb(55,37,18)"/> | |
| <polygon points="1250,859 1281,850 1251,842" style="fill:rgb(91,69,39)"/> | |
| <polygon points="1215,860 1230,869 1232,860" style="fill:rgb(64,49,30)"/> | |
| <polygon points="1232,860 1230,869 1252,870" style="fill:rgb(79,58,32)"/> |
| <h1>Famous Vampires</h1> | |
| <ul> | |
| <li>Blade, <cite>The Blade Trilogy</cite></li> | |
| <li>Count Dracula, <cite><q>Dracula</q>, by Bram Stoker</cite></li> | |
| <li>Count von Count, <cite>Sesame Street</cite></li> | |
| <li>Edward Cullen, <cite>The Twilight Saga</cite></li> | |
| <li>Grandpa Munster, <cite>The Munsters</cite></li> | |
| <li>Lazlo Cravensworth, <cite>What We Do in the Shadows</cite></li> | |
| <li>Larten Crepsley, <cite>Cirque du Freak: The Vampire's Assistant</cite></li> |
A Pen by Shashamura1 on CodePen.
| .hero | |
| .hero__inner | |
| div.hero__image(data-x="0.05" data-y="0.05" data-scale="1.05") | |
| img(src="https://assets.codepen.io/450456/layer-sky.jpg") | |
| div.hero__image.hero__image--sun(data-x="0.065" data-y="0.065" data-scale="1.1") | |
| img(src="https://assets.codepen.io/450456/layer-sunNoSparkle.png") | |
| div.hero__image.hero__image--sparkle(data-x="0.065" data-y="0.065" data-scale="1.1") | |
| img(src="https://assets.codepen.io/450456/layer-sunSparkle.png") | |
| div.hero__image( data-x="0.09" data-y="0.09" data-scale="1.15") | |
| img(src="https://assets.codepen.io/450456/layer-smallField.png") |
| <nav> | |
| <a href="#!">Home</a> | |
| <a href="#!">About</a> | |
| <a href="#!">Contact</a> | |
| </nav> | |
| <div class="header-circle"> | |
| <div class="outer-circle-large"> | |
| <div class="outer-circle-large-inner"> | |
| </div> |
A Pen by Shashamura1 on CodePen.