MooD Edge Logo

Animates the MooD Edge Logo rendering

by IPWright83

HTML

<svg width="500" height="500">
    <g>
        <g transform="translate(0,600)scale(1,-1)">
            <!-- Circle -->
            <path class="draw circle" d="m 97.44,308.52 c 0,90.53 73.42,163.92 163.98,163.92 90.56,0 163.98,-73.39 163.98,-163.92 0,-90.53 -73.42,-163.92 -163.98,-163.92 -90.56,0 -163.98,73.39 -163.98,163.92 z" />
            <!-- M -->
            <path class="draw purple" d="m 328.2,398.88 c 0,9.41 7.63,17.04 17.04,17.04 l 0,0 c 9.41,0 17.04,-7.63 17.04,-17.04 l 0,-181.92 c 0,-9.41 -7.63,-17.04 -17.04,-17.04 l 0,0 c -9.41,0 -17.04,7.63 -17.04,17.04 l 0,181.92 z" />
            <!-- o -->
            <path class="draw blue" d="m 163.24,389.27 c -5.02,7.94 -2.65,18.44 5.29,23.46 l 0,0 c 7.94,5.02 18.45,2.65 23.46,-5.29 l 83.1,-131.53 c 5.02,-7.94 2.65,-18.44 -5.29,-23.46 l 0,0 c -7.94,-5.02 -18.44,-2.65 -23.46,5.3 l -83.1,131.52 z" />
            <!-- blue o -->
            <path class="draw yellow" d="m 160.08,398.94 c 0,9.38 7.6,16.98 16.98,16.98 l 0,0 c 9.38,0 16.98,-7.6 16.98,-16.98 l 0,-182.04 c 0,-9.38 -7.6,-16.98 -16.98,-16.98 l 0,0 c -9.38,0 -16.98,7.6 -16.98,16.98 l 0,182.04 z" />
            <!-- D -->
            <path class="draw green" d="m 330.95,410.24 c 4.99,7.96 15.49,10.36 23.45,5.37 l 0,0 c 7.95,-4.99 10.36,-15.49 5.37,-23.45 L 275.35,257.62 c -4.99,-7.95 -15.49,-10.36 -23.44,-5.37 l 0,0 c -7.96,5 -10.36,15.49 -5.37,23.45 l 84.41,134.54 z" />
        </g>
    </g>
</svg>

CSS

.fade {
    fill: #232a29;
    opacity: 0;
}


.draw {
    fill: #232a29;
    stroke: #232a29;
    stroke-width: 2px;
    fill-rule:nonzero;
    fill-opacity:0;
}

.draw.circle {
    fill: none;
    stroke-width: 5px;
    stroke: #000000;
}

.draw.purple {
    stroke: #8c6ac8;
    fill: #8c6ac8;
}

.draw.blue {
    fill: #26c6da;
    stroke: #26c6da;
}
.draw.yellow {
  fill: #ffb300;
  stroke: #ffb300
}
.draw.green {
  fill: #54f399;
  stroke: #54f399;
}

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