d3 | 1 triangle repeated

using simple shape (triangle) to create a more complex shape

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    
    <link href="//npmcdn.com/basscss@8.0.2/css/basscss.min.css" rel="stylesheet">
    <style>
        body { 
            font-family: Consolas, monaco, monospace; 
            background: #130C0E;
            color: #FFF;
        }
        path {
            fill: none;
            stroke: #FDBB30;
            stroke-width: 3px;
            stroke-opacity: 0.5;
        }
        span {
            letter-spacing: 3px;
            color: #FDBB30;
        }
        input[type="range"] {
            -webkit-appearance:none;
            width: 100%;
            height:2px;
            background: #FFF;
            background-position:center;
            background-repeat:no-repeat;
            margin: auto;
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance:none;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            background: #130C0E;
            position:relative;
            border: 3px solid #FFF;
            z-index: 2;
            cursor: pointer;
        }
        input:focus {
            outline: none;
        }
    </style>
</head>
<body>
    <header class="fixed top-0 left-0 ml1 mt1">
        <p class="caps">Number of triangles: <span id="slider-amount">45</span></p>
        <input type="range" id="triangle-amount" value="45">
    </header>

</body>
</html>

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