JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v2.js"></script>
<div class="widget"><input type="range" value="0" min="0" max="360" id="rotation_value" />
    <div>Rotation: <span id="rotation_label">0</span> degrees</div></div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 
    <linearGradient id="top_surface_2_gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="100%" gradientTransform="rotate(0 0.5 0.5)">
    <stop  offset="0" style="stop-color:#000"/>
    <stop  offset="1" style="stop-color:#fff"/>
</linearGradient>
<polygon id="top_surface_1" fill="url(#top_surface_2_gradient)" points="137.145,41.204 68.572,0 0,41.204 68.572,82.396"/>
<polygon id="top_surface_2" fill="url(#top_surface_2_gradient)" points="205.788,215.557 137.215,174.354 0.078,256.629 68.649,297.823"/>
</svg>

CSS

.widget {
  margin: 20px 20px 0 20px;
}

JavaScript

var slider = document.getElementById("rotation_value");
var label = document.getElementById("rotation_label");
var gradient = document.getElementById("top_surface_2_gradient");
var polygon = document.getElementById("top_surface_2");



slider.onchange = function(){
  gradient.setAttribute("gradientTransform", "rotate("+ (slider.value) + " 0.5 0.5)");
  label.innerHTML = slider.value;
}