JSFiddle - React, Tailwind, and code Playground

by Rajan Paneru

HTML

<script src="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-rc.5/html2canvas.min.js"></script>
<div id="dwnld">
  <div class="grey">
    <div class="inner"></div>
  </div>
  <div class="rotate">
    <div class="empty-inner"></div>
    <div class="color-outer">
      <div class="color">
        <div class="inner"></div>
      </div>
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

#dwnld {
  background: #fff;
  /* height: 75px; */
  /* overflow-y: hidden; */
}

.grey {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background-color: #ccc;
}

.inner {
  height: 130px;
  width: 130px;
  border-radius: 50%;
  background-color: #fff;
  position: relative;
  top: 10px;
  left: 10px;
}

.color-outer {
  height: 75px;
  overflow-y: hidden;
  transform: rotate(180deg) scaleX(-1);
  position: relative;
  top: -75px;
}

.color {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background-color: red;

  /* position: absolute; */
  /* top: 75px; */
  /* z-index: 1; */
  /* position: absolute; */
  /* left: 0; */
  /* top: 0; */
}

.empty-inner {
  height: 75px;
  width: 150px;
  position: relative;
  top: -75px;
}

.rotate {
  width: 150px;
  height: 150px;
  position: absolute:
  top: -150p;
}

JavaScript

/* html2canvas(dwnld, {
  allowTaint: true
}).then(canvas => {
  var download = document.createElement("a");
  var date = new Date().toISOString().split('T')[0];
  download.setAttribute('download', 'RANE-Composite-RiskIndex-Full-Page-' + date + '.png');
  var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  download.setAttribute("href", image);
  download.click();
})
 */