Built with blockbuilder.org
xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style></head><body> <p>Click me to change my mood!</p> <svg width='960' height='500'> <circle cx='200' cy='200' r='100' fill='yellow' /> <circle cx='180' cy='180' r='10' /> <circle id='wink' cx='220' cy='180' r='10' /><!-- <path d='M150,220 C200,245 200,245 250,220' stroke='#000000' fill='transparent' stroke-width='10' /> --> <path id='mouth' d='M150,220 C200,200 200,200 250,220' stroke='#000000' fill='transparent' stroke-width='10' /> </svg> </body><script> var happy = 'M150,220 C200,245 200,245 250,220' var sad = 'M150,220 C200,200 200,200 250,220' var svg = d3.select('svg'); var mouth = d3.select('#mouth'); svg.on('click', function() { if(mouth.attr('d') == happy) { mouth.attr('d', sad); } else { mouth.attr('d', happy); } });</script> https://d3js.org/d3.v4.min.js
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js