JSFiddle - React, Tailwind, and code Playground

by Chinmay Pendharkar

HTML

<h1>Static SVG</h1>
<svg id="boo" width="200" height="200">

<!--transforming the group of shapes so that the origin is at the center of the svg image-->
<g transform="translate(100,100)">
<defs>
    <!-- Define the shapes here once -->
    <polygon points="0,-60 10,-50 0,-55 -10,-50" 
             class="inner-arrow" id="inner-arrow" />
    <polygon points="0,-80 10,-70 0,-75 -10,-70" 
             class="middle-arrow" id="middle-arrow" />
    <polygon points="0,-100 10,-90 0,-95 -10,-90" 
             class="outer-arrow" id="outer-arrow" />
    <polygon points="40,50 50,50 50,40 60,60" 
             class="longer-arrow" id="longer-arrow" />
    <rect x="-100" y="-100" width="200" height="200" 
             class="background" id="background"/>
    <rect x="-40" y="-40" rx="5" ry="5" width="80" height="80"
             class="inner-square" id="inner-square"/> 
    <ellipse cx="0" cy="0" rx="20" ry="40"
             class="elliptical" id="elliptical"/>  
</defs>



  <!--This is effectively the background-->
  <use xlink:href="#background" />
  
  <!--Inner rounded rectangle-->
  <use xlink:href="#inner-square" />
  
  <!-- the inner short arrows-->
  <use xlink:href="#inner-arrow" />
  <use xlink:href="#inner-arrow" transform="rotate(90)" />
  <use xlink:href="#inner-arrow" transform="rotate(180)" />
  <use xlink:href="#inner-arrow" transform="rotate(270)" />
  
  <!--Middle short arrows-->
  <use xlink:href="#middle-arrow" />
  <use xlink:href="#middle-arrow" transform="rotate(90)" />
  <use xlink:href="#middle-arrow" transform="rotate(180)" />
  <use xlink:href="#middle-arrow" transform="rotate(270)" />

  <!--Outer-most short arrows-->
  <use xlink:href="#outer-arrow" />
  <use xlink:href="#outer-arrow" transform="rotate(90)" />
  <use xlink:href="#outer-arrow" transform="rotate(180)" />
  <use xlink:href="#outer-arrow" transform="rotate(270)" />

  <!--Longer Arrows positioned diagonally from origin-->
  <use xlink:href="#longer-arrow" />
  <use...

CSS

polygon {
    stroke-width: 1;
}
#inner-arrow {
    fill:black;
    stroke:lime;
}
#middle-arrow {
    fill: red;
    stroke: black;
}
#outer-arrow {
    fill: lime;
    stroke: black;
}
#longer-arrow {
    fill:yellow;
    stroke:black;
}
#background {
    fill:grey;
}
#inner-square {
    fill:black;
}
#elliptical {
    fill:white;
}

JavaScript

function rotatex() {
    var innerArrow = document.getElementById("boo");
    innerArrow.setAttribute("transform", "rotate(45)");
}