SVG Logo

by nirmaljpatel

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
    <defs>
        <!-- Arc paths for texts. The value for "d" below is dummy and is overridden by configuration specified in JS -->
        <path id="txtHdr" d="M-134 -134A180 180 0 0 1 134 -134" fill="none" stroke="red" />
        <path id="txt1" d="M-120 0A120 120 0 0 0 120 0" fill="none" stroke="red" />
        <path id="txt12" d="M-120 0A120 120 0 0 0 120 0" fill="none" stroke="red" />
        <path id="txt2" d="M-120 0A120 120 0 0 0 120 0" fill="none" stroke="red" />
        <path id="txt3" d="M-120 0A120 120 0 0 0 120 0" fill="none" stroke="red" />
        <path id="txt4" d="M-120 0A120 120 0 0 0 120 0" fill="none" stroke="red" />
    </defs>
    <g transform="translate(200,200)">
        <!-- Circular background: -->
        <circle id="circle" x="0" y="0" r="200" fill="#B0B0B0" stroke="none" />
        <circle x="0" y="0" r="155" fill="#F0F0F0" stroke="none" stroke-width="4" />
       
        <!-- Wedges: -->
        <path id="wedge1" d="M200,200 L20,200 A180,180 0 0,1 44.1,110 z" fill="#A02020" stroke="none" stroke-width="0" />
        <path id="wedge2" d="M200,200 L20,200 A180,180 0 0,1 44.1,110 z" fill="#D86820" stroke="none" stroke-width="0" />
        <path id="wedge3" d="M200,200 L20,200 A180,180 0 0,1 44.1,110 z" fill="#D85868" stroke="none" stroke-width="0" />
        <path id="wedge4" d="M200,200 L20,200 A180,180 0 0,1 44.1,110 z" fill="#602020" stroke="none" stroke-width="0" />
        
        <!-- Center Circle -->
        <circle x="0" y="0" r="70" fill="#706850" stroke="#F0F0F0" stroke-width="10" />
        
        <!-- Text manipulation starts here: -->
        <text font-size="18" font-family="Georgia" font-weight="bold" font-style="italic" fill="white">
            <textPath xlink:href="#txtHdr" font-size="20" startOffset="50%" text-anchor="middle" dominant-baseline="central" fill="#484848">The PwC Professional</textPath>
        </text>
       ...

CSS

#wedge1, #wedge2, #wedge3, #wedge4, a {
   cursor:pointer;
}

JavaScript

document.getElementById("txtHdr").setAttribute("d", makeArc(0, 0, 175, (180 + 40), (270 + 50), true));

document.getElementById("txt1").setAttribute("d", makeArc(0, 0, 115, (90), (0), false));
document.getElementById("txt12").setAttribute("d", makeSubArc(0, 0, 115, 20, (90), (0), false));
document.getElementById("txt2").setAttribute("d", makeArc(0, 0, 115, (180), (90), false));
document.getElementById("txt3").setAttribute("d", makeArc(0, 0, 115, (180), (270), true));
document.getElementById("txt4").setAttribute("d", makeArc(0, 0, 115, (270), (360), true));

var distBtwnWedges = 2;
document.getElementById("wedge1").setAttribute("d", makeWedge(0, 0, 140, (0+distBtwnWedges), (90-distBtwnWedges), true));
document.getElementById("wedge2").setAttribute("d", makeWedge(0, 0, 140, (90+distBtwnWedges), (180-distBtwnWedges), true));
document.getElementById("wedge3").setAttribute("d", makeWedge(0, 0, 140, (180+distBtwnWedges), (270-distBtwnWedges), true));
document.getElementById("wedge4").setAttribute("d", makeWedge(0, 0, 140, (270+distBtwnWedges), (360-distBtwnWedges), true));

//These dont work :(
document.getElementById("wedge1").addEventListener("click", clickHdlr);
document.getElementById("wedge2").addEventListener("click", clickHdlr);
document.getElementById("wedge3").addEventListener("click", clickHdlr);
document.getElementById("wedge4").addEventListener("click", clickHdlr);

//This makes only the textpaths clickable...
$("a").click(clickHdlr);

var rememberTimeout;
function clickHdlr(event) {
    event.preventDefault();
    var elem = document.getElementById("msgClick");
    elem.innerHTML = event.target.innerHTML + " clicked...";
    clearTimeout(rememberTimeout);
    rememberTimeout = setTimeout(function(){
        elem.innerHTML="";
    }, 1500)
}
function makeSubArc(x, y, radius, yDelta, startAngle, endAngle, clockwise) {
    return makeArc(x, y, radius + yDelta, startAngle, endAngle, clockwise);
}
function makeArc(x, y, radius, startAngle, endAngle, clockwise)...