Skip to content

Instantly share code, notes, and snippets.

@Alafazam
Forked from anonymous/Bubbly....markdown
Last active February 20, 2016 07:53
Show Gist options
  • Save Alafazam/6d3a994a521455a55a74 to your computer and use it in GitHub Desktop.
Save Alafazam/6d3a994a521455a55a74 to your computer and use it in GitHub Desktop.
Bubbly...
<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>
/*
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);
}
@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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment