JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <title>Animation with D3</title>
</head>
<body>
    <svg width="800" height="1000">
      
      <defs>
      <pattern id="checkicon" width="1" height="1" patternUnits="objectBoundingBox"><image x="3" y="0" width="24" height="24" xlink:href="https://i2.wp.com/nahbnow.com/wp-content/uploads/2018/08/iStock-692279620.jpg"></image></pattern>
    <pattern id="blicon" width="1" height="1" patternUnits="objectBoundingBox"><image x="10" y="10" width="40" height="40" xlink:href="https://pngimg.com/uploads/biohazard/biohazard_PNG49.png"></image></pattern>
    
    <pattern id="wlicon" width="1" height="1" patternUnits="objectBoundingBox"><image x="20" y="20" width="45" height="45" xlink:href="https://png.pngtree.com/svg/20170711/be060c269c.svg"></image></pattern>
    
    <pattern id="cwlicon" width="1" height="1" patternUnits="objectBoundingBox"><image x="20" y="20" width="45" height="45" xlink:href="https://image.flaticon.com/icons/png/512/295/295618.png"></image></pattern>
    
    
    
    <pattern id="ukicon" width="1" height="1" patternUnits="objectBoundingBox"><image x="10" y="10" width="40" height="40" xlink:href="https://www.wpclipart.com/signs_symbol/words/punctuation/question/question_mark_yellow.png"></image></pattern>
    
  </defs>
    </svg>
    <a href="javascript:;" id="go" >GO</a>
</body>
</html>

SCSS

html, body, #vis {
    height: 100%;
    margin: 0;
}
svg{
      border: 1px solid #fff;
      margin:10px;
}
.processBox{
   fill: #ffffff;
    stroke: #0070c9;
    stroke-width: 2px;
    stroke-opacity: 0.7;
    rx: 2px;
}
rect{
      fill: #ffffff;
    stroke: #0070c9;
    stroke-width: 3px;
    stroke-opacity: 0.7;
    rx: 2px;
}
text{
  font-size:14px;
}
.pipeCover{
    stroke: #befc77;
    stroke-width: 12px;
    stroke-opacity: 0.2;
}
.pipe{
      stroke: #4CAF50;
    stroke-width: 2px;
}



.image-wrapper{
	.flare{
		position:absolute;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		top:50%;
		transform:translate(0, -50%) scale(1);
		background:#2196F3;
		border-radius:300px;
		z-index:0;
		
	}
	
	.f-anim1{
		transform:translate(0, -50%) scale(0);
		animation:flareScale 1.8s .5s infinite ease-out;
	}
	
	.f-anim2{
		transform:translate(0, -50%) scale(0);
		animation:flareScale 1.8s infinite ease-out;
	}
	
	.f-anim3{
		transform:translate(0, -50%) scale(0);
		animation:flareScaleBig 1.8s infinite ease-out;
	}
}

#radar{
	width:100%;
	height:100%;

}

.bg{
	
	width:100%;
	height:100%;
}

.bullet-opacity-1{
		animation-name: opacity;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

.bullet-opacity-2{
		animation-name: opacity;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

.bullet-opacity-3{
		animation-name: opacity;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

.bullet-opacity-4{
		animation-name: opacity;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

.line-1{
		animation-name: rotate;
    animation-duration: 9.3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.line-2{
	animation-name: rotate;
    animation-duration: 15s;
   ...

JavaScript

var width = 500;
var height = 800;

var margin = {
    top: 20,
    left: 50,
    bottom: 100,
    right: 50,
    height: 150,
    width: 500
};
    var numCircles = 50;
var radius = 5;
var speed = 0.5;

var svg = d3.select('svg')
    .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

width = width - margin.left - margin.right;
height = margin.height;
var timer;

var processBox = [
 { x: 120, y: 50, width: 150, height: 45 }
];
var factor = 2;
let radarSize = 100;
	var radiusList = [
		(radarSize * 0.68) / 2,
		(radarSize * 0.88) / 2,
		(radarSize * 0.48) / 2
	];

function addRadar(){
let radargroup = svg.append("g")
.attr('transform', "translate(200,300)");

	let rgline1 = radargroup.append("g")
  .attr('class', 'line-1');
  
  rgline1.append("circle")
  .attr('r',radiusList[0])
  .attr('cx', 0)
  .attr('cy', 0)
  .attr('fill', "none")
  .attr('stroke', "#273c91")
  .attr('stroke-width', "1")
  .attr('stroke-opacity', ".2");
  
 	let rgline2 = radargroup.append("g")
  .attr('class', 'line-2')
  
  rgline2.append("circle")
  .attr('r',radiusList[1])
  .attr('cx', 0)
  .attr('cy', 0)
  .attr('fill', "none")
  .attr('stroke', "#273c91")
  .attr('stroke-width', "1")
  .attr('stroke-opacity', ".2");
  
  let rgline3 = radargroup.append("g")
  .attr('class', 'line-3');
  
  rgline3.append("circle")
  .attr('r',radiusList[2])
  .attr('cx', 0)
  .attr('cy', 0)
  .attr('fill', "none")
  .attr('stroke', "#273c91")
  .attr('stroke-width', "1")
  .attr('stroke-opacity', ".2");

createBulletRadar(rgline1,radiusList[0]);
createBulletRadar(rgline2,radiusList[1],true);
createBulletRadar(rgline3,radiusList[2],true);

/* radargroup.append("circle")
.attr("cx", 0)     // x position of the first end of the line
  .attr("cy", 0)
  .attr('r',3)
  .attr("fill","#273c91") */

radargroup.append('line')
 .attr('class',"radarpointer")
.attr("x1", 0)     // x position of the first end of the line
    .attr("y1", 0)      // y position of the first end...