Powered By MooD

Animates the Powered By MooD Logo rendering

by IPWright83

HTML

<svg width="500" height="500">
    <g>
        <g transform="translate(0,300)scale(0.1,-0.1)">
            <!-- M -->
            <path class="draw" d="m 2435.48,1816.67 c 0,43.29 -33.31,77.7 -72.14,77.7 -25.49,0 -47.74,-12.22 -59.94,-34.41 l -285.21,-532.79 c -2.23,-3.32 -6.68,-5.55 -11.13,-5.55 -4.41,0 -8.87,2.23 -11.1,5.55 l -285.24,532.79 c -11.1,21.09 -34.38,34.41 -59.94,34.41 -38.82,0 -72.14,-34.41 -72.14,-76.61 v -664.83 c 57.72,0 106.56,45.49 106.56,103.21 v 425.11 l 231.98,-432.86 c 27.74,-51.05 64.35,-62.18 89.88,-62.18 25.59,0 62.18,11.13 89.9,62.18 231.98,432.86 231.98,432.86 231.98,432.86 v -425.11 c 0,-56.59 48.82,-103.21 106.54,-103.21 0,663.74 0,663.74 0,663.74" />
            <!-- o -->
            <path class="draw" d="m 2708.75,1735.14 h 197.34 c 111.65,0 167.44,-55.82 167.44,-167.43 v -247.98 c 0,-110.61 -55.79,-165.36 -167.44,-165.36 h -197.34 c -110.56,0 -166.34,55.82 -166.34,167.39 v 245.95 c 0,111.61 55.78,167.43 166.34,167.43 z m -60.37,-158.64 v -263.49 c 0,-28.89 23.4,-52.29 52.26,-52.29 h 214.64 c 28.87,0 52.25,23.4 52.25,52.29 v 263.49 c 0,28.88 -23.38,52.3 -52.25,52.3 h -214.64 c -28.86,0 -52.26,-23.42 -52.26,-52.3" />
            <!-- blue o -->
            <path class="draw o" d="m 3336.59,1735.14 h 197.37 c 111.6,0 167.41,-55.82 167.41,-167.43 v -247.98 c 0,-110.61 -55.81,-165.36 -167.41,-165.36 h -197.37 c -110.57,0 -166.38,55.82 -166.38,167.39 v 245.95 c 0,111.61 55.81,167.43 166.38,167.43 z m -60.37,-158.64 v -263.49 c 0,-28.89 23.36,-52.29 52.27,-52.29 h 214.61 c 28.85,0 52.24,23.4 52.24,52.29 v 263.49 c 0,28.88 -23.39,52.3 -52.24,52.3 h -214.61 c -28.91,0 -52.27,-23.42 -52.27,-52.3 " />
            <!-- D -->
            <path class="draw" d="m 4431.51,1522.68 c 0,-148.07 -121.93,-264.54 -279.31,-264.54 h -227.27 c -6.67,0 -12.22,5.65 -12.22,12.44 v 505.3 c 0,6.82 5.55,12.43 12.22,12.43 227.27,0 227.27,1.14 227.27,1.14 75.35,0 146.29,-28.26 199.52,-79.12 52.11,-49.75 79.79,-116.4 79.79,-187.65 z m 104.22,0 c 0,100.62...

CSS

.fade {
    fill: #232a29;
    opacity: 0;
}
.draw {
    fill: #232a29;
    stroke: #232a29;
    stroke-width: 10px;
    fill-rule:nonzero;
    fill-opacity:0;
}
.draw.o {
    fill: #df3e57;
    stroke: #df3e57;
}

JavaScript

d3.selectAll(".draw")
    .style("stroke-dasharray", function () {
    return this.getTotalLength();
})
    .style("stroke-dashoffset", function () {
    return this.getTotalLength();
})
    .transition()
    .duration(3000)
    .style("stroke-dashoffset", 0)
    .transition()
    .duration(1500)
    .style("fill-opacity", 1);

d3.selectAll(".fade")
    .transition()
    .delay(3000)
    .duration(1500)
    .style("opacity", 1);