JSFiddle - React, Tailwind, and code Playground

by Wagner Viana

HTML

<canvas id="menu-nav-second" width="50" height="50"></canvas>
<canvas id="menu-nav-first" width="50" height="50"></canvas>

CSS

#menu-nav-first{
	width:50px;
	height:50px;  
	float:left;	
	margin-top: 10px;
  margin-left: -50px;
	
}
#menu-nav-first:hover{
	margin-top: 12px;
}

#menu-nav-second{
	width:50px;
	height:50px;
	float:left;
	margin-top: 10px;			
}
#menu-nav-second:hover{
	margin-top: 8px;
}

JavaScript

var diamondFirst = function (x, y){
	var canvas = document.getElementById("menu-nav-first");
	var context = canvas.getContext("2d");
	
	context.beginPath();
    context.moveTo(25, 10);   
    context.lineTo(40, 20);
    context.lineTo(25, 30);
    context.lineTo(10, 20);
    
    context.lineWidth = 0;
    context.fillStyle = "#483852";     
    
    context.closePath();
        
    context.fill();           
    
}

var diamondSecond = function(x, y){
	
	var canvas = document.getElementById("menu-nav-second");
	var context = canvas.getContext("2d");
	
	context.beginPath();
    context.moveTo(25, 15);   
    context.lineTo(40, 25);
    context.lineTo(25, 35);
    context.lineTo(10, 25);     
    
    context.lineWidth = 0;
    context.fillStyle = "#F2673D";     
    
    context.closePath(); 
    
    context.fill();    
}
diamondFirst();
diamondSecond();