Css3 Cock
Something that got its life out of an inside joke...
HTML
<div class="dick">
<div class="bollock left"></div>
<div class="bollock"></div>
<div class="shaft">
<div class="hl">
</div>
<div class="hr">
</div>
</div>
</div>
<div class="stage">
</div>
CSS
.stage{
position: absolute;
top: 70px;
left: 100px;
font-family: arial,helvetica,sans-serif;
font-size: 20px;
}
.dick{
position: absolute;
top: 300px;
left: 300px;
width: 200px;
height: 200px;
-moz-transform:50% top;
}
.bollock{
width:50px;
height: 50px;
position: absolute;
border-radius: 50px;;
border-right: 2px solid #000000;
border-top: 2px solid #000000;
background: #ffffff;
z-index: 1;
}
.left{
left:-50px;
border-right:none;
border-left: 2px solid #000000;
border-top: 2px solid #000000;
}
.shaft{
border-top: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
width:40px;
height: 150px;
position: absolute;
border-radius: 50px;;
left:-20px;
top:-125px;
-moz-transform-origin:50% bottom;
-webkit-transform-origin:50% bottom;
transform-origin:50% bottom;
}
.hl{
width:19px;
height: 18px;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
float: left;
border-radius: 50px 0px 0px 0px;
}
.hr{
width:19px;
height: 18px;
border-bottom: 2px solid #000000;
float: left;
border-radius: 0px 50px 0px 0px;
}
JavaScript
var shaft = $(".shaft");
var dick = $(".dick");
Number.prototype.map = function (istart, istop, ostart, ostop) {
return ostart + (ostop - ostart) * ((this - istart) / (istop - istart));
};
Plot = function ( stage ) {
this.setDimensions = function( x, y ) {
this.elm.style.width = x + 'px';
this.elm.style.height = y + 'px';
this.width = x;
this.height = y;
};
this.position = function( x, y ) {
var xoffset = arguments[2] ? 0 : this.width / 2;
var yoffset = arguments[2] ? 0 : this.height / 2;
this.elm.style.left = (x - xoffset) + 'px';
this.elm.style.top = (y - yoffset) + 'px';
this.x = x;
this.y = y;
};
this.setBackground = function( col ) {
this.elm.style.background = col;
};
this.kill = function() {
stage.removeChild( this.elm );
};
this.rotate = function( str ) {
this.elm.style.webkitTransform = this.elm.style.MozTransform =
this.elm.style.OTransform = this.elm.style.transform =
'rotate(' + str + ')';
};
this.content = function( content ) {
this.elm.innerHTML = content;
};
this.round = function( round ) {
this.elm.style.borderRadius = round ? '50%/50%' : '';
};
this.elm = document.createElement( 'div' );
this.elm.style.position = 'absolute';
stage.appendChild( this.elm );
};
var stage = document.querySelector('.stage'),
message = ' David Cogram You Rule '.toUpperCase(),
plots = message.length,
increase = Math.PI * 2 / plots,
angle = -Math.PI,
turnangle = 0,
x = 0,
y = 0,
plotcache = [];
for( var i = 0; i < plots; i++ ) {
var p = new Plot( stage );
p.content(...