JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


	
<body>

<div id= "roadcontent"></div>

</body>

JavaScript

$(document).ready(function () {
			
			r1();
		
		 });
		 
		function r1()
		{
			var rc = "";
			var x = 0 ;
			var y = 0 ;
			var c1 = "";
			var c2 = "";
			
			for( i = 0 ; i < 100 ; i++ )
			{
			 	
				y = (i%6)*36 ;
				
				z = Math.floor((Math.random() * 10) + 1)
				
				if( z%3==0){c1 = "red"; c2="莊";}
				if( z%3==1){c1 = "blue";c2="閒";}
				if( z%3==2){c1 = "green";c2="和";}
				
	
				rc +="<svg  id = 'svg1'  style='left: "+ x +"px; top:"+ y +"px; position: absolute ; z-index: 999;visibility:visible'>";
				rc +="<circle cx='20' cy='20' r='18' stroke='green' stroke-width='0' fill="+ c1 +" />";
				rc+="<text style='fill:white;'font-size='24' font-family='SimHei' x='9' y='28' width='0' height='0'>"+c2+"</text>";
				rc+="</svg>";
				
				if( (i+1)%6 == 0 )x+=36;
			}
			
			$('#roadcontent').append(rc);

		}