Powered By MooD

Animates the Powered By MooD Logo rendering

by IPWright83

HTML

<svg width="500" height="500">
  <g>
    <!-- M -->
   <!--  <path class="draw" style="fill:#e2eacf;stroke-width:0.26458335" d="m 73.184919,151.65871 c -0.24472,-2.01765 -1.311406,-5.17401 -2.302448,-6.81302 -1.08519,-1.79472 -3.740483,-4.46849 -5.514039,-5.55241 -1.81801,-1.1111 -4.904536,-2.15855 -7.075065,-2.40101 l -1.653646,-0.18473 v -2.47936 -2.47937 h 1.173328 c 0.64533,0 2.025865,0.17934 3.067855,0.39853 7.277811,1.53093 13.199787,6.51843 15.974269,13.45354 0.757816,1.89424 1.480382,5.15296 1.480382,6.67641 v 0.90277 H 75.8525 73.369444 Z m 16.792304,-0.0315 c 0,-0.85407 -0.177562,-2.57106 -0.394582,-3.81554 -2.434698,-13.9616 -13.311816,-24.84757 -27.266181,-27.28839 -1.303196,-0.22795 -3.113588,-0.41484 -4.023093,-0.4153 l -1.653646,-8.5e-4 v -2.65202 -2.65202 l 2.182813,0.15877 c 14.961585,1.08831 27.484296,9.9768 33.34243,23.66611 1.582987,3.69912 2.488973,7.58338 2.97765,12.76614 l 0.168394,1.78594 H 92.644114 89.977223 Z M 106.693,149.54204 c -1.23874,-14.23649 -7.671596,-26.43293 -18.586091,-35.23849 -7.576529,-6.11257 -16.481243,-9.759 -26.495822,-10.84987 -1.413093,-0.15393 -3.109733,-0.27987 -3.770313,-0.27987 H 56.639721 V 92.458186 81.742561 h 35.58646 35.586459 v 35.718749 35.71875 H 117.4111 107.00955 Z m 16.88631,-9.72344 v -8.59896 h -8.06979 c -5.50329,0 -8.0698,0.0891 -8.0698,0.2802 0,0.15411 0.0936,0.22238 0.20789,0.15172 0.11434,-0.0707 0.21719,0.0711 0.22857,0.31511 0.0114,0.24398 0.5189,1.90279 1.12783,3.68624 1.1515,3.3725 2.22082,8.00357 2.54326,11.01438 l 0.18743,1.75027 h 5.92231 5.9223 z m 0,-22.35729 v -8.73125 h -8.59896 -8.59896 v 8.73125 8.73125 h 8.59896 8.59896 z m -22.3132,-8.64306 c -0.0542,-0.0542 -2.742549,-0.0664 -5.974136,-0.0272 l -5.875613,0.0713 1.398474,1.05834 c 2.153957,1.63006 6.796887,6.20546 8.697654,8.57115 l 1.709521,2.12768 0.0713,-5.85137 c 0.0392,-3.21825 0.027,-5.89571 -0.0272,-5.9499 z m 0.0882,-13.714231 v -8.598958 h -8.731254 -8.73125 v 8.598958 8.598961 h 8.73125 8.731254 z m 22.225,0 v -8.598958...

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);