JSFiddle - React, Tailwind, and code Playground

by IPWright83

HTML

<svg width="500" height="500">
    <g>
        <g transform="scale(2,2)translate(-200,-300)">
            <path class="front draw" d="m 278.86358,335.82901 21.66316,-7.60461 0.10274,44.60325 32.94195,-14.22445 0,29.83041 -33.21429,14.28571 0,102.14286 -20.71428,8.21429 0,-101.78572 -32.85715,13.57143 -0.75761,-29.49492 33.06635,-13.65437 z" />
            <!-- Tops -->
            <path class="top fade" d="m 268.8382,331.18397 22.64421,-8.20423 8.39286,4.46429 -21.43383,7.58184 z"  />
            <path class="top fade left-side" d="m 267.67267,377.84342 -31.51785,13.57142 10.26785,3.75 31.69644,-13.125 z"/>
            <path class="top fade right-side" d="m 300.80684,364.70772 23.4375,-10.04465 8.57143,3.21429 -32.09822,13.97321 z" />     
            <!-- Sides -->
            <path class="side fade top-side" d="m 278.00136,335.55481 -10.0325,-3.77878 0.17857,45.33547 10.05138,3.97005 z" />
            <path class="side fade bottom-side" d="m 269.75997,416.50957 -0.1046,92.89676 9.24239,3.78063 -0.12627,-100.75389 z" />
            <path class="side fade bar-side" d="m 235.52982,392.17311 -0.17857,27.94642 10.44642,4.82143 -0.62499,-29.28572 z" />
            
        </g>
    </g>
</svg>

CSS

svg {
    background: #f8981d;
}

.front {
    stroke: #f0f0f0;
    fill: #f0f0f0;
}

.top {
    stroke: #f0f0f0;
    stroke-opacity: 0.9;
    fill: #f0f0f0;
    fill-opacity: 0.9;
}

.side {
    stroke: #f0f0f0;
    stroke-opacity: 0.7;
    fill: #f0f0f0;
    fill-opacity: 0.7;
}

.fade {
    opacity: 0;
}

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

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