SVG JTB
✨ Jabont
<html> <head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <title>Jabont </title> <style> body{ background:#eee; font-family:sans-serif; display:flex; justify-content:center; align-items:center; margin:0; text-align:center; } svg{ background:yellow; /* width:90%; */ min-width:100%; position:absolute; left:0; top:0; } </style> </head> <body> <svg viewBox="0 -22 30 30"> <g id="grid"> <g id="line" stroke-width=".2" stroke="#0002"> <svg y="0"><path d="M0,0 h30"/></svg> <svg y="-1"><path d="M0,0 h30"/></svg> <svg y="-2"><path d="M0,0 h30"/></svg> <svg y="-3"><path d="M0,0 h30"/></svg> <svg y="-4"><path d="M0,0 h30"/></svg> <svg y="-5"><path d="M0,0 h30"/></svg> <svg y="-6"><path d="M0,0 h30"/></svg> <svg y="-7"><path d="M0,0 h30"/></svg> <svg y="-8"><path d="M0,0 h30"/></svg> <svg y="-9"><path d="M0,0 h30"/></svg> <svg y="-10"><path d="M0,0 h30"/></svg> <svg y="-11"><path d="M0,0 h30"/></svg> <svg y="-12"><path d="M0,0 h30"/></svg> <svg y="-13"><path d="M0,0 h30"/></svg> <svg y="-14"><path d="M0,0 h30"/></svg> <svg x="0" y="-14"><path d="M0,0 v14"/></svg> <svg x="1" y="-14"><path d="M0,0 v14"/></svg> <svg x="2" y="-14"><path d="M0,0 v14"/></svg> <svg x="3" y="-14"><path d="M0,0 v14"/></svg> <svg x="4" y="-14"><path d="M0,0 v14"/></svg> <svg x="5" y="-14"><path d="M0,0 v14"/></svg> <svg x="6" y="-14"><path d="M0,0 v14"/></svg> <svg x="7" y="-14"><path d="M0,0 v14"/></svg> <svg x="8" y="-14"><path d="M0,0 v14"/></svg> <svg x="9" y="-14"><path d="M0,0 v14"/></svg> <svg x="10" y="-14"><path d="M0,0 v14"/></svg> <svg x="11" y="-14"><path d="M0,0 v14"/></svg> <svg x="12" y="-14"><path d="M0,0 v14"/></svg> <svg x="13" y="-14"><path d="M0,0 v14"/></svg> <svg x="14" y="-14"><path d="M0,0 v14"/></svg> <svg x="15" y="-14"><path d="M0,0 v14"/></svg> <svg x="16" y="-14"><path d="M0,0 v14"/></svg> <svg x="17" y="-14"><path d="M0,0 v14"/></svg> <svg x="18" y="-14"><path d="M0,0 v14"/></svg> <svg x="19" y="-14"><path d="M0,0 v14"/></svg> <svg x="20" y="-14"><path d="M0,0 v14"/></svg> <svg x="21" y="-14"><path d="M0,0 v14"/></svg> <svg x="22" y="-14"><path d="M0,0 v14"/></svg> <svg x="23" y="-14"><path d="M0,0 v14"/></svg> <svg x="24" y="-14"><path d="M0,0 v14"/></svg> <svg x="25" y="-14"><path d="M0,0 v14"/></svg> <svg x="26" y="-14"><path d="M0,0 v14"/></svg> <svg x="27" y="-14"><path d="M0,0 v14"/></svg> <svg x="28" y="-14"><path d="M0,0 v14"/></svg> <svg x="29" y="-14"><path d="M0,0 v14"/></svg> <svg x="30" y="-14"><path d="M0,0 v14"/></svg> </g> <circle id="center" r=".25" x="0" y="0"/> <path id="pink" d="M6-7 L12-12 L24-2" stroke-width="1" fill="#f089"/> <!-- <circle id="" r="10" cx="24" cy="-2" fill="#f808"/> --> <!-- <circle id="" r="7" cx="12" cy="-12" fill="#f808"/> --> <!-- <circle id="" r="7" cx="6" cy="-7" fill="#f808"/> --> <circle id="" r="13" cx="24" cy="-2" fill="#f808"/> <circle id="" r="7" cx="6" cy="-7" fill="#f808"/> <circle id="cyan" r=".2" cx="7" cy="-11.9" fill="#0ff8"/> <circle id="cyan" r=".2" cx="12.72" cy="-5.04" fill="#0ff8"/> <path id="cyan" d="M7-11.9 L 12.72 -5.041" stroke-width=".1" stroke="#f089"/> <circle id="red" r=".25" cx="6" cy="-7" fill="#f00"/> <circle id="green" r=".25" cx="12" cy="-12" fill="#0f0"/> <circle id="blue" r=".25" cx="24" cy="-2" fill="#00f"/> <!-- <circle id="" r=".25" cx="6" cy="-7" fill="#f00"/> --> <!-- <circle id="" r=".25" cx="12" cy="-12" fill="#0f0"/> --> <!-- <circle id="" r=".25" cx="24" cy="-2" fill="#00f"/> --> </g> </svg> </body> </html>