The Rainbow Brush
HTML
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700,100|Montserrat:400,700|Catamaran:400,100' rel='stylesheet' type='text/css'>
<h1>CLICK & DRAG</h1>
<div id="container"></div>
<div id="reset">RESET</div>
CSS
*,
*::after,
*::before {
box-sizing: border-box;
transform-style: preserve-3d;
}
body {
perspective: 2000px;
height: 100vh;
width: 100vw;
margin: 0;
background: radial-gradient(circle at 50% 50%, #fff 0%, #7EC0EE 200%);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
font-family: 'Roboto';
font-weight: 300
}
h1{
font-familt:'Catamaran';
font-weight:100;
text-align:center
}
#container{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.postit{
position:absolute;
width:100px;
height:100px;
border-radius:5%;
transform:rotate(0deg);
margin:-50px 0 0 -50px;
}
#reset{
position:absolute;
bottom:3px;right:3px;
height:30px;
line-height:30px;
padding:0 10px;
color:#fff;
background:rgba(0,0,0,0.5);
z-index:100;
cursor:pointer;
}
JAVASCRIPT
var paint = false,
counter = 0;
$('#container')
.mousedown(function(){
paint = true;
})
.mouseup(function(){
paint = false;
})
.mousemove(function(e){
if(paint){
W = $('#container').width();
H = $('#container').height();
x = e.pageX;
y = e.pageY;
X = Math.floor(x/W * 100);
Y = Math.floor(y/H * 100);
r = Math.floor(Math.random() * 90);
counter = (counter < 360) ? counter+1 : 0;
h = counter;
//h = Math.floor((X+Y) * 360 / 200);
$('#container').append('<div class="postit" style="top:'+y+'px;left:'+x+'px;background:hsla('+h+',100%,50%,0.1);transform:rotate('+r+'deg)"></div>');
}
});
$('#reset').click(function(){
$("#container").empty();
});
