js fire animation adapted for teaching purposes

body, #prev, #next {
    height: 100%;
    box-sizing: border-box;

display: flex;
    flex-direction: column;
    justify-content: center;

display: -webkit-flex;
    -webkit-flex-direction: column;
    -webkit-justify-content: center;
}

#prev, #next {
    position: absolute;
    top: 0;
    color: #d1d1d1;
    font-size: 70px;
    text-decoration: none;
    padding: 20px;
}

#prev {
    left: 0;
}

#next {
    right: 0;
}

svg {
    margin: auto;
}

@font-face {
    font-family: 'FontAwesome';
    src: url('/animations/fonts/fontawesome-webfont.eot?v=4.2.0');
    src: url('/animations/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('/animations/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('/animations/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('/animations/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fa-twitter:before {
    content: "\f099";
}
.fa-github:before {
    content: "\f09b";
}
.fa-th:before {
    content: "\f00a";
}

footer {
    text-align: center;
    margin-bottom: 25px;
}

a {
    color: #d1d1d1;
    text-decoration: none;
    padding: 10px;
}

</style>

noise.seed(Math.random());

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .style("background", "#d1d1d1");

var scale = d3.scale.ordinal()
    .domain(d3.range(-n / 2, n / 2 + 1))
    .rangePoints([0, width], 1.3);

var data = [];
for (var x = -n / 2; x <= n / 2; x++) {
    for (var y = -n / 2; y <= n / 2; y++) {
        data.push({x: x, y: y});
    }
}

var lines = svg.selectAll("path")
    .data(data)
    .enter().append("path")
    .attr("fill", "#111")
    .attr("d", "M-6,2,L12,0L-6,-2Z");

d3.timer(function(t) {
    lines.attr("transform", function(d) {
        var r = 360 * noise.simplex3(d.x / 60, d.y / 60, t / 7000);
        return "translate(" + [scale(d.x), scale(d.y)] + ")rotate(" + r + ")";
    });
});

</script>

https://d3js.org/d3.v3.min.js