kumamon

kumon

by nekosmash

HTML

<script type="text/javascript" src="http://dl.dropbox.com/u/63305355/raphael-min.js"></script>
<div id="canvas">
    <div class="text">
        REMOVE
        <br>
        <div id="result"></div>
    </div>
</div>

CSS

body,html
{
    height:100%;
    margin:0;
}

#canvas 
{
    height:99%;
    background:#fff;
    text-align:center;
}

.text{
    letter-spacing: 20px;
    color:#fff;
    font-size:150%;
    width:60%;
    height:60%;
    position:absolute;
    left:20%;
    top:40%;
    z-index:1;
}
#result{
    font-size:60%;
    letter-spacing: 5px;
}
input{
    padding:3px;
}

JavaScript

var opa=1;

window.onload = function(){
    var paper = Raphael(0,0,"100%","100%");
    paper.ellipse(122,50,58,40)
        .attr({fill:"#000",opacity:opa});
    paper.ellipse(122,43,55,40)
        .attr({fill:"#000",opacity:opa});
    paper.ellipse(122,77,60,65)
        .attr({fill:"#000",opacity:opa});  
    paper.ellipse(172,55,14,14)
        .attr({fill:"#f00",
               stroke:"none",opacity:opa});
    paper.ellipse(72,55,14,14)
        .attr({fill:"#f00",
               stroke:"none",opacity:opa});     
    paper.circle(72,15,10)
        .attr({fill:"#fff",
               "stroke-width":5,opacity:opa});
    paper.circle(172,15,10)
        .attr({fill:"#fff",
               "stroke-width":5,opacity:opa});
    paper.circle(94,34,11)
        .attr({fill:"#fff",opacity:opa});
    paper.circle(148,34,11)
        .attr({fill:"#fff",opacity:opa});
    paper.ellipse(121,62,30,22)
        .attr({fill:"#fff",opacity:opa});
    paper.ellipse(94,35,2,4)
        .attr({fill:"#000",
               stroke:"none",opacity:opa});
    paper.ellipse(148,35,2,4)
        .attr({fill:"#000",
               stroke:"none",opacity:1});
    paper.path("m79,260c40,-28 52,-17 79,0c-25,-4 -37,-14 -79,0z").attr({"fill":"#fff",transform:"t-25,-235,s0.25",stroke:"none"});
    paper.path("m79,260c40,-28 52,-17 79,0c-25,-4 -37,-14 -79,0z").attr({"fill":"#fff",transform:"t27,-235,s0.25",stroke:"none"});

    paper.path("m73,63c10,-20 111,-20 124,0c13,20 -51.33334,79.66696 -68,77.00023c-16.66666,-2.66673 -66,-57.00023 -56,-77.00023z").attr({"fill":"#000",transform:"t-14,-45,s0.13",stroke:"none"});
    
    paper.path("m104,125.73647c-12.33333,-5.55344 57,-14.73647 89,-14.73647c32,0 131,7.31285 108,16.73647c-23,9.42362 -57,33.84724 -102,35.27087c-45,1.42363 -82.66667,-31.71742 -95,-37.27087z").attr({"fill":"#000",transform:"t-83,-70,s0.25",stroke:"none"});
    
}