Bubbly...

Bubbly....markdown

Bubbly...

Hover the text...

Forked from Tiffany Rayside's Pen Bubbly....

A Pen by Captain Anonymous on CodePen.

License.

index.html

<svg class="overlay text" viewBox="0 0 900 300">
		<symbol id="main">
			<text text-anchor="middle" x="50%" y="50%" dy="0.25em" class="txt">BUBBLY</text>
		</symbol>
		<mask id="msk" maskunits="userSpaceOnUse" maskcontentunits="userSpaceOnUse">
			<rect width="100%" height="100%" class="wrap">
			</rect>
			<use xlink:href="#main" class="mtxt"></use>
		</mask>
	</svg>
			<section>
<h4>&#8681;&nbsp;Hover&nbsp;&#8681;</h4>
				<h1 href="#">
					<div class="fill">
<canvas id="canv" style=background: hsla(350, 95%, 5%, 1);>
</canvas>
					</div>
					<svg viewBox="0 0 100% 100%" class="inv">
						<rect width="100%" height="100%" mask="url(#msk)" 
      class="rect" />
						<use xlink:href="#main" class="clear"></use>
					</svg>
				</h1>
			</section>

script.js

/*
This is my Cherry Fizz pen:
http://codepen.io/tmrDevelops/pen/mJELXj 
*/
var c = document.getElementById('canv');
var $ = c.getContext('2d');
var w = c.width = 900;
var h = c.height = 300;

var num = 425,
    rad = 20;
var s = [20, 15, 10, 5, 3];

function _S() {
  var curr = s.length;
  var cur_ = Math.floor(Math.random() * curr);
  return s[cur_];
}

function FizzBuzz(c) {
  this.c = c;
  this.$ = c.getContext('2d');
  this.b = {};
  this.go();
}

FizzBuzz.prototype.go = function() {
  this.x = this.b.x = Math.random() * (this.c.width - rad);
  this.y = this.b.y = Math.random() * (this.c.width - rad);
  this.radi = _S();
  this.xPos = Math.random() * 9;

  this.draw();
};

FizzBuzz.prototype.draw = function() {
  this.$.globalCompositeOperation = 'source-over';
  this.$.fillStyle = "hsla(350, 90%, 40%, 1)";
  this.$.globalCompositeOperation = 'lighter';
  this.$.save();
  this.$.beginPath();
  this.$.arc(this.x, this.y, this.radi, 0, Math.PI * 2, false);
  this.$.fill();
  this.$.restore();
};

FizzBuzz.prototype.disp = function() {
  this.x = (Math.sin(this.xPos -= 0.35) * this.radi * 0.16 + 6) + this.b.x;
  this.y -= this.radi * 0.33;
  if (this.y <= -100) {
    this.y = this.c.height + rad;
  }
  this.draw();
};

function Fizz(c) {
  this.c = c;
  this.$ = c.getContext('2d');
  this.arr = [];
}

Fizz.prototype.add = function(buzz) {
  this.arr.push(buzz);
};

Fizz.prototype.upd = function() {
  this.$.clearRect(0, 0, this.c.width, this.c.height);

  for (var i in this.arr) {
    this.arr[i].disp();
  }
};

window.addEventListener('resize', function() {
  c.width = w = 900;
  c.height = h = 300;
});

  var fb = new Fizz(c);
  for (var i = 0, u = num; i < u; i++) {
    var buzz = new FizzBuzz(c);
    fb.add(buzz);
  }
  _t();

function _t() {
  fb.upd();
  window.requestAnimationFrame(_t);
}

style.css

@import url(https://fonts.googleapis.com/css?family=Fascinate);

* { box-sizing: border-box; }

html, body {
	background: hsla(350, 95%, 5%, 1);
  width:100%; 
  min-height:100%;
	font-weight: bold;
	font-size: 1em;
  display:flex;
  justify-content:center;
  flex-direction:column;
	font-family: 'Fascinate', cursive;
  user-select:none;
}
.text .wrap {
	fill: #FFF;
}

.overlay {
	height: 0;
	width: 0;
	overflow: hidden;
	position: absolute;
  & .txt {
    font-size: 16rem;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing:-2.5rem;
  }
}
section{
  align-self:center;
  & h4{
    text-align:center;
    color:hsla(350, 95%, 50%, 1);
    font-size:1.5rem;
  }
}
h1{
	position: relative;
	font-size: 8em;
  font-weight:bold;
	line-height: 1;
	display: inline-block;
  width: 900px;
	height: 300px;
  transition:all .2s ease;
  text-shadow: 0 -3px 0 hsla(350, 95%, 50%, 1),
    0 6px 8px  hsla(350, 95%, 5%, .55),
    0 9px 10px  hsla(350, 95%, 5%, .25),
    0 30px 10px  hsla(350, 95%, 5%, .15),
    0 15px 10px  hsla(350, 95%, 5%, .31);
  &:hover {
	color: #fff;
  }
  & .fill {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  & .inv {
    position: absolute;
    width: 900px;
    height: 300px;
    top: 0;
    left: 0;
  }
  & .rect {
    fill:hsla(350, 95%, 5%, 1);
  }
  & .clear {
    stroke-width:1;
    fill:hsla(350, 95%, 15%, .95);
    transition: fill 0.3s ease;
    &:hover{
      fill: transparent;
      text-shadow: 0 -3px 0 hsla(350, 95%, 50%, .95),
      0 6px 8px  hsla(350, 95%, 0%, .55),
      0 9px 10px  hsla(350, 95%, 0%, .25),
      0 30px 10px  hsla(350, 95%, 5%, .15),
      0 15px 10px  hsla(350, 95%, 5%, .31);
      stroke:hsla(350, 95%,12%, .95);
      stroke-width:3;
    }
  }
}
@media (max-width:800px){
  .overlay{
     & .txt {
    font-size: 14rem;
    letter-spacing:-2rem;
    }
  }
}
@media (max-width:620px){
  .overlay{
     & .txt {
    font-size: 12rem;
    letter-spacing:-1.5rem;
    }
  }
}
@media (max-width:500px){
  .overlay{
     & .txt {
    font-size: 10rem;
    letter-spacing:-1rem;
    }
  }
}