50 line emblem

50-line-emblem.markdown

50 line emblem

A Pen by anon987654321 on CodePen.

License.

index.html

<canvas></canvas>

script.js

(function(){
    var a,b,c,r,r1,canvas,ctx,p;
    canvas = document.getElementsByTagName('canvas')[0];
    ctx = canvas.getContext('2d');
    canvas.width=canvas.height=400;
    ctx.fillStyle="rgb(255,255,255)";
    ctx.fillRect(0,0,canvas.width,canvas.height);
    r1=Math.PI/12;
    p=[];
    for(a=1;a<4;a++)p[a-1]=[Math.sin(r1*a)*55,Math.cos(r1*a)*55];
    ctx.fillStyle="hsl(244,60%,30%)";
    r=0;
    x=y=300;
    for(c=0;c<3;c++){
        a=byo(0,x,y,r-r1*2);
        a=byo(0,a[0][0],a[0][1],r);
        byo(0,a[0][0],a[0][1],r+r1*2);
        b=byo(1,a[2][0],a[2][1],r+r1);
        byo(0,b[2][0],b[2][1],r);
        a=byo(1,a[1][0],a[1][1],r-r1,1);
        a=byo(2,a[1][0],a[1][1],r);
        byo(1,a[2][0],a[2][1],r-r1);
        a=byo(1,a[1][0],a[1][1],r+r1,1);
        b=byo(0,a[1][0],a[1][1],r);
        byo(0,b[2][0],b[2][1],r-r1*2-Math.PI,1);
        a=byo(2,a[2][0],a[2][1],r,1);
        byo(1,a[1][0],a[1][1],r-r1);
        a=byo(1,a[2][0],a[2][1],r-r1-Math.PI/2);
        a=byo(2,a[0][0],a[0][1],r-r1*2);
        x=a[1][0];
        y=a[1][1];
        r-=Math.PI*2/3;
    }
    function byo(ban,x,y,r,gy){
        var a,b,c,px,py,w,h,t2,t3,t4;
        w=p[ban][0];
        h=p[ban][1];
        px=Math.cos(r)*0.8;
        py=Math.sin(r)*0.8;
        a=gy?-1:1;
        t2=[x+w*px*a,y+w*py*a];
        t3=[x+h*py,y-h*px];
        t4=[t2[0]+h*py,t2[1]-h*px];
        ctx.beginPath();
        ctx.lineTo(x,y);
        ctx.lineTo(t2[0],t2[1]);
        ctx.lineTo(t4[0],t4[1]);
        ctx.lineTo(t3[0],t3[1]);
        ctx.fill();
        return [t2,t3,t4];
    }
})();

style.css

* {
  margin: 0;
  padding: 0;
  border: 0;
  background: #000 
}

canvas {
position: relative; top:50%;
left:50%;
margin-left:-50vmin;
width:100vmin;
height:100vmin;
overflow:hidden;
}