<!doctype html>
<html lang="fr">
<head>
<style>
html,body{
height:100%;
margin:0;
}
body{
overflow:hidden;
font-family:monospace;
user-select: none;
}
#div1{
position:fixed;
top:10px;
left:10px;
width:100px;
height:auto;
}
#div2{
position:fixed;
bottom:10px;
right:10px;
width:auto;
height:100px;
border:solid 1px #000;
padding:5px;
}
#svg1{
width:100%;
height:100%;
}
#table1{
width:100%;
height:100%;
}
#td7{
background-color:#ffaa7f;
}
#td8{
background-color:#ff6b6b;
}
#td9{
background-color:#ff95c2;
}
td{
border:solid 1px #fff;
}
td:active{
border:solid 1px #000;
}
</style>
</head>
<body>
<svg id="svg1">
<circle cx="25" cy="25" r="10" fill="#b27fff"/>
<circle cx="50" cy="25" r="10" fill="#7f86ff"/>
<circle cx="75" cy="25" r="10" fill="#7fb8ff"/>
<circle cx="25" cy="50" r="10" fill="#7fefff"/>
<circle cx="50" cy="50" r="10" fill="#afff7f"/>
<circle cx="75" cy="50" r="10" fill="#fffa7f"/>
<circle cx="25" cy="25" r="10" fill="#b27fff"/>
<circle cx="50" cy="25" r="10" fill="#7f86ff"/>
<circle cx="75" cy="25" r="10" fill="#7fb8ff"/>
<circle cx="50%" cy="50%" r="100" fill="#fff" stroke="#000" stroke-width="2"/>
</svg>
<script>
var svg1=document.getElementById("svg1");
var color="#fff";
</script>
</body>
</html>
