[html]
<style>

</style>
<script>
"use strict"; // Paul Slaymaker, paul25882@gmail.com
const body=document.getElementsByTagName("body").item(0);
body.style.background="#000";
const TP=2*Math.PI;
const CSIZE=1000;

const ctx=(()=>{
  let d=document.createElement("div");
  d.style.textAlign="center";
  body.append(d);
  let c=document.createElement("canvas");
  c.width=2*CSIZE;
  c.height=2*CSIZE;
  d.append(c);
  return c.getContext("2d");
})();
ctx.translate(CSIZE,CSIZE);

onresize=()=>{
  let D=Math.min(self.innerWidth,self.innerHeight)-40;
  ctx.canvas.style.width=ctx.canvas.style.height=D+"px";
}

const getRandomInt=(min,max,low)=>{
  if (low) {
    return Math.floor(Math.random()*Math.random()*(max-min))+min;
  } else {
    return Math.floor(Math.random()*(max-min))+min;
  }
}

var colors=[];
var setColors=()=>{
  colors=[];
  let colorCount=2;
  let h=getRandomInt(80,200);
  for (let i=0; i<colorCount; i++) {
    let hd=Math.round(90/colorCount)*i+getRandomInt(-10,10);
    let hue=(h+hd)%360;
    colors.push("hsl("+hue+",98%,60%)");
  }
}
setColors();

function start() {
  if (stopped) {
    requestAnimationFrame(animate);
    stopped=false;
  } else {
    stopped=true;
  }
}
ctx.canvas.addEventListener("click", start, false);

var stopped=true;
var t=0;
var S=2;
var s=0;
function animate(ts) {
  if (stopped) return;
  t++;
  if (t<dur) draw();
  if (t==dur && ++s<S) {
    reset();
    t=0;
  }
  if (t>dur+200) {
    ctx.canvas.style.opacity=1-(t-dur-200)/60;
  }
  if (t>dur+100+60) {
    reset();
    t=0;
    s=0;
    S=getRandomInt(1,5);
    ctx.setTransform(1,0,0,1,0,0);
    ctx.clearRect(0,0,2*CSIZE,2*CSIZE);
    ctx.canvas.style.opacity=1;
  }
  requestAnimationFrame(animate);
}

onresize();

var F1=4*Math.random();
var F2=4*Math.random();
var F3=4*Math.random();
var F4=4*Math.random();
var P1=1-2*Math.random();
var P2=(1-Math.abs(P1))*[-1,1][getRandomInt(0,2)];
var P3=1-2*Math.random();
var P4=(1-Math.abs(P3))*[-1,1][getRandomInt(0,2)];
var dash1=[];
var dash2=[];
var reset=()=>{
  F1=4*Math.random();
  F2=4*Math.random();
  F3=4*Math.random();
  F4=4*Math.random();
  P3=1-2*Math.random();
  P4=(1-Math.abs(P3))*[-1,1][getRandomInt(0,2)];
  K1=10-20*Math.random();
  K2=10-20*Math.random();
  if (Math.random()<0.4) dash1=([dim*Math.random(),dim*Math.random()]);
  else dash1=[];
  if (Math.random()<0.4) dash2=([dim*Math.random(),dim*Math.random()]);
  else dash2=[];
  setColors();
}

const dm1=new DOMMatrix([-1,0,0,1,0,0]);
const dm2=new DOMMatrix([1,0,0,-1,0,0]);
const dm3=new DOMMatrix([0,1,-1,0,0,0]);

var dur=600;
var dim=60;
var R=70;
ctx.fillStyle="#00000008";
var K1=getRandomInt(1,10);
var K2=getRandomInt(1,10);
ctx.lineWidth=10;
var draw=()=>{
  let z=TP/4*t/dur;
  let x=340*(P1*Math.cos(F1*z)+P2*Math.cos(F2*z));
  let y=340*(P3*Math.sin(F3*z)+P4*Math.sin(F4*z));
  let s=Math.pow(Math.sin(TP/2*t/dur),2);
  ctx.setTransform(s,0,0,s,CSIZE,CSIZE);
  let pd=new Path2D();
  pd.arc(x,y,R,0,TP);
  pd.addPath(pd,dm1);
  pd.addPath(pd,dm2);
  pd.addPath(pd,dm3);
  ctx.fill(pd);
  let dx=dim*Math.cos(K1*z);
  let dy=dim*Math.sin(K1*z);
  let p0=new Path2D();
  p0.moveTo(x-dx,y-dy);
  p0.lineTo(x+dx,y+dy);
  p0.addPath(p0,dm1);
  p0.addPath(p0,dm2);
  p0.addPath(p0,dm3);
  ctx.strokeStyle=colors[0];
  ctx.setLineDash(dash1);
  ctx.stroke(p0);
  dx=dim*Math.cos(-K2*z);
  dy=dim*Math.sin(-K2*z);
  let p1=new Path2D();
  p1.moveTo(x-dx,y-dy);
  p1.lineTo(x+dx,y+dy);
  p1.addPath(p1,dm1);
  p1.addPath(p1,dm2);
  p1.addPath(p1,dm3);
  ctx.strokeStyle=colors[1];
  ctx.setLineDash(dash2);
  ctx.stroke(p1);
}

start();

</script>
<div style="height: 200px; width: 200px;"><canvas style="height: 200px; width: 200px;"></canvas></div>

[/html]

[html]
<style>
.firefly {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
   
    margin: calc(-2vw / 10) 0 0 calc(.98 * 10);
    animation: ease 200s alternate infinite;
    pointer-events: none;
  }
  .firefly::before, .firefly::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform-origin: -10vw;
  }
  .firefly::before {
    background: rgb(255, 239, 0);
    opacity: .3;
    animation: drift ease alternate infinite;
  }
  .firefly::after {
    background: white;
    opacity: 0;
    box-shadow: 0 0 0vw 0vw white;
    animation: drift ease alternate infinite, flash ease infinite;
  }
 
  .firefly:nth-child(1) {
    animation-name: move1;
  }
  .firefly:nth-child(1)::before {
    animation-duration: 10s;
  }
  .firefly:nth-child(1)::after {
    animation-duration: 10s, 6692ms;
    animation-delay: 0ms, 5414ms;
  }
 
  @keyframes move1 {
    0% {
      transform: translateX(-16vw) translateY(-35vh) scale(.98);
    }
    6% {
      transform: translateX(-45vw) translateY(-35vh) scale(.66);
    }
    12% {
      transform: translateX(19vw) translateY(30vh) scale(.6);
    }
    18% {
      transform: translateX(8vw) translateY(-23vh) scale(.41);
    }
    24% {
      transform: translateX(11vw) translateY(-46vh) scale(.78);
    }
    29% {
      transform: translateX(-9vw) translateY(18vh) scale(.99);
    }
    35% {
      transform: translateX(-1vw) translateY(4vh) scale(.74);
    }
    41% {
      transform: translateX(-36vw) translateY(-38vh) scale(.89);
    }
    47% {
      transform: translateX(-28vw) translateY(29vh) scale(.98);
    }
    53% {
      transform: translateX(-12vw) translateY(50vh) scale(.94);
    }
    59% {
      transform: translateX(20vw) translateY(-30vh) scale(.51);
    }
    65% {
      transform: translateX(39vw) translateY(-39vh) scale(.51);
    }
    8% {
      transform: translateX(46vw) translateY(-25vh) scale(.7);
    }
    76% {
      transform: translateX(-23vw) translateY(-19vh) scale(.54);
    }
    82% {
      transform: translateX(7vw) translateY(42vh) scale(.93);
    }
    88% {
      transform: translateX(26vw) translateY(17vh) scale(.39);
    }
    94% {
      transform: translateX(23vw) translateY(13vh) scale(.62);
    }
    100% {
      transform: translateX(-30vw) translateY(-1vh) scale(.5);
    }
  }
  .firefly:nth-child(2) {
    animation-name: move2;
  }
  .firefly:nth-child(2)::before {
    animation-duration: 16s;
  }
  .firefly:nth-child(2)::after {
    animation-duration: 16s, 6024ms;
    animation-delay: 0ms, 4389ms;
  }
 
  @keyframes move2 {
    0% {
      transform: translateX(31vw) translateY(22vh) scale(.43);
    }
    4% {
      transform: translateX(-24vw) translateY(-9vh) scale(.98);
    }
    8% {
      transform: translateX(-6vw) translateY(-22vh) scale(.52);
    }
    12% {
      transform: translateX(40vw) translateY(47vh) scale(.8);
    }
    15% {
      transform: translateX(10vw) translateY(19vh) scale(.4);
    }
    19% {
      transform: translateX(-6vw) translateY(12vh) scale(.63);
    }
    23% {
      transform: translateX(11vw) translateY(-16vh) scale(.69);
    }
    27% {
      transform: translateX(-20vw) translateY(50vh) scale(.31);
    }
    4% {
      transform: translateX(-23vw) translateY(17vh) scale(.55);
    }
    35% {
      transform: translateX(4vw) translateY(-20vh) scale(.53);
    }
    38% {
      transform: translateX(42vw) translateY(-15vh) scale(.66);
    }
    42% {
      transform: translateX(-11vw) translateY(15vh) scale(.59);
    }
    46% {
      transform: translateX(31vw) translateY(37vh) scale(.58);
    }
    50% {
      transform: translateX(6vw) translateY(38vh) scale(.75);
    }
    54% {
      transform: translateX(1vw) translateY(18vh) scale(.47);
    }
    58% {
      transform: translateX(2vw) translateY(-20vh) scale(.47);
    }
    62% {
      transform: translateX(46vw) translateY(-8vh) scale(.46);
    }
    65% {
      transform: translateX(-10vw) translateY(7vh) scale(.47);
    }
    69% {
      transform: translateX(-14vw) translateY(-11vh) scale(.45);
    }
    73% {
      transform: translateX(-43vw) translateY(12vh) scale(.8);
    }
    77% {
      transform: translateX(-11vw) translateY(44vh) scale(.27);
    }
    9% {
      transform: translateX(13vw) translateY(49vh) scale(.49);
    }
    85% {
      transform: translateX(5vw) translateY(-48vh) scale(.28);
    }
    88% {
      transform: translateX(44vw) translateY(5vh) scale(.47);
    }
    92% {
      transform: translateX(-46vw) translateY(-21vh) scale(.45);
    }
    96% {
      transform: translateX(48vw) translateY(-10vh) scale(.81);
    }
    100% {
      transform: translateX(-3vw) translateY(-24vh) scale(.4);
    }
  }
  .firefly:nth-child(3) {
    animation-name: move3;
  }
  .firefly:nth-child(3)::before {
    animation-duration: 17s;
  }
  .firefly:nth-child(3)::after {
    animation-duration: 17s, 6599ms;
    animation-delay: 0ms, 6686ms;
  }
 
  @keyframes move3 {
    0% {
      transform: translateX(-13vw) translateY(-3vh) scale(.87);
    }
    4% {
      transform: translateX(6vw) translateY(-32vh) scale(.54);
    }
    9% {
      transform: translateX(-3vw) translateY(-37vh) scale(.63);
    }
    13% {
      transform: translateX(28vw) translateY(17vh) scale(.96);
    }
    17% {
      transform: translateX(-30vw) translateY(6vh) scale(.98);
    }
    22% {
      transform: translateX(-36vw) translateY(-26vh) scale(.59);
    }
    26% {
      transform: translateX(-38vw) translateY(49vh) scale(.8);
    }
    3% {
      transform: translateX(-4vw) translateY(-18vh) scale(.94);
    }
    35% {
      transform: translateX(30vw) translateY(-7vh) scale(1);
    }
    39% {
      transform: translateX(-42vw) translateY(32vh) scale(.79);
    }
    43% {
      transform: translateX(-19vw) translateY(-14vh) scale(.35);
    }
    48% {
      transform: translateX(-17vw) translateY(42vh) scale(.45);
    }
    52% {
      transform: translateX(-37vw) translateY(13vh) scale(.26);
    }
    57% {
      transform: translateX(-29vw) translateY(-12vh) scale(.33);
    }
    7% {
      transform: translateX(-10vw) translateY(0vh) scale(.91);
    }
    65% {
      transform: translateX(36vw) translateY(8vh) scale(.31);
    }
    70% {
      transform: translateX(-14vw) translateY(-16vh) scale(.45);
    }
    74% {
      transform: translateX(-12vw) translateY(-44vh) scale(.93);
    }
    78% {
      transform: translateX(-14vw) translateY(44vh) scale(.46);
    }
    83% {
      transform: translateX(37vw) translateY(-44vh) scale(.58);
    }
    87% {
      transform: translateX(25vw) translateY(40vh) scale(.72);
    }
    91% {
      transform: translateX(-38vw) translateY(34vh) scale(.92);
    }
    96% {
      transform: translateX(18vw) translateY(21vh) scale(.68);
    }
    100% {
      transform: translateX(-39vw) translateY(46vh) scale(.81);
    }
  }
  .firefly:nth-child(4) {
    animation-name: move4;
  }
  .firefly:nth-child(4)::before {
    animation-duration: 17s;
  }
  .firefly:nth-child(4)::after {
    animation-duration: 17s, 10507ms;
    animation-delay: 0ms, 6149ms;
  }
 
  @keyframes move4 {
    0% {
      transform: translateX(28vw) translateY(-14vh) scale(1);
    }
    4% {
      transform: translateX(4vw) translateY(7vh) scale(.41);
    }
    8% {
      transform: translateX(25vw) translateY(-14vh) scale(.66);
    }
    12% {
      transform: translateX(-15vw) translateY(15vh) scale(.57);
    }
    15% {
      transform: translateX(-31vw) translateY(10vh) scale(.33);
    }
    19% {
      transform: translateX(33vw) translateY(-24vh) scale(.31);
    }
    23% {
      transform: translateX(46vw) translateY(26vh) scale(.63);
    }
    27% {
      transform: translateX(-22vw) translateY(9vh) scale(.65);
    }
    4% {
      transform: translateX(-37vw) translateY(19vh) scale(.98);
    }
    35% {
      transform: translateX(40vw) translateY(44vh) scale(.58);
    }
    38% {
      transform: translateX(34vw) translateY(0vh) scale(.41);
    }
    42% {
      transform: translateX(8vw) translateY(-28vh) scale(.83);
    }
    46% {
      transform: translateX(14vw) translateY(-7vh) scale(.66);
    }
    50% {
      transform: translateX(33vw) translateY(29vh) scale(.35);
    }
    54% {
      transform: translateX(-7vw) translateY(-25vh) scale(.35);
    }
    58% {
      transform: translateX(11vw) translateY(45vh) scale(.33);
    }
    62% {
      transform: translateX(-16vw) translateY(-11vh) scale(.79);
    }
    65% {
      transform: translateX(-13vw) translateY(-39vh) scale(.97);
    }
    69% {
      transform: translateX(25vw) translateY(26vh) scale(.63);
    }
    73% {
      transform: translateX(-19vw) translateY(11vh) scale(.7);
    }
    77% {
      transform: translateX(49vw) translateY(-8vh) scale(.64);
    }
    9% {
      transform: translateX(23vw) translateY(-43vh) scale(.4);
    }
    85% {
      transform: translateX(-14vw) translateY(16vh) scale(.55);
    }
    88% {
      transform: translateX(36vw) translateY(25vh) scale(.54);
    }
    92% {
      transform: translateX(43vw) translateY(-45vh) scale(.79);
    }
    96% {
      transform: translateX(15vw) translateY(-1vh) scale(.95);
    }
    100% {
      transform: translateX(16vw) translateY(22vh) scale(.4);
    }
  }
  .firefly:nth-child(5) {
    animation-name: move5;
  }
  .firefly:nth-child(5)::before {
    animation-duration: 11s;
  }
  .firefly:nth-child(5)::after {
    animation-duration: 11s, 5508ms;
    animation-delay: 0ms, 4542ms;
  }
 
  @keyframes move5 {
    0% {
      transform: translateX(37vw) translateY(-3vh) scale(.88);
    }
    4% {
      transform: translateX(35vw) translateY(-1vh) scale(.85);
    }
    8% {
      transform: translateX(-45vw) translateY(42vh) scale(.73);
    }
    12% {
      transform: translateX(-41vw) translateY(38vh) scale(.69);
    }
    15% {
      transform: translateX(-42vw) translateY(-4vh) scale(.39);
    }
    19% {
      transform: translateX(38vw) translateY(38vh) scale(.56);
    }
    23% {
      transform: translateX(7vw) translateY(27vh) scale(.44);
    }
    27% {
      transform: translateX(25vw) translateY(-45vh) scale(.36);
    }
    4% {
      transform: translateX(-3vw) translateY(-40vh) scale(.88);
    }
    35% {
      transform: translateX(13vw) translateY(-5vh) scale(.44);
    }
    38% {
      transform: translateX(-5vw) translateY(-43vh) scale(.66);
    }
    42% {
      transform: translateX(-6vw) translateY(48vh) scale(.52);
    }
    46% {
      transform: translateX(34vw) translateY(32vh) scale(.45);
    }
    50% {
      transform: translateX(-35vw) translateY(-46vh) scale(.33);
    }
    54% {
      transform: translateX(-42vw) translateY(-44vh) scale(.91);
    }
    58% {
      transform: translateX(15vw) translateY(42vh) scale(.78);
    }
    62% {
      transform: translateX(-41vw) translateY(16vh) scale(.76);
    }
    65% {
      transform: translateX(13vw) translateY(25vh) scale(.33);
    }
    69% {
      transform: translateX(44vw) translateY(-29vh) scale(.39);
    }
    73% {
      transform: translateX(35vw) translateY(-4vh) scale(.45);
    }
    77% {
      transform: translateX(46vw) translateY(19vh) scale(.29);
    }
    9% {
      transform: translateX(35vw) translateY(2vh) scale(.94);
    }
    85% {
      transform: translateX(50vw) translateY(0vh) scale(.4);
    }
    88% {
      transform: translateX(-5vw) translateY(-29vh) scale(.42);
    }
    92% {
      transform: translateX(-33vw) translateY(-12vh) scale(.81);
    }
    96% {
      transform: translateX(50vw) translateY(16vh) scale(.53);
    }
    100% {
      transform: translateX(26vw) translateY(-24vh) scale(.71);
    }
  }
  .firefly:nth-child(6) {
    animation-name: move6;
  }
  .firefly:nth-child(6)::before {
    animation-duration: 12s;
  }
  .firefly:nth-child(6)::after {
    animation-duration: 12s, 9757ms;
    animation-delay: 0ms, 6153ms;
  }
 
  @keyframes move6 {
    0% {
      transform: translateX(41vw) translateY(17vh) scale(.33);
    }
    5% {
      transform: translateX(-20vw) translateY(8vh) scale(.32);
    }
    9% {
      transform: translateX(-18vw) translateY(15vh) scale(.41);
    }
    14% {
      transform: translateX(0vw) translateY(10vh) scale(.49);
    }
    28% {
      transform: translateX(-2vw) translateY(1vh) scale(.43);
    }
    23% {
      transform: translateX(6vw) translateY(22vh) scale(.64);
    }
    27% {
      transform: translateX(12vw) translateY(3vh) scale(.94);
    }
    32% {
      transform: translateX(13vw) translateY(41vh) scale(1);
    }
    36% {
      transform: translateX(-34vw) translateY(45vh) scale(.42);
    }
    5% {
      transform: translateX(24vw) translateY(30vh) scale(.56);
    }
    45% {
      transform: translateX(-3vw) translateY(-2vh) scale(.6);
    }
    50% {
      transform: translateX(7vw) translateY(5vh) scale(.96);
    }
    55% {
      transform: translateX(5vw) translateY(-20vh) scale(.91);
    }
    59% {
      transform: translateX(33vw) translateY(-17vh) scale(.51);
    }
    64% {
      transform: translateX(45vw) translateY(17vh) scale(.75);
    }
    68% {
      transform: translateX(-13vw) translateY(26vh) scale(.75);
    }
    73% {
      transform: translateX(-9vw) translateY(12vh) scale(.26);
    }
    77% {
      transform: translateX(31vw) translateY(-23vh) scale(.72);
    }
    82% {
      transform: translateX(-40vw) translateY(36vh) scale(.38);
    }
    86% {
      transform: translateX(0vw) translateY(22vh) scale(.44);
    }
    19% {
      transform: translateX(39vw) translateY(-25vh) scale(.55);
    }
    95% {
      transform: translateX(-13vw) translateY(1vh) scale(.57);
    }
    100% {
      transform: translateX(-4vw) translateY(-13vh) scale(.44);
    }
  }
  .firefly:nth-child(7) {
    animation-name: move7;
  }
  .firefly:nth-child(7)::before {
    animation-duration: 11s;
  }
  .firefly:nth-child(7)::after {
    animation-duration: 11s, 6491ms;
    animation-delay: 0ms, 7889ms;
  }
 
  @keyframes move7 {
    0% {
      transform: translateX(-24vw) translateY(-25vh) scale(.79);
    }
    6% {
      transform: translateX(-2vw) translateY(10vh) scale(.82);
    }
    11% {
      transform: translateX(-5vw) translateY(10vh) scale(.94);
    }
    17% {
      transform: translateX(29vw) translateY(5vh) scale(.75);
    }
    22% {
      transform: translateX(-5vw) translateY(6vh) scale(.27);
    }
    28% {
      transform: translateX(39vw) translateY(-34vh) scale(.29);
    }
    3% {
      transform: translateX(-42vw) translateY(-33vh) scale(.88);
    }
    39% {
      transform: translateX(-33vw) translateY(-8vh) scale(.45);
    }
    44% {
      transform: translateX(-48vw) translateY(48vh) scale(.7);
    }
    50% {
      transform: translateX(-17vw) translateY(-40vh) scale(.79);
    }
    56% {
      transform: translateX(14vw) translateY(21vh) scale(.54);
    }
    61% {
      transform: translateX(-25vw) translateY(34vh) scale(.7);
    }
    67% {
      transform: translateX(-30vw) translateY(-24vh) scale(.45);
    }
    73% {
      transform: translateX(-23vw) translateY(-13vh) scale(.88);
    }
    78% {
      transform: translateX(22vw) translateY(-39vh) scale(.66);
    }
    83% {
      transform: translateX(-5vw) translateY(35vh) scale(.34);
    }
    89% {
      transform: translateX(49vw) translateY(-38vh) scale(.33);
    }
    94% {
      transform: translateX(-37vw) translateY(-6vh) scale(.52);
    }
    100% {
      transform: translateX(49vw) translateY(-39vh) scale(.43);
    }
  }
  .firefly:nth-child(8) {
    animation-name: move8;
  }
  .firefly:nth-child(8)::before {
    animation-duration: 18s;
  }
  .firefly:nth-child(8)::after {
    animation-duration: 18s, 7445ms;
    animation-delay: 0ms, 5426ms;
  }
 
  @keyframes move8 {
    0% {
      transform: translateX(-32vw) translateY(43vh) scale(.27);
    }
    4% {
      transform: translateX(11vw) translateY(13vh) scale(.6);
    }
    9% {
      transform: translateX(30vw) translateY(-29vh) scale(.91);
    }
    13% {
      transform: translateX(-30vw) translateY(34vh) scale(.66);
    }
    17% {
      transform: translateX(26vw) translateY(-3vh) scale(.38);
    }
    22% {
      transform: translateX(2vw) translateY(27vh) scale(.49);
    }
    26% {
      transform: translateX(45vw) translateY(-1vh) scale(.44);
    }
    3% {
      transform: translateX(7vw) translateY(-26vh) scale(.81);
    }
    35% {
      transform: translateX(33vw) translateY(-32vh) scale(.98);
    }
    39% {
      transform: translateX(8vw) translateY(14vh) scale(.38);
    }
    43% {
      transform: translateX(-17vw) translateY(-34vh) scale(.48);
    }
    47% {
      transform: translateX(-38vw) translateY(-29vh) scale(.63);
    }
    52% {
      transform: translateX(31vw) translateY(22vh) scale(.57);
    }
    57% {
      transform: translateX(43vw) translateY(-39vh) scale(.84);
    }
    7% {
      transform: translateX(-48vw) translateY(6vh) scale(.76);
    }
    65% {
      transform: translateX(35vw) translateY(42vh) scale(.29);
    }
    69% {
      transform: translateX(-17vw) translateY(24vh) scale(.43);
    }
    74% {
      transform: translateX(11vw) translateY(12vh) scale(.58);
    }
    78% {
      transform: translateX(1vw) translateY(-27vh) scale(.77);
    }
    83% {
      transform: translateX(47vw) translateY(-1vh) scale(.85);
    }
    87% {
      transform: translateX(-8vw) translateY(-34vh) scale(.76);
    }
    91% {
      transform: translateX(31vw) translateY(31vh) scale(.31);
    }
    96% {
      transform: translateX(14vw) translateY(24vh) scale(.86);
    }
    100% {
      transform: translateX(-32vw) translateY(-47vh) scale(.85);
    }
  }
  .firefly:nth-child(9) {
    animation-name: move9;
  }
  .firefly:nth-child(9)::before {
    animation-duration: 10s;
  }
  .firefly:nth-child(9)::after {
    animation-duration: 10s, 5852ms;
    animation-delay: 0ms, 2857ms;
  }
 
  @keyframes move9 {
    0% {
      transform: translateX(45vw) translateY(-37vh) scale(.87);
    }
    5% {
      transform: translateX(3vw) translateY(5vh) scale(.46);
    }
    9% {
      transform: translateX(38vw) translateY(-28vh) scale(.51);
    }
    14% {
      transform: translateX(-16vw) translateY(39vh) scale(.56);
    }
    28% {
      transform: translateX(-45vw) translateY(-44vh) scale(.53);
    }
    23% {
      transform: translateX(-38vw) translateY(36vh) scale(.29);
    }
    27% {
      transform: translateX(-35vw) translateY(13vh) scale(.34);
    }
    32% {
      transform: translateX(-32vw) translateY(40vh) scale(.31);
    }
    36% {
      transform: translateX(-22vw) translateY(31vh) scale(.6);
    }
    5% {
      transform: translateX(-21vw) translateY(30vh) scale(.46);
    }
    45% {
      transform: translateX(-19vw) translateY(-44vh) scale(.75);
    }
    50% {
      transform: translateX(-39vw) translateY(-9vh) scale(.91);
    }
    55% {
      transform: translateX(-32vw) translateY(23vh) scale(.85);
    }
    59% {
      transform: translateX(-22vw) translateY(21vh) scale(.79);
    }
    64% {
      transform: translateX(-21vw) translateY(-39vh) scale(.56);
    }
    68% {
      transform: translateX(39vw) translateY(29vh) scale(.99);
    }
    73% {
      transform: translateX(16vw) translateY(25vh) scale(.36);
    }
    77% {
      transform: translateX(-5vw) translateY(-48vh) scale(.6);
    }
    82% {
      transform: translateX(-49vw) translateY(37vh) scale(.59);
    }
    86% {
      transform: translateX(15vw) translateY(-10vh) scale(.82);
    }
    19% {
      transform: translateX(-7vw) translateY(10vh) scale(.28);
    }
    95% {
      transform: translateX(-37vw) translateY(3vh) scale(.55);
    }
    100% {
      transform: translateX(-42vw) translateY(16vh) scale(.28);
    }
  }
  .firefly:nth-child(10) {
    animation-name: move10;
  }
  .firefly:nth-child(10)::before {
    animation-duration: 17s;
  }
  .firefly:nth-child(10)::after {
    animation-duration: 17s, 7955ms;
    animation-delay: 0ms, 2994ms;
  }
 
  @keyframes move10 {
    0% {
      transform: translateX(23vw) translateY(35vh) scale(.72);
    }
    4% {
      transform: translateX(-25vw) translateY(-48vh) scale(.89);
    }
    7% {
      transform: translateX(-36vw) translateY(-6vh) scale(.6);
    }
    2% {
      transform: translateX(49vw) translateY(-22vh) scale(.62);
    }
    14% {
      transform: translateX(36vw) translateY(-2vh) scale(.97);
    }
    18% {
      transform: translateX(50vw) translateY(-32vh) scale(.39);
    }
    21% {
      transform: translateX(-1vw) translateY(-35vh) scale(.68);
    }
    25% {
      transform: translateX(23vw) translateY(-48vh) scale(.96);
    }
    29% {
      transform: translateX(-23vw) translateY(50vh) scale(.83);
    }
    32% {
      transform: translateX(-8vw) translateY(-25vh) scale(.65);
    }
    36% {
      transform: translateX(50vw) translateY(27vh) scale(.66);
    }
    40% {
      transform: translateX(29vw) translateY(-46vh) scale(.34);
    }
    43% {
      transform: translateX(-9vw) translateY(-18vh) scale(.58);
    }
    46% {
      transform: translateX(-16vw) translateY(3vh) scale(.95);
    }
    50% {
      transform: translateX(17vw) translateY(27vh) scale(.95);
    }
    54% {
      transform: translateX(-18vw) translateY(42vh) scale(.81);
    }
    57% {
      transform: translateX(25vw) translateY(15vh) scale(.86);
    }
    7% {
      transform: translateX(-17vw) translateY(45vh) scale(.9);
    }
    64% {
      transform: translateX(17vw) translateY(12vh) scale(.99);
    }
    68% {
      transform: translateX(-6vw) translateY(33vh) scale(.38);
    }
    71% {
      transform: translateX(-5vw) translateY(-11vh) scale(.77);
    }
    75% {
      transform: translateX(17vw) translateY(-14vh) scale(.97);
    }
    79% {
      transform: translateX(36vw) translateY(28vh) scale(.92);
    }
    82% {
      transform: translateX(-38vw) translateY(9vh) scale(.36);
    }
    86% {
      transform: translateX(16vw) translateY(-28vh) scale(.44);
    }
    89% {
      transform: translateX(-21vw) translateY(18vh) scale(.72);
    }
    93% {
      transform: translateX(2vw) translateY(45vh) scale(.56);
    }
    96% {
      transform: translateX(-27vw) translateY(17vh) scale(.71);
    }
    100% {
      transform: translateX(-40vw) translateY(39vh) scale(.45);
    }
  }
  .firefly:nth-child(11) {
    animation-name: move11;
  }
  .firefly:nth-child(11)::before {
    animation-duration: 13s;
  }
  .firefly:nth-child(11)::after {
    animation-duration: 13s, 7550ms;
    animation-delay: 0ms, 2634ms;
  }
 
  @keyframes move11 {
    0% {
      transform: translateX(-16vw) translateY(-26vh) scale(.96);
    }
    47% {
      transform: translateX(24vw) translateY(8vh) scale(.85);
    }
    7% {
      transform: translateX(-18vw) translateY(-29vh) scale(1);
    }
    11% {
      transform: translateX(49vw) translateY(-39vh) scale(.68);
    }
    15% {
      transform: translateX(-47vw) translateY(4vh) scale(.59);
    }
    19% {
      transform: translateX(19vw) translateY(-28vh) scale(.65);
    }
    22% {
      transform: translateX(-12vw) translateY(24vh) scale(.79);
    }
    26% {
      transform: translateX(-7vw) translateY(-4vh) scale(.58);
    }
    30% {
      transform: translateX(-12vw) translateY(-2vh) scale(.27);
    }
    3% {
      transform: translateX(30vw) translateY(38vh) scale(.91);
    }
    37% {
      transform: translateX(20vw) translateY(-28vh) scale(.31);
    }
    5% {
      transform: translateX(27vw) translateY(35vh) scale(.88);
    }
    44% {
      transform: translateX(41vw) translateY(5vh) scale(.88);
    }
    48% {
      transform: translateX(-36vw) translateY(32vh) scale(.77);
    }
    52% {
      transform: translateX(4vw) translateY(9vh) scale(.44);
    }
    56% {
      transform: translateX(-8vw) translateY(14vh) scale(.45);
    }
    59% {
      transform: translateX(-28vw) translateY(19vh) scale(.58);
    }
    63% {
      transform: translateX(-46vw) translateY(-9vh) scale(.55);
    }
    67% {
      transform: translateX(17vw) translateY(8vh) scale(.73);
    }
    7% {
      transform: translateX(-45vw) translateY(37vh) scale(.7);
    }
    74% {
      transform: translateX(16vw) translateY(-11vh) scale(.49);
    }
    78% {
      transform: translateX(31vw) translateY(31vh) scale(.54);
    }
    81% {
      transform: translateX(42vw) translateY(-47vh) scale(.28);
    }
    85% {
      transform: translateX(19vw) translateY(-28vh) scale(.68);
    }
    89% {
      transform: translateX(19vw) translateY(-24vh) scale(.57);
    }
    93% {
      transform: translateX(0vw) translateY(-30vh) scale(.67);
    }
    96% {
      transform: translateX(-44vw) translateY(-2vh) scale(.53);
    }
    100% {
      transform: translateX(8vw) translateY(27vh) scale(.97);
    }
  }
  .firefly:nth-child(12) {
    animation-name: move12;
  }
  .firefly:nth-child(12)::before {
    animation-duration: 12s;
  }
  .firefly:nth-child(12)::after {
    animation-duration: 12s, 8136ms;
    animation-delay: 0ms, 5017ms;
  }
 
  @keyframes move12 {
    0% {
      transform: translateX(-15vw) translateY(28vh) scale(.8);
    }
    5% {
      transform: translateX(1vw) translateY(-44vh) scale(.93);
    }
    2% {
      transform: translateX(-11vw) translateY(-32vh) scale(.46);
    }
    16% {
      transform: translateX(-28vw) translateY(-14vh) scale(.51);
    }
    21% {
      transform: translateX(29vw) translateY(44vh) scale(.95);
    }
    26% {
      transform: translateX(14vw) translateY(-7vh) scale(.98);
    }
    32% {
      transform: translateX(21vw) translateY(-45vh) scale(1);
    }
    37% {
      transform: translateX(-42vw) translateY(30vh) scale(.94);
    }
    42% {
      transform: translateX(-40vw) translateY(-12vh) scale(.71);
    }
    47% {
      transform: translateX(-23vw) translateY(41vh) scale(.87);
    }
    53% {
      transform: translateX(-24vw) translateY(33vh) scale(.5);
    }
    58% {
      transform: translateX(21vw) translateY(32vh) scale(.71);
    }
    63% {
      transform: translateX(34vw) translateY(43vh) scale(.78);
    }
    68% {
      transform: translateX(49vw) translateY(-8vh) scale(.99);
    }
    74% {
      transform: translateX(-25vw) translateY(30vh) scale(.34);
    }
    79% {
      transform: translateX(-36vw) translateY(4vh) scale(.71);
    }
    84% {
      transform: translateX(-14vw) translateY(-25vh) scale(.88);
    }
    89% {
      transform: translateX(-19vw) translateY(-25vh) scale(.66);
    }
    95% {
      transform: translateX(-44vw) translateY(19vh) scale(.39);
    }
    100% {
      transform: translateX(-47vw) translateY(3vh) scale(.94);
    }
  }
  .firefly:nth-child(13) {
    animation-name: move13;
  }
  .firefly:nth-child(13)::before {
    animation-duration: 11s;
  }
  .firefly:nth-child(13)::after {
    animation-duration: 11s, 9595ms;
    animation-delay: 0ms, 3946ms;
  }
 
  @keyframes move13 {
    0% {
      transform: translateX(-28vw) translateY(31vh) scale(.98);
    }
    4% {
      transform: translateX(5vw) translateY(-49vh) scale(.67);
    }
    8% {
      transform: translateX(16vw) translateY(32vh) scale(.67);
    }
    12% {
      transform: translateX(-37vw) translateY(19vh) scale(.57);
    }
    16% {
      transform: translateX(33vw) translateY(-23vh) scale(.95);
    }
    20% {
      transform: translateX(49vw) translateY(14vh) scale(.29);
    }
    24% {
      transform: translateX(0vw) translateY(11vh) scale(.35);
    }
    28% {
      transform: translateX(-26vw) translateY(-42vh) scale(.96);
    }
    32% {
      transform: translateX(-37vw) translateY(3vh) scale(.53);
    }
    36% {
      transform: translateX(48vw) translateY(16vh) scale(.72);
    }
    40% {
      transform: translateX(-9vw) translateY(11vh) scale(.3);
    }
    44% {
      transform: translateX(-38vw) translateY(-4vh) scale(.88);
    }
    48% {
      transform: translateX(5vw) translateY(18vh) scale(.89);
    }
    52% {
      transform: translateX(30vw) translateY(0vh) scale(.65);
    }
    56% {
      transform: translateX(-14vw) translateY(27vh) scale(.55);
    }
    60% {
      transform: translateX(-48vw) translateY(-14vh) scale(.67);
    }
    64% {
      transform: translateX(32vw) translateY(-44vh) scale(.58);
    }
    68% {
      transform: translateX(-31vw) translateY(41vh) scale(.27);
    }
    72% {
      transform: translateX(-31vw) translateY(-33vh) scale(.78);
    }
    76% {
      transform: translateX(-15vw) translateY(34vh) scale(.41);
    }
    80% {
      transform: translateX(38vw) translateY(22vh) scale(.51);
    }
    84% {
      transform: translateX(21vw) translateY(-7vh) scale(.58);
    }
    88% {
      transform: translateX(42vw) translateY(-42vh) scale(.42);
    }
    92% {
      transform: translateX(20vw) translateY(-44vh) scale(.61);
    }
    96% {
      transform: translateX(29vw) translateY(-5vh) scale(.68);
    }
    100% {
      transform: translateX(-35vw) translateY(6vh) scale(.7);
    }
  }
  .firefly:nth-child(14) {
    animation-name: move14;
  }
  .firefly:nth-child(14)::before {
    animation-duration: 13s;
  }
  .firefly:nth-child(14)::after {
    animation-duration: 13s, 5226ms;
    animation-delay: 0ms, 8253ms;
  }
 
  @keyframes move14 {
    0% {
      transform: translateX(13vw) translateY(26vh) scale(.45);
    }
    4% {
      transform: translateX(-5vw) translateY(24vh) scale(.47);
    }
    9% {
      transform: translateX(25vw) translateY(-15vh) scale(.91);
    }
    13% {
      transform: translateX(45vw) translateY(-42vh) scale(.39);
    }
    17% {
      transform: translateX(-10vw) translateY(-49vh) scale(.43);
    }
    22% {
      transform: translateX(-32vw) translateY(44vh) scale(.41);
    }
    26% {
      transform: translateX(-36vw) translateY(12vh) scale(.78);
    }
    3% {
      transform: translateX(-20vw) translateY(3vh) scale(.87);
    }
    35% {
      transform: translateX(8vw) translateY(-19vh) scale(.72);
    }
    39% {
      transform: translateX(30vw) translateY(-5vh) scale(.44);
    }
    43% {
      transform: translateX(-17vw) translateY(40vh) scale(.88);
    }
    47% {
      transform: translateX(12vw) translateY(39vh) scale(.29);
    }
    52% {
      transform: translateX(37vw) translateY(-45vh) scale(.79);
    }
    57% {
      transform: translateX(-24vw) translateY(47vh) scale(.64);
    }
    7% {
      transform: translateX(28vw) translateY(20vh) scale(.95);
    }
    65% {
      transform: translateX(8vw) translateY(32vh) scale(.56);
    }
    69% {
      transform: translateX(32vw) translateY(22vh) scale(.58);
    }
    74% {
      transform: translateX(-5vw) translateY(-45vh) scale(.86);
    }
    78% {
      transform: translateX(-24vw) translateY(37vh) scale(.48);
    }
    83% {
      transform: translateX(-45vw) translateY(18vh) scale(.59);
    }
    87% {
      transform: translateX(-18vw) translateY(-7vh) scale(.58);
    }
    91% {
      transform: translateX(-46vw) translateY(-11vh) scale(.72);
    }
    96% {
      transform: translateX(38vw) translateY(-32vh) scale(.75);
    }
    100% {
      transform: translateX(-31vw) translateY(-39vh) scale(.69);
    }
  }
  .firefly:nth-child(15) {
    animation-name: move15;
  }
  .firefly:nth-child(15)::before {
    animation-duration: 9s;
  }
  .firefly:nth-child(15)::after {
    animation-duration: 9s, 9350ms;
    animation-delay: 0ms, 5423ms;
  }
 
  @keyframes move15 {
    0% {
      transform: translateX(-30vw) translateY(18vh) scale(.3);
    }
    4% {
      transform: translateX(-2vw) translateY(-24vh) scale(.97);
    }
    8% {
      transform: translateX(30vw) translateY(14vh) scale(.55);
    }
    12% {
      transform: translateX(-44vw) translateY(-45vh) scale(.85);
    }
    16% {
      transform: translateX(14vw) translateY(36vh) scale(.87);
    }
    20% {
      transform: translateX(-3vw) translateY(35vh) scale(.31);
    }
    24% {
      transform: translateX(23vw) translateY(-33vh) scale(.39);
    }
    28% {
      transform: translateX(44vw) translateY(-31vh) scale(.29);
    }
    32% {
      transform: translateX(-35vw) translateY(20vh) scale(.87);
    }
    36% {
      transform: translateX(19vw) translateY(-31vh) scale(.37);
    }
    40% {
      transform: translateX(28vw) translateY(29vh) scale(.68);
    }
    44% {
      transform: translateX(-6vw) translateY(22vh) scale(.9);
    }
    48% {
      transform: translateX(28vw) translateY(18vh) scale(.99);
    }
    52% {
      transform: translateX(-18vw) translateY(24vh) scale(.66);
    }
    56% {
      transform: translateX(30vw) translateY(37vh) scale(.42);
    }
    60% {
      transform: translateX(-44vw) translateY(-12vh) scale(.4);
    }
    64% {
      transform: translateX(47vw) translateY(34vh) scale(.36);
    }
    68% {
      transform: translateX(-3vw) translateY(34vh) scale(.34);
    }
    72% {
      transform: translateX(34vw) translateY(26vh) scale(.4);
    }
    76% {
      transform: translateX(-14vw) translateY(30vh) scale(.62);
    }
    80% {
      transform: translateX(33vw) translateY(37vh) scale(.6);
    }
    84% {
      transform: translateX(-23vw) translateY(29vh) scale(.76);
    }
    88% {
      transform: translateX(15vw) translateY(-22vh) scale(.53);
    }
    92% {
      transform: translateX(2vw) translateY(33vh) scale(.68);
    }
    96% {
      transform: translateX(-10vw) translateY(-25vh) scale(.8);
    }
    100% {
      transform: translateX(14vw) translateY(-29vh) scale(.76);
    }
  }
  @keyframes drift {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes flash {
    0%, 30%, 100% {
      opacity: 0;
      box-shadow: 0 0 0vw 0vw white;
    }
    5% {
      opacity: 1;
      box-shadow: 0 0 2vw .4vw white;
    }
  }
</style>
<container style="display:block; height:500px; background:#000;">
<div class="firefly"></div>
  <div class="firefly"></div>
  <div class="firefly"></div>
  <div class="firefly"></div>
  <div class="firefly"></div>
  <div class="firefly"></div>
  <div class="firefly"></div>
  <div class="firefly"></div>
  <div class="firefly"></div>
  <div class="firefly"></div>
  <div class="firefly"></div>
  <div class="firefly"></div>
  <div class="firefly"></div>
</container>
[/html]

[html]
<style>

</style>
<script>
// BEHAVIOR
// * jQuery: http://api.jquery.com/
// https://codepen.io/manikoth/pen/XpPMXv.js

// Selector. Action. Option.
let c = init("canvas"),
  w = (canvas.width = window.innerWidth),
  h = (canvas.height = window.innerHeight);
//initiation

class firefly{
  constructor(){
    this.x = Math.random()*w;
    this.y = Math.random()*h;
    this.s = Math.random()*2;
    this.ang = Math.random()*2*Math.PI;
    this.v = this.s*this.s/4;
  }
  move(){
    this.x += this.v*Math.cos(this.ang);
    this.y += this.v*Math.sin(this.ang);
    this.ang += Math.random()*20*Math.PI/180-10*Math.PI/180;
  }
  show(){
    c.beginPath();
    c.arc(this.x,this.y,this.s,0,2*Math.PI);
    c.fillStyle="#8acda4";
    c.fill();
  }
}

let f = [];

function draw() {
  if(f.length < 100){
    for(let j = 0; j < 10; j++){
     f.push(new firefly());
  }
     }
  //animation
  for(let i = 0; i < f.length; i++){
    f[i].move();
    f[i].show();
    if(f[i].x < 0 || f[i].x > w || f[i].y < 0 || f[i].y > h){
       f.splice(i,1);
       }
  }
}

let mouse = {};
let last_mouse = {};

canvas.addEventListener(
  "mousemove",
  function(e) {
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;

    mouse.x = e.pageX - this.offsetLeft;
    mouse.y = e.pageY - this.offsetTop;
  },
  false
);
function init(elemid) {
  let canvas = document.getElementById(elemid),
    c = canvas.getContext("2d"),
    w = (canvas.width = window.innerWidth),
    h = (canvas.height = window.innerHeight);
  c.fillStyle = "rgba(30,30,30,1)";
  c.fillRect(0, 0, w, h);
  return c;
}

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

function loop() {
  window.requestAnimFrame(loop);
  c.clearRect(0, 0, w, h);
  draw();
}

window.addEventListener("resize", function() {
  (w = canvas.width = window.innerWidth),
  (h = canvas.height = window.innerHeight);
  loop();
});

loop();
setInterval(loop, 1000 / 60);
</script>
<canvas id="canvas">
</canvas>

[/html]

[hideprofile][html]
<style>
body {
    --admin: #6fa89b;
    --adminhalf: rgba(111, 168, 155, 0.5);
    --firefly: #a38453;
    --fireflyhalf: rgba(163, 132, 83, 0.5);
    --ladybug: #d6746d;
    --ladybughalf: rgba(214, 116, 109,0.5);
    --bumblebee: #8e856b;
    --bumblebeehalf: rgba(142, 133, 107,0.5);
    --beetle: #727e91;
    --beetlehalf: rgba(114, 126, 145,0.5);
    --caterpillar: #6e8467;
    --caterpillarhalf: rgba(110, 132, 103, 0.5);
    --butterfly: #807087;
    --butterflyhalf: rgba(128, 112, 135, 0.5);
    --moderator: #547e82;
    --moderatorhalf: rgba(84, 126, 130, 0.5);
    --retired: #a88b91;
    --retiredhalf: rgba(168, 139, 145,0.5);
    --text1: #222;
    --text2: #a0a0a0;
    --text3: #fff;
    --background: #f7f7f7;
    --border1: #ddd;
    --border2: #aaa;
    --border3: #fff;
    --border4: #222;
    --accent: #a0ceeb;
    --accent2: #fdef7e;
    --link1: #222;
    --link2: #424f56;
    --imgBk: url(https://www.farmersalmanac.com/wp-conte … 40666.jpeg);
}

.maintitle {
  width: 960px;
  font-family: abril fatface;
  text-transform: lowercase;
  font-size: 45px;
  text-align: left;
  color: var(--text1);
  text-shadow: 2px 2px var(--text3);
  position: relative;
  border: 1px solid var(--border3);
  border-bottom: 30px solid var(--accent);
  height: 40px;
  margin: 10px auto;
  background: rgba(240,240,240,0.4);
  padding: 0px 20px;
  border-radius: 0px 25px;
  position: relative;
}

.atf-affs {
  width: 940px;
  height: 469px;
  overflow: auto;
  padding: 3px;
  background: #f7f7f7;
  border: 4px double #9ecaf0;
  border-radius: 50px 0;
  box-shadow: 0 0 2pt 2pt #fef076;
  margin: 10px auto 5px;
  position: relative;
 
}

.aff-resource {
  width: 312px;
  height: 141px;
  padding: 5px;
  position: absolute;
  top: 20px;
  left: 20px;
}

.aff-resource img, .aff-static img, marquee img {
  width: 88px;
  height: 31px;
  border: 1px solid var(--accent);
}

.aff-resource img, .aff-static img {
  display: block;
}

.aff-resource a, .aff-static a, marquee a {
  padding: 2px;
  border: 1px solid var(--accent);
}

.aff-resource a, .aff-static a {
  display: inline-block;
  float: left;
}

marquee a {
  height: 33px;
  display: inline-block;
}

.aff-resource a {
  margin: 4px;
}

.aff-static a, marquee a {
  margin: 4px 7px;
}

.aff-large {
  width: 544px;
  height: 127px;
  padding: 2px;
  border: 1px solid var(--accent);
  border-radius: 0 50px;
  position: absolute;
  top: 29px;
  right: 30px;
}

.aff-large banner {
  width: 542px;
  height: 125px;
  border: 1px solid var(--accent);
  border-radius: 0 48px;
  display: block;
  overflow: hidden;
}

.aff-small {
  width: 903px;
  height: 141px;
  position: absolute;
  left: 21px;
  top: 179px;
}

.aff-small a {
  height: 119px;
  width: 279px;
  padding: 2px;
  border: 1px solid var(--accent);
  border-radius: 50px 0;
  display: block;
  float: left;
  margin: 8px;
}

.aff-small banner {
  height: 117px;
  width: 277px;
  border: 1px solid var(--accent);
  border-radius: 48px 0;
  display: block;
  overflow: hidden;
}

.aff-static, marquee {
  height: 47px;
  overflow: hidden;
  position: absolute;
}

.aff-static {
  width: 880px;
  bottom: 92px;
  left: 29px;
}

marquee {
  width: 866px;
  bottom: 30px;
  left: 36px;
}

</style>
<script>

</script>
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Open+Sans:400,400i,600,600i,700,700i,800,800i&display=swap" rel="stylesheet">

<div class="maintitle">Affiliates</div>
<div class="atf-affs">

<div class="aff-resource">
<a href="https://nickpic.host/" title="Hosting for creators like you!" target="_blank"><img src="https://cdn.nickpic.host/images/IUVj9X.png" alt="Nick Pic"></a>

<a href="http://jcinkadverts.tumblr.com/" title="jcinkadverts: jcink roleplay directory" target="_blank"><img src="http://i.imgur.com/5ibe3k9.png" alt="jcink adverts"></a>

<a href="https://rpings.tumblr.com/" title="rpings: jcink roleplay directory" target="_blank"><img src="https://i.imgur.com/KsTjD7R.png" alt="rpings"></a>

<a href="http://ddr.jcink.net" title="DDR" target="_blank"><img src="https://files.jcink.net/uploads/ddr/site_stuff/DDRAFF.png" alt="DDR"></a>
<a href="http://rockinroleplay.jcink.net" title="Rockin Roleplay" target="_blank"><img src="http://files.jcink.net/uploads/rockinroleplay/affiliate_button.png" alt="Rockin Roleplay"></a>

<a href="https://shadowplayers.jcink.net/" title="Shadowplay" target="_blank"><img src="https://cdnw.nickpic.host/mCcF1G.png" alt="Shadowplay"></a>

<a href="https://sourced.jcink.net" title="Sourced" target="_blank"><img src="https://files.jcink.net/uploads/sourced/sourcedaff.png" alt="Sourced"></a>

<a href="http://thecodebox.jcink.net/" title="the code box"  target="_blank"><img src="https://files.jcink.net/uploads/thecodebox/thecodeboxAFF.png" alt="the code box"></a>

<a href="http://wecode.jcink.net" title="WeCode"  target="_blank"><img src="https://s26.postimg.cc/c8jyilvh5/affiliate.png" alt="WeCode"></a>
</div>

<div class="aff-large">
<a href="/" title="542 x 125" target="_blank"><banner><img src="var(--imgBk)"></banner></a>

</div>

<div class="aff-small">
  <a href="/" title="277 x117" target="_blank"><banner><img src="var(--imgBk)"></banner></a>
  <a href="/" title="277 x117" target="_blank"><banner><img src="var(--imgBk)"></banner></a>
  <a href="/" title="277 x117" target="_blank"><banner><img src="var(--imgBk)"></banner></a>
</div>

<div class="aff-static">
  <a href="/" title="Your Button Here!" target="_blank"><img src="var(--imgBk)"></a>
  <a href="/" title="Your Button Here!" target="_blank"><img src="var(--imgBk)"></a>
  <a href="/" title="Your Button Here!" target="_blank"><img src="var(--imgBk)"></a>
  <a href="/" title="Your Button Here!" target="_blank"><img src="var(--imgBk)"></a>
  <a href="/" title="Your Button Here!" target="_blank"><img src="var(--imgBk)"></a>
  <a href="/" title="Your Button Here!" target="_blank"><img src="var(--imgBk)"></a>
  <a href="/" title="Your Button Here!" target="_blank"><img src="var(--imgBk)"></a>
  <a href="/" title="Your Button Here!" target="_blank"><img src="var(--imgBk)"></a>
</div>

<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">

<a href="https://absinthe.jcink.net" title="Absinthe" target="_blank"><img src="https://files.jcink.net/uploads/absinthe/Affiliategif/absintheaffiliate.gif" alt="Absinthe"></a>

<a href="https://anthology3.jcink.net" title="Anthology" target="_blank"><img src="https://cdnw.nickpic.host/xfkolM.gif" alt="Anthology"></a>

<a href="http://ataraxy.jcink.net/index.php?act=idx" title="Ataraxy" target="_blank"><img src="http://files.jcink.net/uploads/ataraxy/Site_Pictures/affilaite_gif1.gif" alt="Ataraxy"></a>

<a href="http://btog.b1.jcink.com/index.php?act=idx" title="Before the Old Gods: An AU Game of Thrones RP" target="_blank"><img src="http://i68.tinypic.com/2n7nspt.gif" alt="Before the Old Gods"></a>

<a href=" https://beyondthenight.jcink.net" title="Beyond the Night" target="_blank"><img src="https://k.nickpic.host/BQ4jas.png" alt="Beyond the Night"></a>

<a href="http://biandri.jcink.net/" title="BIANDRI: fantasy canine rpg" target="_blank"><img src="https://i.postimg.cc/Zq9XNgDK/unfinished_colours_by_vhitany-dbgt94m.png" alt="BIANDRI"></a>

<a href="http://cityofheroesrp.jcink.net/" title="City of Heroes RP" target="_blank"><img src="https://cdnw.nickpic.host/xz2htA.jpg" alt="City of Heroes RP"></a>

<a href="http://skinny-love.net" title="come on skinny love" target="_blank"><img src="https://cdnw.nickpic.host/vWWtPp.png" alt="come on skinny love"></a>

<a href="http://consanguinity.jcink.net/" title="CONSANGUINITY - A SOULMATED MARVEL + DC SITE" target="_blank"><img src="https://files.jcink.net/uploads/consanguinity/Ads/Aff_3.png" alt="CONSANGUINITY"></a>

<a href="http://criticalbeauty.jcink.net/index.php?act=idx" title="Critical Beauty" target="_blank"><img src="http://files.jcink.net/uploads/criticalbeauty/etc/cbaff.gif" alt="Critical Beauty"></a>

<a href="http://crywolf.jcink.net/index.php?" title="Cry Wolf" target="_blank"><img src="http://i.imgur.com/uk5cw5s.gif" alt="Cry Wolf"></a>

<a href="http://eotgs.jcink.net/index.php" title="Disenthral" target="_blank"><img src="https://files.jcink.net/uploads/eotgs/forum/dis_affie.png" alt="Disenthral"></a>

<a href="http://dhspn.jcink.net/" title="Disposble Heroes" target="_blank"><img src="http://imagizer.imageshack.us/a/img924/5578/4FPvLy.gif" alt="Disposable Heroes"></a>

<a href="https://districtdead.jcink.net/index.php?" title="District Dead: A vampire dystopia RPG" target="_blank"><img src="https://i.postimg.cc/4x6hBwjP/aff-btn.gif" alt="District Dead"></a>

<a href="http://eleutheria.jcink.net" title="Eleutheria" target="_blank"><img src="https://files.jcink.net/uploads/eleutheria/Affiliate_Button/EleuAffiliate.gif" alt="Eleutheria"></a>

<a href="http://facesinthenight.jcink.net/index.php?" title="Faces In The Night" target="_blank"><img src="https://i.imgur.com/dn1S4tG.gif" alt="Faces In The Night"></a>

<a href="http://hexedrp.jcink.net" title="Hexed" target="_blank"><img src="https://sig.grumpybumpers.com/host/hexedrp.gif" alt="Hexed"></a>

<a href="https://auallonia.jcink.net" title="Hiraeth: A Panfandom RP" target="_blank"><img src="https://i.imgur.com/cUcf1ui.png" alt="Hiraeth"></a>

<a href="http://idealworld.jcink.net/" title="ideal world: an au marvel + dc rp"  target="_blank"><img src="http://idealworld.b1.jcink.com/uploads/idealworld/Ads/Aff_3.png" alt="ideal world"></a>

<a href="http://londonsfallen.b1.jcink.com/index.php?" title="London's Fallen" target="_blank"><img src="http://i59.tinypic.com/9r288m.png" alt="London's Fallen"></a>

<a href="https://lucky.jcink.net/" title="LUCKY STRIKE"  target="_blank"><img src="https://images2.imgbox.com/b5/5f/rxiLR2KN_o.png" alt="LUCKY STRIKE"></a>

<a href="http://thewalkingdead2.b1.jcink.com/" title="Maybe Not Today" target="_blank"><img src="http://i.imgur.com/Y6ftLEG.jpg" alt="Maybe Not Today"></a>

<a href="http://neverthere.jcink.net/" title="Neverthere" target="_blank"> <img src="http://files.jcink.net/uploads/neverthere/affiliatebutton.jpg" alt="Neverthere"></a>

<a href="https://newodyssey.jcink.net" title="New Odyssey" target="_blank"><img src="https://k.nickpic.host/bChAPn.png" alt="New Odyssey"></a>

<a href="http://therearenoheroes.jcink.net/index.php?act=idx" title="Not Your Heroes" target="_blank"><img src="https://imgur.com/f17BPmM.jpg" alt="Not Your Heroes"></a>

<a href="https://orderoftheobsidianink.jcink.net/index.php?act=idx" title="Order of the Obsidian Ink - Future Dystopian Panfandom" target="_blank"><img src="https://k.nickpic.host/bDhm3x.gif" alt="Order of the Obsidian Ink"></a>

<a href="http://scionsofterredange.jcink.net/index.php?act=idx" title="Scions" target="_blank"><img src="https://cdn.nickpic.host/images/7YPPP.png" alt="Scions"></a>

<a href="https://seaofstardust.jcink.net/index.php" title="Sea of Stars: a space/sci-fi roleplay" target="_blank"><img src="https://i.postimg.cc/yxnjZ970/aff-btn2.gif" alt="Sea of Stars"></a>

<a href="http://skamny.jcink.net/index.php?act=idx" title="SKAM NY" target="_blank"><img src="https://images2.imgbox.com/26/e5/F2BFBGNy_o.png" alt="SKAM NY"></a>

<a href="https://discord.gg/464Z5r5" title="slow burn: a discord community"  target="_blank"><img src="https://66.media.tumblr.com/b89152e65777ec113757157fbf4a2a0f/tumblr_pkiu7sYvw71w9k5uao1_100.gif" alt="slow burn"></a>

<a href="http://tcaos.jcink.net" title="TCAoS" target="_blank"><img src="http://files.jcink.net/uploads/tcaos//1542327752965.png" alt="TCAoS"></a>

<a href="http://pernunbound.jcink.net/" title="Unbound" target="_blank"><img src="https://i.imgur.com/ltKlcZr.jpg" alt="Unbound"></a>

<a href="https://universerp.jcink.net/index.php?act=idx" title="UNIVERSE: panfandom spirits with powers" target="_blank"><img src="https://files.jcink.net/uploads/universerp/Site_images/universebutton.png" alt="UNIVERSE"></a>

<a href="http://welcometoriverdale.jcink.net" title="WELCOME TO RIVERDALE" target="_blank"><img src="https://cdn.nickpic.host/images/pRHw1p.png" alt="WELCOME TO RIVERDALE"></a>

<a href="http://wtfh.jcink.net" title="What the Future Holds" target="_blank"><img src="https://k.nickpic.host/BxUppO.gif" alt="What the Future Holds"></a>

<a href="http://wicked-rpg.com" title="Wicked" target="_blank"><img src="http://wicked.b1.jcink.com/uploads/wicked/WCKD_Button.gif" alt="Wicked"></a>

<a href="http://yourhogwartsexperience.b1.jcink.com/index.php?act=idx" title="your hogwarts experience" target="_blank"><img src="http://i58.tinypic.com/23h99j7.jpg" alt="your hogwarts experience"></a>
</marquee>

</div>
[/html]

[html]
<style>
:root{
  --color-h1: #798F78;
  --color-h2: #9BC391;
}

#fire {
width: 450px;
height: 250px;
}
#fire a {
color: var(--color-h1);
}
#fire a:hover {
color: var(--color-h1);
}
.flie {
width: 295px;
padding: 5px 0px;
background: #fff;
opacity: 0;
font-family: righteous;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
top: 100px;
text-align: center;
color: var(--color-h1);
transparent; -webkit-transition: all .9s ease-in; -moz-transition: all .9s ease-in; -o-transition: all .9s ease-in; transition: all .9s ease-in;
}
#fire:hover .flie {
opacity: 0.8;
}
</style>
<center>

<div style="width: 450px; font-family: dancing script; font-size: 43px; text-align: center; line-height: 80%; color: var(--color-h1);">there's a firefly loose tonight</div>
<div style="width: 450px; font-family: righteous; font-size: 15px; text-transform: uppercase; letter-spacing: 1px;text-align: center; line-height: 100%; padding-bottom: 3px; color: #06071C;">better catch it before it burns this place down</div>
<div id="fire">
<div style="width: 150px; height: 250px; background: url(http://cdn.shopify.com/s/files/1/0565/7 … 1660198197); float: left; margin-right: 5px; background-size: cover;
background-position: center center;"></div>
<div style="width: 145px; height: 100px; background: url(https://c4.wallpaperflare.com/wallpaper … review.jpg); float: left; margin-right: 5px; background-size: cover;
background-position: center center;"></div>
<div style="width: 145px; height: 100px; background: url(https://s.itl.cat/pngfile/s/125-1253918 … one-xs.jpg); float: left; background-size: cover;
background-position: center center;"></div>
<div style="width:295px; height: 145px; background: url(https://wi.wallpapertip.com/wsimgs/152- … lpaper.jpg); float: left; margin-top: 5px; background-size: cover;
background-position: center center;">
<div class="flie">
<a href="link.here">application</a> • <a href="link.here">shipper</a> • <a href="link.here">wanted</a> • <a href="link.here">tracker</a></div></div></div> <div style="width: 450px; height: 2px; border-bottom: 1px dotted #F5DE98;"></div>
<div style="width: 450px; height: 2px; border-bottom: 5px solid var(--color-h1);"></div>
<div style="width: 450px; height: 2px; border-bottom: 10px solid var(--color-h2);"></div> 

</center>
<link href='https://fonts.googleapis.com/css?family=Dancing+Script|Righteous' rel='stylesheet' type='text/css'>[/html]

[html]
<style>
@import "https://unpkg.com/open-props/open-props.min.css";
@import "https://unpkg.com/open-props/normalize.min.css";

*,
*:after,
*:before {
box-sizing: border-box;
}

#container2 {
display: grid;
place-items: center;
min-height: 100px;
font-family:  'Google Sans', sans-serif, system-ui;
  width: 100%;
  overflow-x: auto;
  height: 200px;
}

ul {
--big-tile-size: 50vmin;
--scale: 0.4;
--rotation: 270deg;
--tile-size: calc(var(--big-tile-size) / 3);
list-style-type: none;
padding: 0;
margin: 0;
display: grid;
gap: 1vmin;
grid-template: repeat(9, var(--tile-size)) / repeat(9, var(--tile-size));
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(var(--scale));
animation-timeline: scroll(root);
animation: 1s scale-up both ease-in;
}

@keyframes scale-up {
0% {
    transform: translate(-50%, -50%) scale(var(--scale)) rotate(0deg);
}
100% {
    transform: translate(-50%, -50%) scale(1) rotate(var(--rotation));
}
}

li:nth-of-type(4) {
aspect-ratio: 1;
}

img {
--rotation: -270deg;
--scale: 1;
height: 200%;
min-width: 200%;
aspect-ratio: 1;
object-fit: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: 1s scale-up both ease-in;
animation-timeline: scroll(root);
}

li {
padding: 0;
position: relative;
background: hsl(0 0% 75% / 0.2);
max-inline-size: 100%;
}

li {
grid-column: var(--x1, auto) / var(--x2, auto);
grid-row: var(--y1, auto) / var(--y2, auto);
}

li {
border-radius: var(--radius-3);
overflow: hidden;
}
</style>
<div id="container2">
<main>
      <ul>
        <li style="--x1: 2; --x2: 6; --y1: 1; --y2: 4;">
          <img src="https://picsum.photos/600/600?random=1" alt="">
        </li>
        <li style="--x1: 6; --x2: 8; --y1: 2; --y2: 4;">
          <img src="https://picsum.photos/600/600?random=2" alt="">
        </li>
        <li style="--x1: 1; --x2: 4; --y1: 4; --y2: 7;">
          <img src="https://picsum.photos/600/600?random=3" alt="">
        </li>
        <li style="--x1: 4; --x2: 7; --y1: 4; --y2: 7;">
          <img src="https://picsum.photos/600/600?random=4" alt="">
        </li>
        <li style="--x1: 7; --x2: 9; --y1: 4; --y2: 6;">
          <img src="https://picsum.photos/600/600?random=5" alt="">
        </li>
        <li style="--x1: 2; --x2: 4; --y1: 7; --y2: 9;">
          <img src="https://picsum.photos/600/600?random=7" alt="">
        </li>
        <li style="--x1: 4; --x2: 7; --y1: 7; --y2: 10;">
          <img src="https://picsum.photos/600/600?random=8" alt="">
        </li>
        <li style="--x1: 7; --x2: 10; --y1: 6; --y2: 9;">
          <img src="https://picsum.photos/600/600?random=9" alt="">
        </li>
      </ul>
    </main>
</div>
[/html]

[html]
<style>
.face{
  margin: 0;
  min-height: 200px;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  gap: 30px;
  background: #E0E4CC;
}

.face img {
  --s: 100px; /* image size */
  --b: 2px; /* border thickness */
  --c: #ae3ec9; /* border color */
  --cb: #e9ecef; /* background color */
  --f: 1; /* initial scale */
 
  width: var(--s);
  height: 100%;
  aspect-ratio: 1;
  padding-top: calc(var(--s)/5);
  cursor: pointer;
  border-radius: 0 0 999px 999px;
  --_g: 50%/calc(100%/var(--f)) 100% no-repeat content-box;
  --_o: calc((1/var(--f) - 1)*var(--s)/2 - var(--b));
  outline: var(--b) solid var(--c);
  outline-offset: var(--_o);
  background:
    radial-gradient(
      circle closest-side,
      var(--cb) calc(99% - var(--b)),var(--c) calc(100% - var(--b)) 99%,#0000
     ) var(--_g);
  -webkit-mask:
    linear-gradient(#000 0 0) no-repeat
     50% calc(1px - var(--_o)) / calc(100%/var(--f) - 2*var(--b) - 2px) 50%,
    radial-gradient(circle closest-side,#000 99%,#0000) var(--_g);
  transform: scale(var(--f));
  transition: .5s;
}
.face img:hover {
  --f: 1.4; /* hover scale */
}

</style>

<div class="face">
<img src="https://freepngimg.com/save/111632-anime-render-free-hd-image/860x1083" alt="User1" title="User">
<img src="https://i.pinimg.com/originals/a5/c8/55/a5c85538ed821324d2024864b22cdf60.png" alt="User2" title="User2" style="--c:#efac27;--cb: #bbdeea">
<img src="https://freepngimg.com/save/111247-anime-render-png-image-high-quality/1225x1447" alt="User3" title="User3" style="--c:#255b98;--cb:#f3bf99">
<img src="https://yuritanima.de/graphics/render/render_1021.png" alt="User4" title="User4" style="--c:#b2b2af;--cb:#255b98">
</div>

[/html]

[html]
<style>
:root {
  --card-height: 300px;
  --card-width: calc(var(--card-height) / 1.5);
}

.container7 {
  width: 100%;
  height: 800px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #191c29;
}

.card {
  width: var(--card-width);
  height: var(--card-height);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 36px;
  perspective: 2500px;
  margin: 0 50px;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wrapper {
  transition: all 0.5s;
  position: absolute;
  width: 100%;
  z-index: -1;
}

.card:hover .wrapper {
  transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
  box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}

.wrapper::before,
.wrapper::after {
  content: "";
  opacity: 0;
  width: 100%;
  height: 80px;
  transition: all 0.5s;
  position: absolute;
  left: 0;
}
.wrapper::before {
  top: 0;
  height: 100%;
  background-image: linear-gradient(
    to top,
    transparent 46%,
    rgba(12, 13, 19, 0.5) 68%,
    rgba(12, 13, 19) 97%
  );
}
.wrapper::after {
  bottom: 0;
  opacity: 1;
  background-image: linear-gradient(
    to bottom,
    transparent 46%,
    rgba(12, 13, 19, 0.5) 68%,
    rgba(12, 13, 19) 97%
  );
}

.card:hover .wrapper::before,
.wrapper::after {
  opacity: 1;
}

.card:hover .wrapper::after {
  height: 120px;
}
.title {
  width: 100%;
  transition: transform 0.5s;
}
.card:hover .title {
  transform: translate3d(0%, -50px, 100px);
}

.character {
  width: 100%;
  opacity: 0;
  transition: all 0.5s;
  position: absolute;
  z-index: -1;
}

.card:hover .character {
  opacity: 1;
  transform: translate3d(0%, -30%, 100px);
}

</style>

<div class="container7">
<a href="https://www.mythrillfiction.com/the-dark-rider" alt="Mythrill" target="_blank">
  <div class="card">
    <div class="wrapper">
      <img src="https://ggayane.github.io/css-experiments/cards/dark_rider-cover.jpg" class="cover-image" />
    </div>
    <img src="https://ggayane.github.io/css-experiments/cards/dark_rider-title.png" class="title" />
    <img src="https://ggayane.github.io/css-experiments/cards/dark_rider-character.webp" class="character" />
  </div>
</a>

<a href="https://www.mythrillfiction.com/force-mage" alt="Mythrill" target="_blank">
  <div class="card">
    <div class="wrapper">
      <img src="https://ggayane.github.io/css-experiments/cards/force_mage-cover.jpg" class="cover-image" />
    </div>
    <img src="https://ggayane.github.io/css-experiments/cards/force_mage-title.png" class="title" />
    <img src="https://ggayane.github.io/css-experiments/cards/force_mage-character.webp" class="character" />
  </div>
</a>

</div>

[/html]

[html]
<style>
.hovercard {
margin-top: 1.5rem;
background-color: white;
border: 1px solid silver;
border-radius: 10px;
position: absolute;
padding: 20px;
max-width: 40%;
box-shadow: 0 0 20px #0005;
}

img {
max-width: 100%;
}

#container5{
background-color: #efefef;
font-family: system-ui;
font-size: larger;
padding: 200px;
line-height: 1.8;
}

a {
color: red;
}

</style>
<div id="container5">

<article>
    <h2>Hello Hovercards</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a href="https://badcat.com" title="Hovercard demo">BadCat</a> libero voluptas dicta voluptates nam iusto at dolore laboriosam tempore natus? <a href="https://google.com" title="Google Hovercard demo">Google</a> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, inventore.</p>
</article>

<script>
    // Add variables for each hovercard
    let hovercards = {
    "https://badcat.com": {
        "title": "BadCat Democard",
        "description": "Hovercard demo about the demo",
        "photo": "https://www.badcat.com/wp-content/uploads/web2022-fitzon4th.png"
    },
    "https://google.com": {
        "title": "Google Democard",
        "description": "Google Hovercard demo about the demo",
        "photo": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
    }
    };
    let article = document.getElementsByTagName("article");
    if (article) {
    article = article[0];
    }

    function hover(target_link) {
    let hovercard_data = hovercards[target_link.href.replace(/\/+$/, "")];
    if (hovercard_data) {
        let new_box = document.createElement("div");
        new_box.classList.add("hovercard");
        new_box.innerHTML =
        "<strong>" +
        hovercard_data["title"] +
        "</strong><p>" +
        hovercard_data["description"] +
        "</p>" +
        "<img src='" + hovercard_data["photo"] + "'>";
        new_box.style.top =
        window.scrollY + target_link.getBoundingClientRect().top + "px";
        new_box.style.left =
        window.scrollX + target_link.getBoundingClientRect().left + "px";
        new_box.id = "tooltip";
        document.body.appendChild(new_box);
    }
    }

    function unhover(target_link) {
    let active_hovercard = document.getElementById("tooltip");
    if (active_hovercard) {
        active_hovercard.parentNode.removeChild(active_hovercard);
    }
    }
    let links = article.getElementsByTagName("a");
    for (let i = 0; i < links.length; i++) {
    links[i].addEventListener("mouseover", function() {
        hover(this);
    });
    links[i].addEventListener("mouseout", function() {
        unhover(this);
    });
    // these handlers are so that the hovercard will appear/disappear
    // with keyboard actions
    links[i].addEventListener("focus", function() {
        hover(this);
    });
    links[i].addEventListener("blur", function() {
        unhover(this);
    });
    }
</script>

</div>

[/html]

[html]
<style>
*{
  box-sizing: border-box;
}

.boxes{
  width: 600px;
  height: 600px;
  top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  position: relative;
}

.box{
  background-color: #3e0858;
  background-image: url("https://media3.giphy.com/media/dZeZXsUsD7fd2JegxI/giphy.gif?cid=6c09b952dqbgqifnaf35f1aok0rnxkob2gvk2mska9072n0i&rid=giphy.gif&ct=s");
  background-repeat: no-repeat;
  background-size: 500px 500px;
  position: relative;
  height: 125px;
  width: 125px;
}

.box::after{
  content: "";
  background-color: #5a0b80;
  position: absolute;
  top: 8px;
  right: -15px;
  height: 100%;
  width: 15px;
  transform: skewY(45deg);
}

.box::before{
  content: "";
  background-color:#34064a;
  position: absolute;
  left: 8px;
  bottom: -15px;
  height: 15px;
  width: 100%;
  transform: skewX(45deg);
}

</style>
<div id="boxes" class="boxes">
  <div class="box" style="background-position: 0 0"></div>
  <div class="box" style="background-position: -125px 0"></div>
  <div class="box" style="background-position: -250px 0"></div>
  <div class="box" style="background-position: -375px 0"></div>
  <div class="box" style="background-position: 0 -125px"></div>
  <div class="box" style="background-position: -125px -125px"></div>
  <div class="box" style="background-position: -250px -125px"></div>
  <div class="box" style="background-position: -375px -125px"></div>
  <div class="box" style="background-position: 0 -250px"></div>
  <div class="box" style="background-position: -125px -250px"></div>
  <div class="box" style="background-position: -250px -250px"></div>
  <div class="box" style="background-position: -375px -250px"></div>
  <div class="box" style="background-position: 0 -375px"></div>
  <div class="box" style="background-position: -125px -375px"></div>
  <div class="box" style="background-position: -250px -375px"></div>
  <div class="box" style="background-position: -375px -375px"></div>
</div>
[/html]

[html]
<style>
.cont_corazon {
  position:relative;
  margin-top:100px;
}

.cont_corazon > h1 {
  font-family: 'Roboto';
font-weight:300; 
}
.cont_corazon > hr {
  width:300px; 
}

#rect3810,#rect3802,#rect3826,#rect3806,#rect3820,#rect3818,#rect3822,#rect3824  {
z-index:-5;
  position:relative;
   animation-name: mov_1;
    animation-duration: 200ms;
      animation-iteration-count: infinite;
animation-timing-function: ease-in-out;

}

#rect3808,#rect3828,#rect3812,#rect3814 {

  position:relative;
  animation-name: mov_1;
    animation-duration: 2s;
      animation-iteration-count: infinite;
animation-timing-function: ease-in;
}

#rect3804 {
  z-index:-5;
  position:relative;
/*   animation-name: mov_2;
    animation-duration: 2s;
      animation-iteration-count: infinite;
animation-timing-function: ease-in; */
}

@-webkit-keyframes mov_1 {
  from {
opacity:1;
    -webkit-transform: translate(4px,-1px);
    transform: translate(4px,-1px);
  }
  to {   
    -webkit-transform: translate(-5px,-1px);
    transform: translate(-5px,-1px);
opacity:0;
  }
}
@-o-keyframes mov_1 {
  from {
opacity:1;
    -webkit-transform: translate(4px,-1px);
    transform: translate(4px,-1px);
  }
  to {   
    -webkit-transform: translate(-5px,-1px);
    transform: translate(-5px,-1px);
opacity:0;
  }
}
@-moz-keyframes mov_1 {
from {
opacity:1;
    -webkit-transform: translate(4px,-1px);
    transform: translate(4px,-1px);
  }
  to {   
    -webkit-transform: translate(-5px,-1px);
    transform: translate(-5px,-1px);
opacity:0;
  }}
@keyframes mov_1 {
from {
opacity:1;
    -webkit-transform: translate(4px,-1px);
    transform: translate(4px,-1px);
  }
  to {   
    -webkit-transform: translate(-5px,-1px);
    transform: translate(-5px,-1px);
opacity:0;
  }
}

@-webkit-keyframes mov_2 {
  from {
opacity:1;
    -webkit-transform: translate(-4px,-1px);
    transform: translate(-4px,-1px);
  }
  to {   
    -webkit-transform: translate(-8px,-1px);
    transform: translate(-8px,-1px);

  }
}
@-o-keyframes mov_2 {
  from {
opacity:1;
    -webkit-transform: translate(-4px,-1px);
    transform: translate(-4px,-1px);
  }
  to {   
    -webkit-transform: translate(-8px,-1px);
    transform: translate(-8px,-1px);

  }
}
@-moz-keyframes mov_2 {
  from {
opacity:1;
    -webkit-transform: translate(-4px,-1px);
    transform: translate(-4px,-1px);
  }
  to {   
    -webkit-transform: translate(-8px,-1px);
    transform: translate(-8px,-1px);

  }
}
@keyframes mov_2 {
  from {
opacity:1;
    -webkit-transform: translate(-4px,-1px);
    transform: translate(-4px,-1px);
  }
  to {   
    -webkit-transform: translate(-8px,-1px);
    transform: translate(-8px,-1px);

  }
}

svg{
 
   position:relative;
  animation-name:   mov_heart;
  animation-duration: 1s;
      animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

@-webkit-keyframes mov_heart {
  0% {
   -webkit-transform: translate(0px,10px);
    transform: translate(0px,10px);
  }
50% {
   -webkit-transform: translate(0px,0px);
    transform: translate(0px,0px);
  }

  100% {   
    -webkit-transform: translate(0px,10px);
    transform: translate(0px,10px);
  }
}
@-o-keyframes mov_heart {
  0% {
   -webkit-transform: translate(0px,10px);
    transform: translate(0px,10px);
  }
50% {
   -webkit-transform: translate(0px,0px);
    transform: translate(0px,0px);
  }

  100% {   
    -webkit-transform: translate(0px,10px);
    transform: translate(0px,10px);
  }
}
@-moz-keyframes mov_heart {
  0% {
   -webkit-transform: translate(0px,10px);
    transform: translate(0px,10px);
  }
50% {
   -webkit-transform: translate(0px,0px);
    transform: translate(0px,0px);
  }

  100% {   
    -webkit-transform: translate(0px,10px);
    transform: translate(0px,10px);
  }
}
@keyframes mov_heart {
  0% {
   -webkit-transform: translate(0px,10px);
    transform: translate(0px,10px);
  }
50% {
   -webkit-transform: translate(0px,0px);
    transform: translate(0px,0px);
  }

  100% {   
    -webkit-transform: translate(0px,10px);
    transform: translate(0px,10px);
  }
}

</style>
<div class="cont_corazon">

<svg
   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"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="285"
   height="200"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   sodipodi:docname="corazon1.svg">
  <defs
     id="defs4">
    <inkscape:perspective
       sodipodi:type="inkscape:persp3d"
       inkscape:vp_x="331.11267 : 470.55503 : 1"
       inkscape:vp_y="-114.03555 : 993.47667 : 0"
       inkscape:vp_z="351.78171 : -213.14729 : 0"
       inkscape:persp3d-origin="673.2305 : 245.09276 : 1"
       id="perspective3832" />
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1"
     inkscape:cx="113.13962"
     inkscape:cy="121.70077"
     inkscape:document-units="px"
     inkscape:current-layer="g3014"
     showgrid="false"
     inkscape:window-width="1286"
     inkscape:window-height="622"
     inkscape:window-x="0"
     inkscape:window-y="376"
     inkscape:window-maximized="0" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Capa 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-852.36217)">
    <g
       style="display:block"
       id="g3014"
       transform="matrix(9.2997748,0,0,9.2997748,281.65476,176.12942)">
      <g
         id="favorite"
         style="fill:#ff2a2a"
         transform="matrix(0.86377488,0.50387791,-0.50387791,0.86377488,-15.607114,69.366951)">
        <path
           id="path3006"
           d="M 12,21.4 10.6,20 C 5.4,15.4 2,12.3 2,8.5 2,5.4 4.4,3 7.5,3 9.2,3 10.9,3.8 12,5.1 13.1,3.8 14.8,3 16.5,3 19.6,3 22,5.4 22,8.5 22,12.3 18.6,15.4 13.4,20 L 12,21.4 z"
           inkscape:connector-curvature="0"
           style="fill:#ff2a2a" />
      </g>
     
      <rect
         style="fill:#ff2a2a;fill-opacity:1;fill-rule:nonzero;stroke:none"
         id="rect3802"
         width="5.5461264"
         height="1.2834011"
         x="-18.125158"
         y="78.652931"
         ry="0.64170057"
         transform="matrix(0.99842403,0.05612006,-0.05612006,0.99842403,0,0)" />
      <rect
         ry="0.64170057"
         y="79.936333"
         x="-17.865423"
         height="1.2834011"
         width="5.5461264"
         id="rect3804"
         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
         transform="matrix(0.99842403,0.05612006,-0.05612006,0.99842403,0,0)" />
      <rect
         ry="0.64170057"
         y="81.189178"
         x="-16.70425"
         height="1.2834011"
         width="5.5461264"
         id="rect3806"
         style="fill:#ff2a2a;fill-opacity:1;fill-rule:nonzero;stroke:none"
         transform="matrix(0.99842403,0.05612006,-0.05612006,0.99842403,0,0)" />
      <rect
         style="fill:#ff2a2a;fill-opacity:1;fill-rule:nonzero;stroke:none"
         id="rect3808"
         width="2.2618349"
         height="1.2834011"
         x="-20.631451"
         y="78.622375"
         ry="0.64170057"
         transform="matrix(0.99842403,0.05612006,-0.05612006,0.99842403,0,0)" />
      <rect
         ry="0.64170057"
         y="78.589966"
         x="-25.879452"
         height="1.2834011"
         width="5.0358133"
         id="rect3810"
         style="fill:#ff2a2a;fill-opacity:1;fill-rule:nonzero;stroke:none"
         transform="matrix(0.99842403,0.05612006,-0.05612006,0.99842403,0,0)" />
      <rect
         style="fill:#ff2a2a;fill-opacity:1;fill-rule:nonzero;stroke:none"
         id="rect3812"
         width="5.5461264"
         height="1.2834011"
         x="-17.09318"
         y="87.844193"
         ry="0.64170057"
         transform="matrix(0.99842403,0.05612006,-0.05612006,0.99842403,0,0)" />
      <rect
         ry="0.64170057"
         y="90.350624"
         x="-15.148534"
         height="1.2834011"
         width="5.5461264"
         id="rect3814"
         style="fill:#ff2a2a;fill-opacity:1;fill-rule:nonzero;stroke:none"
         transform="matrix(0.99842403,0.05612006,-0.05612006,0.99842403,0,0)" />
      <rect
         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
         id="rect3816"
         width="5.5461264"
         height="1.2834011"
         x="-17.043888"
         y="89.140625"
         ry="0.64170057"
         transform="matrix(0.99842403,0.05612006,-0.05612006,0.99842403,0,0)" />
      <rect
         transform="matrix(0.99842403,0.05612006,-0.05612006,0.99842403,0,0)"
         ry="0.64170057"
         y="87.581421"
         x="-24.723297"
         height="1.2834011"
         width="2.2618349"
         id="rect3818"
         style="fill:#ff2a2a;fill-opacity:1;fill-rule:nonzero;stroke:none" />
      <rect
         transform="matrix(0.99842403,0.05612006,-0.05612006,0.99842403,0,0)"
         style="fill:#ff2a2a;fill-opacity:1;fill-rule:nonzero;stroke:none"
         id="rect3820"
         width="5.0358133"
         height="1.2834011"
         x="-22.31197"
         y="87.651573"
         ry="0.64170057" />
      <rect
         style="fill:#ff2a2a;fill-opacity:1;fill-rule:nonzero;stroke:none"
         id="rect3822"
         width="2.2618349"
         height="1.2834011"
         x="-18.035168"
         y="90.323357"
         ry="0.64170057"
         transform="matrix(0.99842403,0.05612006,-0.05612006,0.99842403,0,0)" />
      <rect
         ry="0.64170057"
         y="90.290947"
         x="-23.283165"
         height="1.2834011"
         width="5.0358133"
         id="rect3824"
         style="fill:#ff2a2a;fill-opacity:1;fill-rule:nonzero;stroke:none"
         transform="matrix(0.99842403,0.05612006,-0.05612006,0.99842403,0,0)" />
      <rect
         transform="matrix(0.99842403,0.05612006,-0.05612006,0.99842403,0,0)"
         ry="0.64170057"
         y="81.188286"
         x="-24.60672"
         height="1.2834011"
         width="2.2618349"
         id="rect3826"
         style="fill:#ff2a2a;fill-opacity:1;fill-rule:nonzero;stroke:none" />
      <rect
         transform="matrix(0.99842403,0.05612006,-0.05612006,0.99842403,0,0)"
         style="fill:#ff2a2a;fill-opacity:1;fill-rule:nonzero;stroke:none"
         id="rect3828"
         width="5.0358133"
         height="1.2834011"
         x="-22.072313"
         y="81.176163"
         ry="0.64170057" />
       <path
         sodipodi:type="arc"
         style="fill:#800000;fill-opacity:1;fill-rule:nonzero;stroke:none"
         id="path3018"
         sodipodi:cx="347.22763"
         sodipodi:cy="248.59453"
         sodipodi:rx="8.841444"
         sodipodi:ry="8.841444"
         d="m 356.06907,248.59453 a 8.841444,8.841444 0 1 1 -17.68288,0 8.841444,8.841444 0 1 1 17.68288,0 z"
         transform="matrix(0.09288127,0.05418173,-0.05418173,0.09288127,-30.934836,39.825796)" />
      <path
         transform="matrix(0.09288127,0.05418173,-0.05418173,0.09288127,-26.363112,42.480176)"
         d="m 356.06907,248.59453 a 8.841444,8.841444 0 1 1 -17.68288,0 8.841444,8.841444 0 1 1 17.68288,0 z"
         sodipodi:ry="8.841444"
         sodipodi:rx="8.841444"
         sodipodi:cy="248.59453"
         sodipodi:cx="347.22763"
         id="path3790"
         style="fill:#800000;fill-opacity:1;fill-rule:nonzero;stroke:none"
         sodipodi:type="arc" />
      <path
         transform="matrix(0.25331256,0.14776837,-0.14776837,0.25331256,-62.780156,-28.67167)"
         d="m 356.06907,248.59453 a 8.841444,8.841444 0 1 1 -17.68145,-0.15928"
         sodipodi:ry="8.841444"
         sodipodi:rx="8.841444"
         sodipodi:cy="248.59453"
         sodipodi:cx="347.22763"
         id="path3792"
         style="fill:#800000;fill-opacity:1;fill-rule:nonzero;stroke:none"
         sodipodi:type="arc"
         sodipodi:start="0"
         sodipodi:end="3.1596087"
         sodipodi:open="true" />

      <g
         id="g3943"
         transform="matrix(0.99690695,0.07859092,-0.07859092,0.99690695,-22.848116,72.882677)">
        <path
           sodipodi:nodetypes="ccccc"
           inkscape:connector-curvature="0"
           id="rect3924"
           d="m 15.487498,-0.92172966 c 2.959093,0.121571 5.441627,1.095173 7.47666,2.86885266 l -0.425097,0.556348 c -2.4782,-1.79746166 -4.531372,-2.48840266 -7.037575,-2.60571666 z"
           style="fill:#ffd42a;fill-opacity:1;stroke:none" />
        <path
           style="fill:#ffd42a;fill-opacity:1;stroke:none"
           d="M 22.502735,3.531372 C 19.543642,3.409801 17.124113,2.619965 15.089081,0.84628534 l 0.329933,-0.770753 C 17.897214,1.8729943 19.938778,2.597611 22.44498,2.714925 z"
           id="path3928"
           inkscape:connector-curvature="0"
           sodipodi:nodetypes="ccccc" />
        <path
           sodipodi:nodetypes="ccccc"
           inkscape:connector-curvature="0"
           id="rect3935"
           d="m 15.491279,-0.9218567 0.100733,0.82387004 c -0.188049,-0.003 -0.25282,0.07502 -0.156165,0.188037 -0.06678,0.07156 -0.280724,0.61439149 -0.34558,0.75841549 -1.182149,-1.08441001 -0.915368,-1.69656794 0.401012,-1.77032253 z"
           style="fill:#ffd42a;fill-opacity:1;fill-rule:nonzero;stroke:none" />
        <path
           sodipodi:nodetypes="ccccc"
           inkscape:connector-curvature="0"
           id="rect3938"
           d="m 22.964159,1.955525 c 0.678057,0.667502 0.448336,1.5161474 -0.472544,1.572514 l -0.04725,-0.811196 c 0.127279,-0.01981 0.167677,-0.09879 0.08179,-0.229522 z"
           style="fill:#ffd42a;fill-opacity:1;fill-rule:nonzero;stroke:none" />
      </g>
    </g>
  </g>

  </svg>
  <br />
  <br />
  <br />
<h1>HAPPY VALENTINES DAY !</h1>
<hr />
  <h1>FELIZ DIA DE SAN VALENTIN !</h1>
</div>

[/html]

[html]
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');
:root {
--bg1: url('https://i.ibb.co/dBLbrRV/bg1.jpg');
--bg2: url('https://i.ibb.co/Fb5jb3J/bg2.jpg');
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 45px;
  font-weight: 300;
  margin: 10px;
}

h2 span {
  font-size: 30px;
}

p {
  font-size: 20px;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.container > div {
  cursor: pointer;
  height: 210px;
  background-size: cover;
  background-attachment: fixed;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  transition: all 0.5s ease-in;
}

.container > div:hover {
  opacity: 0.7;
  transform: scale(0.98);
}

.container > div:nth-of-type(1) {
  grid-column: 1 / 3;
}

.container > div:nth-of-type(6) {
  grid-column: 3 / 5;
}

.container > div:nth-of-type(9) {
  grid-column: 3 / 5;
}

.container > div:nth-of-type(10) {
  grid-column: 1 / 3;
}

.bg1 {
  background: var(--bg1);
}

.bg2 {
  background: var(--bg2);
  color: #333;
}

</style>
<script>

</script>
<div class="container">
      <div class="bg1">
        <h2>16 <span>| 24</span></h2>
        <p>Goals Completed</p>
      </div>
      <div class="bg1">
        <h2><i class="fas fa-battery-three-quarters"></i></h2>
        <p>Respiration</p>
      </div>
      <div class="bg2">
        <h2><i class="fas fa-running"></i></h2>
        <p>Miles</p>
      </div>
      <div class="bg1">
        <h2>36 &deg;</h2>
        <p>Temperature</p>
      </div>
      <div class="bg1">
        <h2><i class="fas fa-bed"></i></h2>
        <p>Sleep Keep</p>
      </div>
      <div class="bg2">
        <h2>98 <span>bpm</span></h2>
        <p>Heart Rate</p>
      </div>
      <div class="bg1">
        <h2>170 <span>lbs</span></h2>
        <p>Weight</p>
      </div>
      <div class="bg1">
        <h2>28 <span>%</span></h2>
        <p>Fat Percentage</p>
      </div>
      <div class="bg2">
        <h2>118 <span>mgdl</span></h2>
        <p>Blood Glucose</p>
      </div>
      <div class="bg2">
        <h2>680 <span>kcal</span></h2>
        <p>AVG Consumption</p>
      </div>
      <div class="bg2">
        <h2><i class="fas fa-dumbbell"></i></h2>
        <p>Workouts</p>
      </div>
      <div class="bg2">
        <h2>85 <span>%</span></h2>
        <p>Body Hydration</p>
      </div>
    </div>
[/html]
[hideprofile]

[html]
<style>
.wrapper { width: 400px; margin: 100px auto; text-align: center; }
.fa-animated {
  position: relative;
  padding-top: 15px;
  padding-bottom: 15px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
  vertical-align: bottom;
  margin-left: 20px;
}
.fa-animated:hover {
  padding-top: 0px;
  padding-bottom: 30px;
}
.fa-animated::after {
  content : "";
  position: absolute;
  left: 0%;
  right: 0%;
  bottom: 0;
  height: 0px;
  width: 100%;
  border-bottom: 2px solid #d93a36;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-radius: 90px;
}
.fa-animated:hover::after {
  left: 20%;
  right: 20%;
  width: 60%;
  border-bottom: 1px solid #d93a36;
}
</style>
<div class="wrapper">
  <i class="fa fa-heart fa-5x fa-animated"></i>
  <i class="fa fa-cog fa-5x fa-animated"></i>
  <i class="fa fa-plug fa-5x fa-animated"></i>
  <i class="fa fa-umbrella fa-5x fa-animated"></i>
</div>
[/html]

[html]
<script>
const canvas = document.getElementById('canvas');
/**
* Generates random particles using canvas
*
* @class Particles
* @constructor
*/
function Particles(){
  //particle colors
  this.colors = [
    '255, 255, 255',
    '255, 99, 71',
    '19, 19, 19'
  ]
  //adds gradient to particles on true
  this.blurry = true;
  //adds white border
  this.border = false;
  //particle radius min/max
  this.minRadius = 10;
  this.maxRadius = 35;
  //particle opacity min/max
  this.minOpacity = .005;
  this.maxOpacity = .5;
  //particle speed min/max
  this.minSpeed = .05;
  this.maxSpeed = .5;
  //frames per second
  this.fps = 60;
  //number of particles
  this.numParticles = 75;
  //required canvas variables
  this.canvas = document.getElementById('canvas');
  this.ctx = this.canvas.getContext('2d');
}

/**
* Initializes everything
* @method init
*/
Particles.prototype.init = function(){
  this.render();
  this.createCircle();
}

/**
* generates random number between min and max values
* @param  {number} min value
* @param  {number} max malue
* @return {number} random number between min and max
* @method _rand
*/
Particles.prototype._rand = function(min, max){
  return Math.random() * (max - min) + min;
}

/**
* Sets canvas size and updates values on resize
* @method render
*/
Particles.prototype.render = function(){
  var self = this,
      wHeight = $(window).height(),
      wWidth = $(window).width();
 
  self.canvas.width = wWidth;
  self.canvas.height = wHeight;
 
  $(window).on('resize', self.render);
}

/**
* Randomly creates particle attributes
* @method createCircle
*/
Particles.prototype.createCircle = function(){
  var particle = [];

  for (var i = 0; i < this.numParticles; i++) {
    var self = this,
        color = self.colors[~~(self._rand(0, self.colors.length))];
   
    particle[i] = {
      radius    : self._rand(self.minRadius, self.maxRadius),
      xPos      : self._rand(0, canvas.width),
      yPos      : self._rand(0, canvas.height),
      xVelocity : self._rand(self.minSpeed, self.maxSpeed),
      yVelocity : self._rand(self.minSpeed, self.maxSpeed),
      color     : 'rgba(' + color + ',' + self._rand(self.minOpacity, self.maxOpacity) + ')'
    }
   
    //once values are determined, draw particle on canvas
    self.draw(particle, i);
  }
  //...and once drawn, animate the particle
  self.animate(particle);
}

/**
* Draws particles on canvas
* @param  {array} Particle array from createCircle method
* @param  {number} i value from createCircle method
* @method draw
*/
Particles.prototype.draw = function(particle, i){
  var self = this,
      ctx = self.ctx;
 
  if (self.blurry === true ) {
    //creates gradient if blurry === true
    var grd = ctx.createRadialGradient(particle[i].xPos, particle[i].yPos, particle[i].radius, particle[i].xPos, particle[i].yPos, particle[i].radius/1.25);
   
    grd.addColorStop(1.000, particle[i].color);
    grd.addColorStop(0.000, 'rgba(34, 34, 34, 0)');
    ctx.fillStyle = grd;
  } else {
    //otherwise sets to solid color w/ opacity value
    ctx.fillStyle = particle[i].color;
  }
 
  if (self.border === true) {
    ctx.strokeStyle = '#fff';
    ctx.stroke();
  }
 
  ctx.beginPath();
  ctx.arc(particle[i].xPos, particle[i].yPos, particle[i].radius, 0, 2 * Math.PI, false);
  ctx.fill();
}

/**
* Animates particles
* @param  {array} particle value from createCircle & draw methods
* @method animate
*/
Particles.prototype.animate = function(particle){
  var self = this,
          ctx = self.ctx;
 
  setInterval(function(){
    //clears canvas
    self.clearCanvas();
    //then redraws particles in new positions based on velocity
    for (var i = 0; i < self.numParticles; i++) {
      particle[i].xPos += particle[i].xVelocity;
      particle[i].yPos -= particle[i].yVelocity;
     
      //if particle goes off screen call reset method to place it offscreen to the left/bottom
      if (particle[i].xPos > self.canvas.width + particle[i].radius || particle[i].yPos > self.canvas.height + particle[i].radius) {
        self.resetParticle(particle, i);
      } else {
        self.draw(particle, i);
      }
    } 
  }, 1000/self.fps);
}

/**
* Resets position of particle when it goes off screen
* @param  {array} particle value from createCircle & draw methods
* @param  {number} i value from createCircle method
* @method resetParticle
*/
Particles.prototype.resetParticle = function(particle, i){
  var self = this;
 
  var random = self._rand(0, 1);
 
  if (random > .5) {
    // 50% chance particle comes from left side of window...
    particle[i].xPos = -particle[i].radius;
    particle[i].yPos = self._rand(0, canvas.height);
  } else {
    //... or bottom of window
    particle[i].xPos = self._rand(0, canvas.width);
    particle[i].yPos = canvas.height + particle[i].radius;   
  }
  //redraw particle with new values
  self.draw(particle, i);
}

/**
* Clears canvas between animation frames
* @method clearCanvas
*/
Particles.prototype.clearCanvas = function(){
  this.ctx.clearRect(0, 0, canvas.width, canvas.height);
}

// go go go!
var particle = new Particles().init();

</script>
<style>
canvas {
  width: 100%;
  height: 100%;
}
</style>
<canvas id="canvas" width="100" height="100"></canvas>
[/html]