D3 Examples - d3 | 1 triangle repeated

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- https://www.basscss.com/ -->
    <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>
​
    <svg id="vis" width="960" height="500"></svg>
​
<script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src=".script-compiled.js" charset="utf-8"></script>
<script>
    // set a min and max to to the range slider
    document.getElementById('triangle-amount').max = '50';
    document.getElementById('triangle-amount').min = '1';
    // when the input range changes re-render
    d3.select('#triangle-amount').on('input', function() {
        d3.select('#slider-amount').text(+this.value)
        render(+this.value);
    })
</script>
​
</body>
</html>
​
​
​
    