5+ JavaScript Logo Examples

This post contains a total of 5+ JavaScript Logo Examples with Source Code. All these Logos are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Logo Examples

1. By Wendy Kong

Made by Wendy Kong. Deno ( Dinosaur ) Logo with Raining Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            overflow: hidden;
        }
        .ref {
            width: var(--deno-ref-width);
            transform: translate(var(--deno-ref-translate), var(--deno-ref-translate));
            position: absolute;
            opacity: 0%;
        }
        .toggle-animation {
            font-family: Arial, Helvetica, sans-serif;
            position: fixed;
            top: 20px;
            left: 20px;
            user-select: none;
            z-index: 1;
        }
        #toggle-animation-input ~ label {
            padding: 4px 8px;
            border-radius: 5px;
            transition: all 0.2s linear;
        }
        #toggle-animation-input:focus ~ label,
        #toggle-animation-input:hover ~ label {
            background: black;
            color: white;
        }
        deno-logo[animated="false"] {
            display: block;
        }
        deno-logo[animated="true"] {
            display: none;
        }

footer {
    font-family: Arial, Helvetica, sans-serif;
  position: fixed;
  bottom: 20px;
}
</style>
</head>
<body>
  <template id="deno">
        <style>
            .deno {
                --deno-width: calc(var(--base-size) * 25vw);
                --deno-height: calc(var(--base-size) * 25vw);
                --deno-outline-weight: calc(var(--base-size) * 1vw);

                --deno__dino-head-width:  calc(var(--base-size) * 10.6vw);
                --deno__dino-head-height:  calc(var(--base-size) * 6vw);
                --deno__dino-head-translate: calc(var(--base-size) * 5vw), calc(var(--base-size) * 9.3vw);
                --deno__dino-head-outline-weight: calc(var(--base-size) * 0.7vw);

                --deno__dino-eyes-width: calc(var(--base-size) * 0.9vw);
                --deno__dino-eyes-height: calc(var(--base-size) * 0.9vw);
                --deno__dino-eyes-transform: calc(var(--base-size) * 6.7vw), calc(var(--base-size) * 10.7vw);
                --deno__dino-eyes-box-shadow: calc(var(--base-size) * 2vw) calc(var(--base-size) * 0.3vw);

                --deno-ref-width: calc(var(--base-size) * 31vw);
                --deno-ref-translate: calc(var(--base-size) * -2.8vw);

                --deno__dino--neck-right-height: calc(var(--base-size) * 13.5vw);
                --deno__dino--neck-right-width: calc(var(--base-size) * 4vw);
                --deno__dino--neck-right-transform: calc(var(--base-size) * 13.4vw), calc(var(--base-size) * 10vw);

                --deno__dino--neck-right-before-height: calc(var(--base-size) * 1.5vw);
                --deno__dino--neck-right-before-width: calc(var(--base-size) * 0.8vw);
                --deno__dino--neck-right-before-transform: calc(var(--base-size) * -0.5vw), calc(var(--base-size) * 4vw);

                --deno__dino--neck-left-height: calc(var(--base-size) * 9.5vw);
                --deno__dino--neck-left-width: calc(var(--base-size) * 3.5vw);
                --deno__dino--neck-left-transform: calc(var(--base-size) * 12vw), calc(var(--base-size) * 14.3vw);

                --deno__dino--neck-left-before-height: calc(var(--base-size) * 5vw);
                --deno__dino--neck-left-before-width: calc(var(--base-size) * 3.5vw);
                --deno__dino--neck-left-before-transform: calc(var(--base-size) * -0.3vw), calc(var(--base-size) * 5.3vw);

                --deno__dino-neck-outline-width:  calc(var(--base-size) * 0.7vw);

                --deno__rain-drop--width: calc(var(--base-size) * 0.2vw);

                --deno__dino--eye-color: black;
                --deno__dino--outline-color: black;
                --deno__dino--body-color: white;
                --deno__background-color: black;
                --deno__rain-color: white;

                --deno_rainfall-duration: 1s;
                --deno_blink-duration: 3s;

                width: var(--deno-width);
                height: var(--deno-height);
            }
            @media only screen and (min-width: 701px) {
                .deno {
                    --base-size: 1;
                }
            }
            @media only screen and (max-width: 700px) and (min-width: 400px) {
                .deno {
                    --base-size: 2;
                }
            }
            @media only screen and (max-width: 399px) {
                .deno {
                    --base-size: 3;
                }
            }
            .deno > *, .deno > *::before, .deno > *::after {
                position: absolute;
            }
            .deno__background {
                background: var(--deno__background-color);
                border-radius: 50%;
                width: var(--deno-width);
                height: var(--deno-width);
            }
            .deno__outline {
                border-radius: 50%;
                width: var(--deno-width);
                height: var(--deno-height);
                box-shadow: inset 0px 0px 0 var(--deno-outline-weight);
            }
            .deno__dino--head {
                width: var(--deno__dino-head-width);
                height: var(--deno__dino-head-height);
                transform: translate(var(--deno__dino-head-translate)) rotate(-6deg);
                background: var(--deno__dino--body-color);
                box-shadow: 0 0 0 var(--deno__dino-head-outline-weight) var(--deno__dino--outline-color);
                border-radius: 68% 49% 69% 41%;
            }
            @keyframes blink {
                10% {
                    height: calc(var(--deno__dino-eyes-height) * 0.5);
                }
                5%, 15% {
                    height: var(--deno__dino-eyes-height);
                }
            }
            .deno__dino--eyes {
                background: var(--deno__dino--eye-color);
                width: var(--deno__dino-eyes-width);
                height: var(--deno__dino-eyes-height);
                transform: translate(var(--deno__dino-eyes-transform));
                box-shadow: var(--deno__dino-eyes-box-shadow) var(--deno__dino--eye-color);
                border-radius: 50%;
            }
            .deno.animated .deno__dino--eyes {
                animation: blink 2s linear infinite;
            }
            .deno__dino--neck-right {
                background: var(--deno__dino--body-color);
                height: var(--deno__dino--neck-right-height);
                width: var(--deno__dino--neck-right-width);
                transform: translate(var(--deno__dino--neck-right-transform)) skewX(5deg);
                border-radius: 0 58% 0 0;
            }
            .deno__dino--neck-right::before {
                content: "";
                background: var(--deno__dino--outline-color);
                transform: translate(var(--deno__dino--neck-right-before-transform)) rotate(57deg);
                height: var(--deno__dino--neck-right-before-height);
                width: var(--deno__dino--neck-right-before-width);
                border-radius: 50%;
            }
            .deno__dino--neck-left {
                background: var(--deno__dino--body-color);
                height: var(--deno__dino--neck-left-height);
                width: var(--deno__dino--neck-left-width);
                transform: translate(var(--deno__dino--neck-left-transform)) skewX(4deg);
                box-shadow: calc(var(--deno__dino-neck-outline-width) * -1) 0 var(--deno__dino--outline-color);
            }
            .deno__dino--neck-left::before {
                content: "";
                background: var(--deno__dino--body-color);
                height: var(--deno__dino--neck-left-before-height);
                width: var(--deno__dino--neck-left-before-width);
                transform: translate(var(--deno__dino--neck-left-before-transform)) rotate(7deg);
                box-shadow: calc(var(--deno__dino-neck-outline-width) * -1) 0 var(--deno__dino--outline-color);
            }
            .deno__rain {
                width: var(--deno-width);
                height: var(--deno-height);
            }
            @keyframes rainFall {
                0% {
                    transform: var(--deno__rain-drop--transform) translateY(calc(var(--deno-height) * -0.8));
                }
                100% {
                    transform: var(--deno__rain-drop--transform) translateY(calc(var(--deno-height) * 0.8));
                }
            }
            .deno__rain-drop {
                position: absolute;
                height: var(--deno-height);
                background: var(--deno__rain-color);
                transform: var(--deno__rain-drop--transform);
                background: linear-gradient(to bottom, var(--deno__rain-background-gradient));
                width: var(--deno__rain-drop--width);
                opacity: 60%;
            }
            .deno.animated .deno__rain-drop {
                transform: var(--deno__rain-drop--transform) translateY(calc(var(--deno-height) * -1));
                animation: rainFall var(--deno_rainfall-duration) linear infinite;
                animation-delay: var(--deno_rainfall-delay);
            }
            .deno__rain-drop:nth-child(1) {
                --deno__rain-drop--transform: translate(calc(var(--base-size) * 2.5vw)) rotate(-8deg);
                --deno__rain-background-gradient: transparent 0%, transparent 35%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 50%, 
                    transparent 0%, transparent 54%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 71%, 
                    transparent 0%;
            }
            .deno__rain-drop:nth-child(2) {
                --deno__rain-drop--transform: translate(calc(var(--base-size) * 3.3vw)) rotate(-6deg);
                --deno__rain-background-gradient: transparent 0%, transparent 28%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 62%, 
                    transparent 0%, transparent 67%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 81%, 
                    transparent 0%;
            }
            .deno__rain-drop:nth-child(3) {
                --deno__rain-drop--transform: translate(calc(var(--base-size) * 4.4vw)) rotate(-6deg);
                --deno__rain-background-gradient: transparent 0%, transparent 22%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 34%, 
                    transparent 0%, transparent 47%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 65%, 
                    transparent 0%;
            }
            .deno__rain-drop:nth-child(4) {
                --deno__rain-drop--transform: translate(calc(var(--base-size) * 5.6vw)) rotate(-6deg);
                --deno__rain-background-gradient: transparent 0%, transparent 26%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 62%, 
                    transparent 0%, transparent 80%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 90%, 
                    transparent 0%;
            }
            .deno__rain-drop:nth-child(5) {
                --deno__rain-drop--transform: translate(calc(var(--base-size) * 6.6vw)) rotate(-6deg);
                --deno__rain-background-gradient: transparent 0%, transparent 65%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 69%, 
                    transparent 0%, transparent 88%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 95%, 
                    transparent 0%;
            }
            .deno__rain-drop:nth-child(6) {
                --deno__rain-drop--transform: translate(calc(var(--base-size) * 8.1vw)) rotate(-5deg);
                --deno__rain-background-gradient: transparent 0%, transparent 11%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 33%, 
                    transparent 0%, transparent 75%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 83%, 
                    transparent 0%;
            }
            .deno__rain-drop:nth-child(7) {
                --deno__rain-drop--transform: translate(calc(var(--base-size) * 9.3vw)) rotate(-4deg);
                --deno__rain-background-gradient: transparent 0%, transparent 20%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 28%, 
                    transparent 0%, transparent 65%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 76%, 
                    transparent 0%;
            }
            .deno__rain-drop:nth-child(8) {
                --deno__rain-drop--transform: translate(calc(var(--base-size) * 10.4vw)) rotate(-3deg);
                --deno__rain-background-gradient: transparent 0%, transparent 13%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 25%, 
                    transparent 0%;
            }
            .deno__rain-drop:nth-child(9) {
                --deno__rain-drop--transform: translate(calc(var(--base-size) * 11.9vw)) rotate(-3deg);
                --deno__rain-background-gradient: transparent 0%, transparent 6%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 35%,
                    transparent 0%;
            }
            .deno__rain-drop:nth-child(10) {
                --deno__rain-drop--transform: translate(calc(var(--base-size) * 13.3vw)) rotate(-3deg);
                --deno__rain-background-gradient: transparent 0%, transparent 17%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 28%,
                    transparent 0%;
            }
            .deno__rain-drop:nth-child(11) {
                --deno__rain-drop--transform: translate(calc(var(--base-size) * 14.5vw)) rotate(-2deg);
                --deno__rain-background-gradient: transparent 0%, transparent 7%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 25%,
                    transparent 0%;
            }
            .deno__rain-drop:nth-child(12) {
                --deno__rain-drop--transform: translate(calc(var(--base-size) * 15.8vw)) rotate(-1deg);
                --deno__rain-background-gradient: transparent 0%, transparent 13%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 21%, 
                    transparent 0%, transparent 25%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 33%, 
                    transparent 0%;
            }
            .deno__rain-drop:nth-child(13) {
                --deno__rain-drop--transform: translate(calc(var(--base-size) * 17.3vw)) rotate(-1deg);
                --deno__rain-background-gradient: transparent 0%, transparent 20%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 41%,
                    transparent 0%;
            }
            .deno__rain-drop:nth-child(14) {
                --deno__rain-drop--transform: translate(calc(var(--base-size) * 18.7vw)) rotate(-1deg);
                --deno__rain-background-gradient: transparent 0%, transparent 15%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 24%, 
                    transparent 0%, transparent 35%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 48%, 
                    transparent 0%, transparent 73%, 
                    var(--deno__rain-color) 73%;
            }
            .deno__rain-drop:nth-child(15) {
                --deno__rain-drop--transform: translate(calc(var(--base-size) * 19.9vw)) rotate(-1deg);
                --deno__rain-background-gradient: transparent 0%, transparent 17%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 53%, 
                    transparent 0%;
            }
            .deno__rain-drop:nth-child(16) {
                --deno__rain-drop--transform: translate(calc(var(--base-size) * 21.4vw)) rotate(-1deg);
                --deno__rain-background-gradient: transparent 0%, transparent 38%, 
                    var(--deno__rain-color) 0%, var(--deno__rain-color) 50%, 
                    transparent 0%, transparent 67%, 
                    var(--deno__rain-color) 0%;
            }
            .deno__rain-drop:nth-child(17) {
                --deno__rain-drop--transform: translate(calc(var(--base-size) * 22.7vw)) rotate(0deg);
                --deno__rain-background-gradient: transparent 0%, transparent 44%, 
                    var(--deno__rain-color) 0%;
            }
            .deno__rain-drop:nth-child(n) {
                --deno_rainfall-delay: calc(var(--deno_rainfall-duration) / 1);
            }
            .deno__rain-drop:nth-child(2n) {
                --deno_rainfall-delay: calc(var(--deno_rainfall-duration) / 2);
            }
            .deno__rain-drop:nth-child(3n) {
                --deno_rainfall-delay: calc(var(--deno_rainfall-duration) / 3);
            }
        </style>
        <div class="deno">
            <div class="deno__background"></div>
            <div class="deno__rain">
                <span class="deno__rain-drop"></span>
                <span class="deno__rain-drop"></span>
                <span class="deno__rain-drop"></span>
                <span class="deno__rain-drop"></span>
                <span class="deno__rain-drop"></span>
                <span class="deno__rain-drop"></span>
                <span class="deno__rain-drop"></span>
                <span class="deno__rain-drop"></span>
                <span class="deno__rain-drop"></span>
                <span class="deno__rain-drop"></span>
                <span class="deno__rain-drop"></span>
                <span class="deno__rain-drop"></span>
                <span class="deno__rain-drop"></span>
                <span class="deno__rain-drop"></span>
                <span class="deno__rain-drop"></span>
                <span class="deno__rain-drop"></span>
                <span class="deno__rain-drop"></span>
            </div>
            <div class="deno__dino--neck-left"></div>
            <div class="deno__dino--head"></div>
            <div class="deno__dino--eyes"></div>
            <div class="deno__dino--neck-right"></div>
            <div class="deno__outline"></div>
        </div>
    </template>

 <header>
        <div class="toggle-animation">
            <input type="checkbox" id="toggle-animation-input">
            <label for="toggle-animation-input">Turn on animation</label>
        </div>
    </header>
    <main>
        <deno-logo animated="false"></deno-logo>
        <deno-logo animated="true"></deno-logo>
    </main>

<footer>
  CSS Logo of <a href="https://github.com/denoland" target="_blank">Deno</a>
</footer>
      <script>
// JS for custom elements

class DenoLogoElement extends HTMLElement {
  constructor() {
    super();
    const template = document.querySelector('#deno');
    const cloned = template.content.cloneNode(true);
    this.attachShadow({ mode: 'open' }).appendChild(cloned);
    if (this.animated === 'true') {
      this.shadowRoot.querySelector('.deno').classList.add('animated');
    }
  }
  get animated() {
    return this.getAttribute('animated');
  }}

customElements.define('deno-logo', DenoLogoElement);
document.querySelector('#toggle-animation-input').addEventListener('click', e => {
  const onAnimation = e.target.checked;
  document.querySelector('deno-logo[animated="true"]').style.display = onAnimation ? 'block' : 'none';
  document.querySelector('deno-logo[animated="false"]').style.display = onAnimation ? 'none' : 'block';
});
    </script>
</body>
</html>

2. By Joรฃo Santos

Made by Joรฃo Santos. Webpack Logo with Zoom In Zoom Out option. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
:root{
	--colorOutside: #8ED6FB;
	--colorInside: #1C78C0;
	--size: 20; /* change this to resize the logo*/
}

*{
	box-sizing: border-box;
}

body{
	font-size: calc( 10px * var(--size) );
}

.webpack{ /*just a container*/
	width: 1em;
	height: 1em;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.webpack .outside{
		width: 100%;
		height: 50%;
		border: solid .15em  var(--colorOutside);
		border-top: solid .08em transparent;
		border-bottom: solid .08em transparent;
		transform: translateY(50%);
		position: relative;
	}

.webpack .outside:before,.webpack .outside:after{
			content:"";
			position: absolute;
			left: -.15em;
			top: -.08em;
			width: 100%;
		 height: 100%;
			border: solid .15em  var(--colorOutside);
		 border-top: solid .08em transparent;
		 border-bottom: solid .08em transparent;
		}

.webpack .outside:before{
			transform: rotate(60deg);
		}

.webpack .outside:after{
			transform: rotate(-60deg);
		}

.webpack .inside{
		position: absolute;
		left: -.315em;
		right: 0;
		top: .18em;
		bottom: 0;
		margin: auto;
		width: .26em;
		height: .3em;
		transform: skewY(30deg);
		background: var(--colorInside);
	}

.webpack .inside:before,.webpack .inside:after{
			content: "";
			position: absolute;
			background: var(--colorInside);
		 bottom: 0;
			margin: auto;
			width: .26em;
			height: .3em;
		}

.webpack .inside:before{
			left: 0;
			right: -.62em;
			top: -.36em;
			transform: skewY(-49deg);
		}

.webpack .inside:after{
			left: .155em;
			right: 0;
			top: -.72em;
			transform: skewY(-49deg) skewX(41deg); 
		}

input[type="range"]{
	-webkit-appearance: none;
	position: absolute;
	width: 100px;
	height: 20px;
	top: 350px;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background: transparent;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background: var(--colorOutside);
  border-radius: 4px;
  border: 1px solid gray;
}
input[type=range]::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--colorInside);;
  cursor: pointer;
  -webkit-appearance: none;
	 margin-top: -6px;
}

@media (max-width: 768px) {
	.webpack{
		transform: translateY(-65%);
	}
 input[type="range"]{
		transform: scale(1.5) translateY(0);
	}
}
</style>
</head>
<body>
  <div class="webpack">
	<div class="outside"></div>
	<div class="inside"></div>
</div>
<input type="range" min="10" max="30" value="20"/>
      <script>
let range = document.querySelector('input');
range.addEventListener('input', function () {
  document.body.style.setProperty('--size', range.value);
});
//prevent mobile keyboard
range.addEventListener('touchstart', () => {
  range.removeAttribute('readonly');
});
range.addEventListener('touchend', () => {
  range.setAttribute('readonly', 'readonly');
});
    </script>
</body>
</html>

3. By Jeffrey Fisher

Made by Jeffrey Fisher. Slofish Logo Animation using JavaScript & CSS. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<style>
.center {
  position: absolute;
  left: -10%;
  top: 50%;
}
body {
  background: black;
  overflow: hidden;
}
.fish {
  position: absolute;
  left: -10%;
  top: 50%;
}
.fish-body {
  position: absolute;
  left: -10%;
  top: 50%;
  width: 50px;
  height: 50px;
  background: #749acc;
  transform: rotate(45deg);
}
.fish-tail {
  width: 0;
  height: 0;
  position: absolute;
  left: -10%;
  top: 50%;
  margin-left: -30px;
  margin-top: 5px;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #749acc;
}
.fish-fin {
  width: 0;
  height: 0;
  position: absolute;
  left: -10%;
  top: 50%;
  margin-left: 20px;
  margin-top: 25px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid black;
}
.fish-outer-eye {
  width: 17px;
  height: 17px;
  position: absolute;
  left: -10%;
  top: 50%;
  margin-left: 36px;
  margin-top: 17px;
  border-radius: 17px;
  background: black;
}
.fish-middle-eye {
  width: 14px;
  height: 14px;
  position: absolute;
  left: -10%;
  top: 50%;
  margin-left: 37px;
  margin-top: 18px;
  border-radius: 14px;
  background: #749acc;
}
.fish-inner-eye {
  width: 10px;
  height: 10px;
  position: absolute;
  left: -10%;
  top: 50%;
  margin-left: 40px;
  margin-top: 20px;
  border-radius: 10px;
  background: black;
}
</style>
</head>
<body>
  <div class='fish'>
  <div class='fish-body'></div>
  <div class='fish-tail'></div>
  <div class='fish-fin'></div>
  <div class='fish-outer-eye'></div>
  <div class='fish-middle-eye'></div>
  <div class='fish-inner-eye'></div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
      <script>
var fish = $(".fish");

var randomRange = function (min, max) {
  return Math.random() * (max - min) + min;
};

var newFish;
var fishies = [];

for (var i = 0; i < 50; i++) {
  newFish = fish.clone().appendTo("body");
  fishies.push(newFish);
}

var currentFish;
setInterval(function () {
  console.log(fishies.length);
  currentFish = fishies.pop();
  fishies.unshift(currentFish);

  if (currentFish) {
    currentFish.css("top", Math.floor(Math.random() * 100) + "%");
    currentFish.animate({ "left": "110%" }, randomRange(3000, 5000), 'swing', function () {
      $(this).css("left", "-10%");
    });
  }
}, 100);
    </script>
</body>
</html>

4. By Tim Pietrusky

Made by Tim Pietrusky. Breaking Bad Logo with Smoke Effect and Music. Source

javascript logo by tim pietrusky
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<style>
.wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
}
.wrapper {
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  background: #090f05;
  overflow: hidden;
}

.wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
}
.wrapper {
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#breakingbad {
  position: relative;
  width: 530px;
  border: 0.5em solid rgba(255, 255, 255, 0.1);
  padding: 1em;
  overflow: hidden;
}
#breakingbad:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  z-index: -1337;
  background: #15220c;
}

span {
  color: #fff;
}

.chemical-element {
  width: 165px;
  height: 165px;
  position: relative;
  font: bold 95px Arial;
  color: #fafffb;
  padding: 25px 25px 25px 30px;
  border: 3px solid #DDFFE2;
  display: inline-block;
  background: linear-gradient(-45deg, #5cbe73 1%, #182b04 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.chemical-element:nth-child(4) {
  margin-left: 165px;
  padding-left: 23px;
}

.desc {
  position: absolute;
  font: bold 13px Arial;
  color: rgba(244, 247, 245, 0.95);
}

.big {
  font: bold 20px Arial;
}

.medium {
  font: bold 17px Arial;
}

div[role="top-left"] {
  top: 8px;
  left: 10px;
}

div[role="top-right"] {
  top: 8px;
  right: 5px;
  text-align: right;
  width: 25px;
}

div[role="bottom-left-1"] {
  bottom: 20px;
  left: 5px;
  text-align: left;
}

div[role="bottom-left-2"] {
  bottom: 5px;
  left: 5px;
  text-align: left;
}

.title-1,
.title-2 {
  width: 50px;
  display: inline-block;
  height: 130px;
  vertical-align: bottom;
}

.title-2 {
  height: 134px;
}

#smoke {
  position: absolute;
  z-index: -1;
  left: 22%;
  top: 0;
}

audio {
  display: none;
}

#player {
  position: fixed;
  top: 10%;
  right: 10%;
  transition: all .3s ease-in;
  opacity: .1;
  cursor: pointer;
}

#player:hover {
  opacity: 1;
}

#player svg[role="playing"] {
  display: none;
}
</style>
</head>
<body>
<div class="wrapper">
<section id="breakingbad">
  <span class="chemical-element">
    Br
    <div class="desc" role="top-left">79.904</div>
    <div class="desc" role="top-right">
      -1
      +1
      +5
    </div>
    <div class="desc big" role="bottom-left-1">35</div>
    <div class="desc" role="bottom-left-2">2-8-18-7</div>
  </span>
  
  <span class="title-1">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="309px" height="110px" viewBox="-7.328 -8.539 309 110" enable-background="new -7.328 -8.539 309 110" xml:space="preserve">
      <path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M234.672,83.211c1.315-3.006,4.31-4.078,5-4.25 c2-0.5-5,7.625,4,13.875C246.939,95.105,231.071,91.442,234.672,83.211z"/>
      <path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M239.547,58.836c-1.689,0.422-4.875,3.5-3.25,9.125c0.646,2.237,3.795,3.512,6.345,4.617c1.575,0.682,2.558,1.774,3.879,2.201c1.694,0.547,3.702,0.403,5.651,1.182c3.125,1.25,17-3.375,24.75-0.875s10.125,11.875-1.375,14.125s-26,2.125-24.375,3.25s14.875,2.75,23.375-0.125s10.75-2.5,13.25-10.375s-9.625-13-23.125-11.75s-22.25-0.75-22.25-2.375c0,3.01-0.796-0.809-1.287-4.438C240.804,60.949,241.36,58.383,239.547,58.836z"/>
    <g>
      <g>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M281.297,30.461c0-1.5-11.625-6.125-14.875-7.125c-2.4-0.738-21.808-3.803-27.125,10c-6.5,16.875,10.398,26.224,11.375,27.125c1.625,1.5,8.5,2.375,14.125,0.75s12.5-9.125,15.125-12S281.297,31.961,281.297,30.461z M272.214,47.756c-0.713,4.616-4.275,7.217-7.917,8.08c-4.355,1.032-7.909,1.136-11.021-2.343c-4.526-5.062-3.002-18.75,6.753-19.821c7.16-0.786,9.268,3.681,12.143,6.789C273.6,42.004,272.496,45.934,272.214,47.756z"/>
    </g>
</g>
      <path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M248.172,29.711c-1.362,0.545,14.754-13.052,23.875,2.5C269.023,27.055,249.813,29.054,248.172,29.711z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M277.922,26.586c-0.91,0,5.75-3.875,10.75,0.875c4.649,4.417,0.143,8.5-0.875,8.5c-3,0-7-0.125-1.625-7.25C289.032,24.919,277.895,26.586,277.922,26.586z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M180.672,71.336c1.031-0.75,3.625-3.625,4.625-5s-0.125-34.875-0.875-35.75s0-5.875-1.125-6s-3.125-0.375-2.875-1.125s8.5-1.75,9.875,1.125s3.25,3.125,4.125,2.875s2.375,4.625,1.375,5.5s2.625,1.125,5-1.5s8.375-4.625,15.875-5.375c6.441-0.644-6.66-3.593-8.375-3.25c-1.875,0.375,3.25-3.125,10.75-0.75s9.375,8.5,9.625,13.375c0.249,4.848,0.017,29.298,1.25,32.875c1.25,3.625,3.125,3,3.75,3.375s-13.625,0.75-14.625,0.25s2.625-2.125,4.125-4.375s-2.375-3.125-7.25-3.875c-0.378-0.058-1.122-33.775-1.5-30.75c0.125-1-6-6.5-17.5,6.5c-1.037,1.172,0.162,25.411-1.625,24.875c-1.25-0.375-5.375,1.25-3.75,3.625s5.625,3.5,4.5,3.75S179.297,72.336,180.672,71.336z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M160.672,70.461c1.25-0.375,2.25-0.25,2.125-4.25s0.25-30.625,0.5-31.625s1.625-0.75,2.375-1.75s0-5.125-1-5.5s-5.75-2.625-6.25-3.5s5-4.625,9.625-3.75c3.078,0.583,7.875,1.625,4,7.875c-2.15,3.469,1.827,34.449,0,39.625c-0.75,2.125,2.125,3.125,2.875,4.125c0.645,0.86-13.007,1.008-14,0.125C160.778,71.708,160.107,70.63,160.672,70.461z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M167.547,7.586c2.535-0.4,5.675-3.839,2.125-6.375c-4.035-2.882-6.007,0.215-6.5,0.75C161.122,4.182,164.722,8.032,167.547,7.586z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M100.672,71.336c-0.952,0,4.5-3.875,5-5.5s-0.5-60.75-0.5-60.75s-2.375-3.5-4.75-3.625s8.125-2.875,10.125,0.5s0.125,10,0.75,9.625s4.375,3,5,2.75s0.5,26.375,0.375,26.75s1.5,4.875,1.25,5.625s20.375-17.25,20.75-18.375s-1-2.625-4.125-4.625s16.25-2,18.625,0.875c0.14,0.169-7.432,3.081-6.875,4.75c0.125,0.375,0.75,2.75-0.75,2.75s-14.375,13.5-14.625,14.5s21.125,25.125,24.25,24.5c1.89-0.378-11.431,2.461-17.875,0.5c-2.875-0.875,4.625-3,3.875-4s-16.875-16.625-20.25-18.25s-4,3.125-4.75,3.625s1,11-0.375,11.375s-4.75,2.5-3.75,2.625
    s0.75,3.375,3.875,4.625C119.88,73.169,103.463,71.336,100.672,71.336z"/>
<g>
    <g>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M91.679,69.193c0.218-0.296-0.156-27.612-0.072-27.905c2.628-9.174-4.629-22.5-16.935-20.411c-3.036,0.516,6.358,2.869,7.721,3.457c3.471,1.497,4.934,4.976,3.279,5.46c-4.03,1.179-6.902-0.563-7.417-1c-0.799-0.679-14.84-0.877-15.333,0.333c0.01-0.024-3.955,1.886-5.167,0.5c-0.301-0.343-1.283-3.212-1.583-3.083c-1.682,0.721-6,11.5,2.417,11.417c7.517-0.074-1.568-4.709,15.917-5.5c6.846-0.31,7.442,5.796,7.302,7.107c-0.342,3.192-2.755,4.375-6.135,4.143c-6.083-0.417-22.167,3.417-25.667,11.917c-3.39,8.231,8.167,19.991,13.917,17.167c2.913-1.431-3.357-0.902-3.083-5.083c0.089-1.359,3.64-0.825,6.578-1.133c3.157-0.332,5.736-1.469,6.422-1.95c3.917-2.75,9.333-4,11.25-0.917c1.337,2.15,6.636,9.822,8.833,9.333C95.675,72.655,91.963,69.342,91.679,69.193z M80.755,56.877c-3.333,4.25-10.667,4.583-14,4.833c-3.333,0.25-8.083-1.167-6.333-5.667s13.45-9.873,19.167-8.833C81.527,47.563,80.4,57.331,80.755,56.877z"/>
    </g>
</g>
<g>
    <g>
        <path fill="#fff" d="M46.088,45.377c-0.833-27.333-22.667-23.667-26.917-23.167s-19.5,2.5-19.167,27.667c0.333,25.167,23,24,22.417,23.833C20.066,73.038,6.05,64.78,10.505,62.127c0.965-0.574,10.617,2.468,11.809,2.718c8.407,1.765,17.338-1.1,17.607-1.885c-0.351,1.02-5.816,8.564-6.917,8.917c11.641-3.732,13.5-13.833,9.25-14.833s-4.75,1-14.583,3.75c-8.896,2.487-18.104-10.349-15.333-13.75C14.527,44.358,46.122,46.48,46.088,45.377z M24.838,22.877c7.75,0.25,6.917,1.583,0.5,3c-6.417,1.417-10.75,0.167-11.417,0.417C12.342,26.887,17.088,22.627,24.838,22.877z M13.672,40.377c0.684-0.214,0.667-9.583,11.5-9.75c9.755-0.15,9.824,9.594,9.417,10.083C34.172,41.211,12.338,40.794,13.672,40.377z"/>
    </g>
</g>
</svg>
        
    </span>
    
    <br>
    
    <span class="chemical-element">
        Ba
        <div class="desc" role="top-left">137.33</div>
        <div class="desc" role="top-right">+2</div>
        <div class="desc medium" role="bottom-left-1">56</div>
        <div class="desc" role="bottom-left-2">2-8-18-7</div>
    </span>
  
    <span class="title-2">
        <svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="63px" height="91px" viewBox="-6.379 -7.374 63 91" enable-background="new -6.379 -7.374 63 91" xml:space="preserve">
<g>
    <g>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M48.455,71.626c-0.167-2.333-2.333-66.5-1.167-69c1.851-3.966-15.406-2.701-11.5-1c10.333,4.5,8.333,10,7.5,11.833c-0.833,1.833-6,1.333-5.333,2.833c0.667,1.5,0.667,18.5-1.333,19c-3.996,0.999-0.838-2.276-12.833-5.667c-8.569-2.422-13.6,1.171-17.367,4.968c-3.713,3.743-5.559,7.84-5.133,7.698c-1.523,0.508-6.476,33.714,22.667,35.333c5.335,0.296,9.349-3.76,7.667-4c0.636,0.091-11.414,3.298-14.5,1c-7.758-5.777-5.298-10.445-5.167-9.833c0.5,2.333,8.167,5.333,13.5,4.167c5.121-1.121,9.545-7.824,12.833-7.167c0.833,0.167,0.667,5,0.5,6c-0.167,1,2.833-0.333,4.167,0.5c1.333,0.833,0.5,2.667,1,5.333s7.5,1.5,8,0.667C52.455,73.46,48.621,73.96,48.455,71.626z M37.455,47.793c-0.5,3.667-1.833,14.167-13,15.833c-11.725,1.75-10.442-13.694-10.5-13.5c0.454-1.515-3.167-14.167,11.333-15.333C31.25,34.313,38.048,43.439,37.455,47.793z"/>
    </g>
</g>
</svg>

    </span>
  
  <canvas id="smoke"></canvas>
</section>
</div>
<!-- /Breaking Bad Logo -->





<!-- Breaking Bad theme -->
<audio></audio>

<div id="player">
  <svg role="paused" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.0" id="layer1" width="40px" height="40px" viewBox="0 0 75 75">
  <g><polygon
     points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769"
     style="stroke:#fff;stroke-width:5;stroke-linejoin:round;fill:#fff;" />
  <path
     d="M 48.651772,50.269646 69.395223,25.971024"
     style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"
     inkscape:connector-curvature="0"
     sodipodi:nodetypes="cc" />
  <path
     d="M 69.395223,50.269646 48.651772,25.971024"
     style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"
     inkscape:connector-curvature="0"
     sodipodi:nodetypes="cc" />
  </g>
  </svg>
  
  <svg role="playing" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.0" width="40px" height="40px" viewBox="0 0 75 75">
    <g>
      <polygon
points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769" style="stroke:#fff;stroke-width:5;stroke-linejoin:round;fill:#fff;"
/>
    <path 
      	d="M 48.128,49.03 C 50.057,45.934 51.19,42.291 51.19,38.377 C 51.19,34.399 50.026,30.703 48.043,27.577" style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"/>
		<path 
			d="M 55.082,20.537 C 58.777,25.523 60.966,31.694 60.966,38.377 C 60.966,44.998 58.815,51.115 55.178,56.076" style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"/>

    <path 
			d="M 61.71,62.611 C 66.977,55.945 70.128,47.531 70.128,38.378 C 70.128,29.161 66.936,20.696 61.609,14.01"
			style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"/>
		</g>
	</svg>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var audio = $('audio').get(0),
_paused = $('svg[role="paused"]'),
_playing = $('svg[role="playing"]');

audio.src = Modernizr.audio.ogg ?
'http://timpietrusky.com/cdn/breaking_bad_intro.ogg' :
'http://timpietrusky.com/cdn/breaking_bad_intro.mp3';

_paused.click(function () {
  $(this).css('display', 'none');
  _playing.css('display', 'block');
  audio.play();
});

_playing.click(function () {
  $(this).css('display', 'none');
  _paused.css('display', 'block');
  audio.pause();
});

// Set to start
$("audio").bind('ended', function () {
  _playing.css('display', 'none');
  _paused.css('display', 'block');
  this.currentTime = 0;
});

var lastRender = new Date().getTime();
var context;
var smoke_1 = new ParticleEmitter();
var smoke_2 = new ParticleEmitter();
var smoke_3 = new ParticleEmitter();
var CANVAS_WIDTH = 500;
var CANVAS_HEIGHT = 400;
var dirtyLeft = 0;
var dirtyTop = 0;
var dirtyRight = CANVAS_WIDTH;
var dirtyBottom = CANVAS_HEIGHT;
var windVelocity = 0.01;
var count = 0;

window.requestAnimFrame = function () {
  return window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  function (c) {
    window.setTimeout(c, 16.6);
  };
}();

init();

function init() {
  var canvas = $('#smoke').get(0);
  if (canvas.getContext) {
    context = canvas.getContext('2d');
  } else {
    return;
  }

  canvas.width = CANVAS_WIDTH;
  canvas.height = CANVAS_HEIGHT;

  var img_smoke_1 = new Image(),
  img_smoke_2 = new Image(),
  img_smoke_3 = new Image();

  img_smoke_1.src = 'http://timpietrusky.com/cdn/smoke_1.png';
  img_smoke_2.src = 'http://timpietrusky.com/cdn/smoke_2.png';
  img_smoke_3.src = 'http://timpietrusky.com/cdn/smoke_3.png';

  smoke_1.m_alpha = 0.2;
  smoke_3.m_speed = 0.001;
  smoke_1.init(.142, .631, 90, img_smoke_1);

  smoke_2.m_alpha = 0.3;
  smoke_2.init(.322, .753, 90, img_smoke_2);

  smoke_3.m_alpha = 0.1;
  smoke_3.m_speed = 0.02;
  smoke_3.init(.222, .553, 90, img_smoke_3);

  requestAnimFrame(render);
}

function ParticleEmitter() {
  this.m_x;
  this.m_y;
  this.m_dieRate;
  this.m_image;
  this.m_speed = 0.04;
  this.m_alpha = 1.0;

  this.m_listParticle = [];

  // ParticleEmitter().init function
  // xScale = number between 0 and 1. 0 = on left side 1 = on top
  // yScale = number between 0 and 1. 0 = on top 1 = on bottom
  // particles = number of particles
  // image = smoke graphic for each particle
  this.init = function (xScale, yScale, particles, image) {
    // the effect is positioned relative to the width and height of the
    // canvas
    this.m_x = CANVAS_WIDTH * xScale;
    this.m_y = CANVAS_HEIGHT * yScale;
    this.m_image = image;
    this.m_dieRate = 0.95;
    // start with smoke already in place
    for (var n = 0; n < particles; n++) {
      this.m_listParticle.push(new Particle());
      this.m_listParticle[n].init(this, n * 50000 * this.m_speed);
    }
  };

  this.update = function (timeElapsed) {
    for (var n = 0; n < this.m_listParticle.length; n++) {
      this.m_listParticle[n].update(timeElapsed);
    }
  };

  this.render = function (context) {
    for (var n = 0; n < this.m_listParticle.length; n++) {
      this.m_listParticle[n].render(context);
    }
  };
};

function Particle() {
  this.m_x;
  this.m_y;
  this.m_age;
  this.m_xVector;
  this.m_yVector;
  this.m_scale;
  this.m_alpha;
  this.m_canRegen;
  this.m_timeDie;
  this.m_emitter;

  this.init = function (emitter, age) {
    this.m_age = age;
    this.m_emitter = emitter;
    this.m_canRegen = true;
    this.startRand();
  };

  this.isAlive = function () {
    return this.m_age < this.m_timeDie;
  };

  this.startRand = function () {
    // smoke rises and spreads
    this.m_xVector = Math.random() * 0.5 - 0.25;
    this.m_yVector = -1.5 - Math.random();
    this.m_timeDie = 20000 + Math.floor(Math.random() * 12000);

    var invDist = 1.0 / Math.sqrt(this.m_xVector * this.m_xVector +
    this.m_yVector * this.m_yVector);
    // normalise speed
    this.m_xVector = this.m_xVector * invDist * this.m_emitter.m_speed;
    this.m_yVector = this.m_yVector * invDist * this.m_emitter.m_speed;
    // starting position within a 20 pixel area
    this.m_x = this.m_emitter.m_x + Math.floor(Math.random() * 20) - 10;
    this.m_y = this.m_emitter.m_y + Math.floor(Math.random() * 20) - 10;
    // the initial age may be > 0. This is so there is already a smoke trail
    // in
    // place at the start
    this.m_x += (this.m_xVector + windVelocity) * this.m_age;
    this.m_y += this.m_yVector * this.m_age;
    this.m_scale = 0.01;
    this.m_alpha = 0.0;
  };

  this.update = function (timeElapsed) {
    this.m_age += timeElapsed;
    if (!this.isAlive()) {
      // smoke eventually dies
      if (Math.random() > this.m_emitter.m_dieRate) {
        this.m_canRegen = false;
      }
      if (!this.m_canRegen) {
        return;
      }
      // regenerate
      this.m_age = 0;
      this.startRand();
      return;
    }
    // At start the particle fades in and expands rapidly (like in real
    // life)
    var fadeIn = this.m_timeDie * 0.05;
    var startScale;
    var maxStartScale = 0.3;
    if (this.m_age < fadeIn) {
      this.m_alpha = this.m_age / fadeIn;
      startScale = this.m_alpha * maxStartScale;
      // y increases quicker because particle is expanding quicker
      this.m_y += this.m_yVector * 2.0 * timeElapsed;
    } else {
      this.m_alpha = 1.0 - (this.m_age - fadeIn) / (
      this.m_timeDie - fadeIn);
      startScale = maxStartScale;
      this.m_y += this.m_yVector * timeElapsed;
    }
    // the x direction is influenced by wind velocity
    this.m_x += (this.m_xVector + windVelocity) * timeElapsed;
    this.m_alpha *= this.m_emitter.m_alpha;
    this.m_scale = 0.001 + startScale + this.m_age / 4000.0;
  };

  this.render = function (ctx) {
    if (!this.isAlive())
    return;
    ctx.globalAlpha = this.m_alpha;
    var height = this.m_emitter.m_image.height * this.m_scale;
    var width = this.m_emitter.m_image.width * this.m_scale;
    // round it to a integer to prevent subpixel positioning
    var x = Math.round(this.m_x - width / 2);
    var y = Math.round(this.m_y + height / 2);
    ctx.drawImage(this.m_emitter.m_image, x, y, width, height);
    if (x < dirtyLeft) {
      dirtyLeft = x;
    }
    if (x + width > dirtyRight) {
      dirtyRight = x + width;
    }
    if (y < dirtyTop) {
      dirtyTop = y;
    }
    if (y + height > dirtyBottom) {
      dirtyBottom = y + height;
    }
  };
};

function render() {
  // time in milliseconds
  var timeElapsed = new Date().getTime() - lastRender;
  lastRender = new Date().getTime();
  context.clearRect(dirtyLeft, dirtyTop, dirtyRight - dirtyLeft, dirtyBottom - dirtyTop);
  dirtyLeft = 1000;
  dirtyTop = 1000;
  dirtyRight = 0;
  dirtyBottom = 0;

  smoke_1.update(timeElapsed);
  smoke_1.render(context);

  smoke_2.update(timeElapsed);
  smoke_2.render(context);

  smoke_3.update(timeElapsed);
  smoke_3.render(context);

  windVelocity += (Math.random() - 0.5) * 0.002;
  if (windVelocity > 0.015) {
    windVelocity = 0.015;
  }
  if (windVelocity < 0.0) {
    windVelocity = 0.0;
  }

  requestAnimFrame(render);
}
    </script>
</body>
</html>

5. By Max

Made by Max. Who want to be a millionaire Logo. Source

javascript logo by max
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
* {
  margin: 0;
  padding: 0;
  border: 0;
}

html, body {
  height: 100%;
}

body {
  background: #425ca9;
  font-family: Arial;
}

.wrapper {
  width: 100%;
  height: 100%;
}

.logo {
  width: 500px;
  height: 500px;
  background: linear-gradient(-45deg, #000 10%, #425ca9 90%);
  border-radius: 50%;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 10px solid #c9def3;
  text-shadow: 5px 5px 0px #000;
}
.logo .elipse {
  width: 40px;
  height: 420px;
  position: absolute;
  border: 2px solid #9db7d2;
  border-radius: 50% 100%;
  z-index: 5;
  left: 230px;
  top: 40px;
}
.logo .elipse1 {
  transform: rotate(20deg);
}
.logo .elipse2 {
  transform: rotate(40deg);
}
.logo .elipse3 {
  transform: rotate(60deg);
}
.logo .elipse4 {
  transform: rotate(80deg);
}
.logo .elipse5 {
  transform: rotate(100deg);
}
.logo .elipse6 {
  transform: rotate(120deg);
}
.logo .elipse7 {
  transform: rotate(140deg);
}
.logo .elipse8 {
  transform: rotate(160deg);
}
.logo .elipse9 {
  transform: rotate(180deg);
}
.logo .curved-top {
  transform: rotate(-87deg);
  font-size: 25px;
  position: absolute;
  top: 260px;
  left: 0;
  font-weight: bold;
  color: #fff;
}
.logo .curved-top span {
  height: 250px;
  position: absolute;
  width: 25px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
}
.logo .curved-top .char1 {
  transform: rotate(10deg);
}
.logo .curved-top .char2 {
  transform: rotate(20deg);
}
.logo .curved-top .char3 {
  transform: rotate(30deg);
}
.logo .curved-top .char4 {
  transform: rotate(40deg);
}
.logo .curved-top .char5 {
  transform: rotate(50deg);
}
.logo .curved-top .char6 {
  transform: rotate(60deg);
}
.logo .curved-top .char7 {
  transform: rotate(70deg);
}
.logo .curved-top .char8 {
  transform: rotate(80deg);
}
.logo .curved-top .char9 {
  transform: rotate(90deg);
}
.logo .curved-top .char10 {
  transform: rotate(100deg);
}
.logo .curved-top .char11 {
  transform: rotate(110deg);
}
.logo .curved-top .char12 {
  transform: rotate(120deg);
}
.logo .curved-top .char13 {
  transform: rotate(130deg);
}
.logo .curved-top .char14 {
  transform: rotate(140deg);
}
.logo .curved-top .char15 {
  transform: rotate(150deg);
}
.logo .curved-top .char16 {
  transform: rotate(160deg);
}
.logo .curved-top .char17 {
  transform: rotate(170deg);
}
.logo .curved-top .char18 {
  transform: rotate(180deg);
}
.logo .curved-top .char19 {
  transform: rotate(190deg);
}
.logo .curved-top .char20 {
  transform: rotate(200deg);
}
.logo .curved-top .char21 {
  transform: rotate(210deg);
}
.logo .curved-top .char22 {
  transform: rotate(220deg);
}
.logo .curved-top .char23 {
  transform: rotate(230deg);
}
.logo .curved-top .char24 {
  transform: rotate(240deg);
}
.logo .curved-top .char25 {
  transform: rotate(250deg);
}
.logo .curved-top .char26 {
  transform: rotate(260deg);
}
.logo .curved-top .char27 {
  transform: rotate(270deg);
}
.logo .curved-top .char28 {
  transform: rotate(280deg);
}
.logo .curved-top .char29 {
  transform: rotate(290deg);
}
.logo .curved-top .char30 {
  transform: rotate(300deg);
}
.logo .curved-top .char31 {
  transform: rotate(310deg);
}
.logo .curved-top .char32 {
  transform: rotate(320deg);
}
.logo .curved-top .char33 {
  transform: rotate(330deg);
}
.logo .curved-top .char34 {
  transform: rotate(340deg);
}
.logo .curved-top .char35 {
  transform: rotate(350deg);
}
.logo .curved-top .char36 {
  transform: rotate(360deg);
}
.logo .curved-top .char37 {
  transform: rotate(370deg);
}
.logo .curved-top .char38 {
  transform: rotate(380deg);
}
.logo .curved-top .char39 {
  transform: rotate(390deg);
}
.logo .curved-top .char40 {
  transform: rotate(400deg);
}
.logo .curved-top .char41 {
  transform: rotate(410deg);
}
.logo .curved-top .char42 {
  transform: rotate(420deg);
}
.logo .curved-top .char43 {
  transform: rotate(430deg);
}
.logo .curved-top .char44 {
  transform: rotate(440deg);
}
.logo .curved-top .char45 {
  transform: rotate(450deg);
}
.logo .curved-top .char46 {
  transform: rotate(460deg);
}
.logo .curved-top .char47 {
  transform: rotate(470deg);
}
.logo .curved-top .char48 {
  transform: rotate(480deg);
}
.logo .curved-top .char49 {
  transform: rotate(490deg);
}
.logo .curved-top .char50 {
  transform: rotate(500deg);
}
.logo .curved-top .char51 {
  transform: rotate(510deg);
}
.logo .curved-top .char52 {
  transform: rotate(520deg);
}
.logo .curved-top .char53 {
  transform: rotate(530deg);
}
.logo .curved-top .char54 {
  transform: rotate(540deg);
}
.logo .curved-top .char55 {
  transform: rotate(550deg);
}
.logo .curved-top .char56 {
  transform: rotate(560deg);
}
.logo .curved-top .char57 {
  transform: rotate(570deg);
}
.logo .curved-top .char58 {
  transform: rotate(580deg);
}
.logo .curved-top .char59 {
  transform: rotate(590deg);
}
.logo .curved-top .char60 {
  transform: rotate(600deg);
}
.logo .curved-top .char61 {
  transform: rotate(610deg);
}
.logo .curved-top .char62 {
  transform: rotate(620deg);
}
.logo .curved-top .char63 {
  transform: rotate(630deg);
}
.logo .curved-top .char64 {
  transform: rotate(640deg);
}
.logo .curved-top .char65 {
  transform: rotate(650deg);
}
.logo .curved-top .char66 {
  transform: rotate(660deg);
}
.logo .curved-top .char67 {
  transform: rotate(670deg);
}
.logo .curved-top .char68 {
  transform: rotate(680deg);
}
.logo .curved-top .char69 {
  transform: rotate(690deg);
}
.logo .curved-top .char70 {
  transform: rotate(700deg);
}
.logo .curved-top .char71 {
  transform: rotate(710deg);
}
.logo .curved-top .char72 {
  transform: rotate(720deg);
}
.logo .curved-top .char73 {
  transform: rotate(730deg);
}
.logo .curved-top .char74 {
  transform: rotate(740deg);
}
.logo .curved-top .char75 {
  transform: rotate(750deg);
}
.logo .curved-top .char76 {
  transform: rotate(760deg);
}
.logo .curved-top .char77 {
  transform: rotate(770deg);
}
.logo .curved-top .char78 {
  transform: rotate(780deg);
}
.logo .curved-top .char79 {
  transform: rotate(790deg);
}
.logo .curved-top .char80 {
  transform: rotate(800deg);
}
.logo .curved-top .char81 {
  transform: rotate(810deg);
}
.logo .curved-top .char82 {
  transform: rotate(820deg);
}
.logo .curved-top .char83 {
  transform: rotate(830deg);
}
.logo .curved-top .char84 {
  transform: rotate(840deg);
}
.logo .curved-top .char85 {
  transform: rotate(850deg);
}
.logo .curved-top .char86 {
  transform: rotate(860deg);
}
.logo .curved-top .char87 {
  transform: rotate(870deg);
}
.logo .curved-top .char88 {
  transform: rotate(880deg);
}
.logo .curved-top .char89 {
  transform: rotate(890deg);
}
.logo .curved-top .char90 {
  transform: rotate(900deg);
}
.logo .curved-top .char91 {
  transform: rotate(910deg);
}
.logo .curved-top .char92 {
  transform: rotate(920deg);
}
.logo .curved-top .char93 {
  transform: rotate(930deg);
}
.logo .curved-top .char94 {
  transform: rotate(940deg);
}
.logo .curved-top .char95 {
  transform: rotate(950deg);
}
.logo .curved-top .char96 {
  transform: rotate(960deg);
}
.logo .curved-top .char97 {
  transform: rotate(970deg);
}
.logo .curved-top .char98 {
  transform: rotate(980deg);
}
.logo .curved-top .char99 {
  transform: rotate(990deg);
}
.logo .curved-top .char100 {
  transform: rotate(1000deg);
}
.logo .inner-circle {
  width: 380px;
  height: 380px;
  position: absolute;
  background: #001621;
  border: 10px solid #d2e4fa;
  border-radius: 50%;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.logo .title {
  font-size: 60px;
  width: 500px;
  z-index: 10;
  position: absolute;
  font-weight: bold;
  color: #fff;
  text-align: center;
  top: 215px;
}
.logo .curved-bottom {
  transform: rotate(-85deg);
  font-size: 25px;
  position: absolute;
  bottom: 260px;
  left: 0;
  font-weight: bold;
  color: #fff;
}
.logo .curved-bottom span {
  height: 250px;
  position: absolute;
  width: 25px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
}
.logo .curved-bottom .char1 {
  transform: rotate(-10deg);
}
.logo .curved-bottom .char2 {
  transform: rotate(-20deg);
}
.logo .curved-bottom .char3 {
  transform: rotate(-30deg);
}
.logo .curved-bottom .char4 {
  transform: rotate(-40deg);
}
.logo .curved-bottom .char5 {
  transform: rotate(-50deg);
}
.logo .curved-bottom .char6 {
  transform: rotate(-60deg);
}
.logo .curved-bottom .char7 {
  transform: rotate(-70deg);
}
.logo .curved-bottom .char8 {
  transform: rotate(-80deg);
}
.logo .curved-bottom .char9 {
  transform: rotate(-90deg);
}
.logo .curved-bottom .char10 {
  transform: rotate(-100deg);
}
.logo .curved-bottom .char11 {
  transform: rotate(-110deg);
}
.logo .curved-bottom .char12 {
  transform: rotate(-120deg);
}
.logo .curved-bottom .char13 {
  transform: rotate(-130deg);
}
.logo .curved-bottom .char14 {
  transform: rotate(-140deg);
}
.logo .curved-bottom .char15 {
  transform: rotate(-150deg);
}
.logo .curved-bottom .char16 {
  transform: rotate(-160deg);
}
.logo .curved-bottom .char17 {
  transform: rotate(-170deg);
}
.logo .curved-bottom .char18 {
  transform: rotate(-180deg);
}
.logo .curved-bottom .char19 {
  transform: rotate(-190deg);
}
.logo .curved-bottom .char20 {
  transform: rotate(-200deg);
}
.logo .curved-bottom .char21 {
  transform: rotate(-210deg);
}
.logo .curved-bottom .char22 {
  transform: rotate(-220deg);
}
.logo .curved-bottom .char23 {
  transform: rotate(-230deg);
}
.logo .curved-bottom .char24 {
  transform: rotate(-240deg);
}
.logo .curved-bottom .char25 {
  transform: rotate(-250deg);
}
.logo .curved-bottom .char26 {
  transform: rotate(-260deg);
}
.logo .curved-bottom .char27 {
  transform: rotate(-270deg);
}
.logo .curved-bottom .char28 {
  transform: rotate(-280deg);
}
.logo .curved-bottom .char29 {
  transform: rotate(-290deg);
}
.logo .curved-bottom .char30 {
  transform: rotate(-300deg);
}
.logo .curved-bottom .char31 {
  transform: rotate(-310deg);
}
.logo .curved-bottom .char32 {
  transform: rotate(-320deg);
}
.logo .curved-bottom .char33 {
  transform: rotate(-330deg);
}
.logo .curved-bottom .char34 {
  transform: rotate(-340deg);
}
.logo .curved-bottom .char35 {
  transform: rotate(-350deg);
}
.logo .curved-bottom .char36 {
  transform: rotate(-360deg);
}
.logo .curved-bottom .char37 {
  transform: rotate(-370deg);
}
.logo .curved-bottom .char38 {
  transform: rotate(-380deg);
}
.logo .curved-bottom .char39 {
  transform: rotate(-390deg);
}
.logo .curved-bottom .char40 {
  transform: rotate(-400deg);
}
.logo .curved-bottom .char41 {
  transform: rotate(-410deg);
}
.logo .curved-bottom .char42 {
  transform: rotate(-420deg);
}
.logo .curved-bottom .char43 {
  transform: rotate(-430deg);
}
.logo .curved-bottom .char44 {
  transform: rotate(-440deg);
}
.logo .curved-bottom .char45 {
  transform: rotate(-450deg);
}
.logo .curved-bottom .char46 {
  transform: rotate(-460deg);
}
.logo .curved-bottom .char47 {
  transform: rotate(-470deg);
}
.logo .curved-bottom .char48 {
  transform: rotate(-480deg);
}
.logo .curved-bottom .char49 {
  transform: rotate(-490deg);
}
.logo .curved-bottom .char50 {
  transform: rotate(-500deg);
}
.logo .curved-bottom .char51 {
  transform: rotate(-510deg);
}
.logo .curved-bottom .char52 {
  transform: rotate(-520deg);
}
.logo .curved-bottom .char53 {
  transform: rotate(-530deg);
}
.logo .curved-bottom .char54 {
  transform: rotate(-540deg);
}
.logo .curved-bottom .char55 {
  transform: rotate(-550deg);
}
.logo .curved-bottom .char56 {
  transform: rotate(-560deg);
}
.logo .curved-bottom .char57 {
  transform: rotate(-570deg);
}
.logo .curved-bottom .char58 {
  transform: rotate(-580deg);
}
.logo .curved-bottom .char59 {
  transform: rotate(-590deg);
}
.logo .curved-bottom .char60 {
  transform: rotate(-600deg);
}
.logo .curved-bottom .char61 {
  transform: rotate(-610deg);
}
.logo .curved-bottom .char62 {
  transform: rotate(-620deg);
}
.logo .curved-bottom .char63 {
  transform: rotate(-630deg);
}
.logo .curved-bottom .char64 {
  transform: rotate(-640deg);
}
.logo .curved-bottom .char65 {
  transform: rotate(-650deg);
}
.logo .curved-bottom .char66 {
  transform: rotate(-660deg);
}
.logo .curved-bottom .char67 {
  transform: rotate(-670deg);
}
.logo .curved-bottom .char68 {
  transform: rotate(-680deg);
}
.logo .curved-bottom .char69 {
  transform: rotate(-690deg);
}
.logo .curved-bottom .char70 {
  transform: rotate(-700deg);
}
.logo .curved-bottom .char71 {
  transform: rotate(-710deg);
}
.logo .curved-bottom .char72 {
  transform: rotate(-720deg);
}
.logo .curved-bottom .char73 {
  transform: rotate(-730deg);
}
.logo .curved-bottom .char74 {
  transform: rotate(-740deg);
}
.logo .curved-bottom .char75 {
  transform: rotate(-750deg);
}
.logo .curved-bottom .char76 {
  transform: rotate(-760deg);
}
.logo .curved-bottom .char77 {
  transform: rotate(-770deg);
}
.logo .curved-bottom .char78 {
  transform: rotate(-780deg);
}
.logo .curved-bottom .char79 {
  transform: rotate(-790deg);
}
.logo .curved-bottom .char80 {
  transform: rotate(-800deg);
}
.logo .curved-bottom .char81 {
  transform: rotate(-810deg);
}
.logo .curved-bottom .char82 {
  transform: rotate(-820deg);
}
.logo .curved-bottom .char83 {
  transform: rotate(-830deg);
}
.logo .curved-bottom .char84 {
  transform: rotate(-840deg);
}
.logo .curved-bottom .char85 {
  transform: rotate(-850deg);
}
.logo .curved-bottom .char86 {
  transform: rotate(-860deg);
}
.logo .curved-bottom .char87 {
  transform: rotate(-870deg);
}
.logo .curved-bottom .char88 {
  transform: rotate(-880deg);
}
.logo .curved-bottom .char89 {
  transform: rotate(-890deg);
}
.logo .curved-bottom .char90 {
  transform: rotate(-900deg);
}
.logo .curved-bottom .char91 {
  transform: rotate(-910deg);
}
.logo .curved-bottom .char92 {
  transform: rotate(-920deg);
}
.logo .curved-bottom .char93 {
  transform: rotate(-930deg);
}
.logo .curved-bottom .char94 {
  transform: rotate(-940deg);
}
.logo .curved-bottom .char95 {
  transform: rotate(-950deg);
}
.logo .curved-bottom .char96 {
  transform: rotate(-960deg);
}
.logo .curved-bottom .char97 {
  transform: rotate(-970deg);
}
.logo .curved-bottom .char98 {
  transform: rotate(-980deg);
}
.logo .curved-bottom .char99 {
  transform: rotate(-990deg);
}
.logo .curved-bottom .char100 {
  transform: rotate(-1000deg);
}
</style>
</head>
<body>
  <div class="wrapper">
  <section class="stage-0">
    <div class="logo">
      <div class="elipse elipse1"></div>
      <div class="elipse elipse2"></div>
      <div class="elipse elipse3"></div>
      <div class="elipse elipse4"></div>
      <div class="elipse elipse5"></div>
      <div class="elipse elipse6"></div>
      <div class="elipse elipse7"></div>
      <div class="elipse elipse8"></div>
      <div class="elipse elipse9"></div>
      <div class="curved-top">WHO WANTS TO BE A</div>
      <div class="title">MILLIONAIRE</div>
      <div class="curved-bottom">WHO WANTS TO BE A</div>
      <div class="inner-circle"></div>
    </div>
  </section>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(document).ready(function () {
  $('.curved-top, .curved-bottom').lettering();
});

(function ($) {
  function injector(t, splitter, klass, after) {
    var a = t.text().split(splitter),inject = '';
    if (a.length) {
      $(a).each(function (i, item) {
        inject += '<span class="' + klass + (i + 1) + '">' + item + '</span>' + after;
      });
      t.empty().append(inject);
    }
  }

  var methods = {
    init: function () {

      return this.each(function () {
        injector($(this), '', 'char', '');
      });

    },

    words: function () {

      return this.each(function () {
        injector($(this), ' ', 'word', ' ');
      });

    },

    lines: function () {

      return this.each(function () {
        var r = "eefec303079ad17405c889e092e105b0";
        injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
      });

    } };


  $.fn.lettering = function (method) {
    // Method calling logic
    if (method && methods[method]) {
      return methods[method].apply(this, [].slice.call(arguments, 1));
    } else if (method === 'letters' || !method) {
      return methods.init.apply(this, [].slice.call(arguments, 0)); // always pass an array
    }
    $.error('Method ' + method + ' does not exist on jQuery.lettering');
    return this;
  };

})(jQuery);
    </script>
</body>
</html>

6. By Joรฃo Santos

Another Resizable Logo by Joรฃo Santos. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300"'> 
<style>
html {
  font-size: 10px;
}

body {
  font-size: 2em;
  background: #f7f7f7;
}

.backbonejs {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6em;
  height: 3em;
  border: solid #002A41 2em;
  border-left-width: 1.5em;
  border-right-width: 1.5em;
  transform: translate3d(-50%, -50%, 0) skewY(30deg);
  transform-style: preserve-3d;
}
.backbonejs:before {
  content: "";
  position: absolute;
  left: -1.5em;
  top: 0.7em;
  width: 3em;
  height: 3em;
  border: solid #0071B5 2em;
  border-left-width: 1.5em;
  border-right: none;
  transform: skewY(-50deg) translate3d(0, 0, 0);
}
.backbonejs:after {
  content: "";
  position: absolute;
  left: 3em;
  top: -4.65em;
  width: 3em;
  height: 3em;
  border: solid #0071B5 2em;
  border-right-width: 1.5em;
  border-left: none;
  transform: skewY(-50deg) translate3d(0, 0, -1px);
}

h1 {
  text-align: center;
  font-size: 16px;
  font-family: "Lato", sans-serif;
  color: gray;
}

input[type=range] {
  position: absolute;
  width: 100px;
  height: 20px;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: auto;
}

input[type=range]:focus {
  outline: none;
}
</style>
</head>
<body>
  <div class="backbonejs"></div>

<h1>BACKBONEJS</h1>
<input type="range" min="1" max="3"/>
      <script>
let range = document.querySelector('input');
range.addEventListener('input', function () {
  document.body.style.fontSize = range.value + 'em';
});
//prevent mobile keyboard
range.addEventListener('touchstart', () => {
  range.removeAttribute('readonly');
});
range.addEventListener('touchend', () => {
  range.setAttribute('readonly', 'readonly');
});
    </script>
</body>
</html>