SVG Group
✨ Jabont
<html> <head> <title>Let's Start </title> <style> body{ background:#333; margin:1em; font-family:sans-serif; color:white; } svg{ background:#eee; } </style> </head> <body> <svg viewBox="0 0 100 100" id="theSVG"> <rect fill="red" id="sq1" width="10" x="calc(40 - 10)" height="10" y="calc(70 - 10)"/> <line x1="40" y1="0" x2="40" y2="100" stroke-width=".1" stroke="black"/> <line x1="0" y1="70" x2="100" y2="70" stroke-width=".1" stroke="black"/> <!-- Grid --> <defs> <pattern id="grid" viewBox="0,0,10,10" width="1%" height="1%"> <rect fill="#0001" width="1" height="10" x="1" y="0"/> <rect fill="#0001" width="1" height="10" x="3" y="0"/> <rect fill="#0001" width="1" height="10" x="5" y="0"/> <rect fill="#0001" width="1" height="10" x="7" y="0"/> <rect fill="#0001" width="1" height="10" x="9" y="0"/> <rect fill="#0001" width="10" height="1" x="0" y="1"/> <rect fill="#0001" width="10" height="1" x="0" y="3"/> <rect fill="#0001" width="10" height="1" x="0" y="5"/> <rect fill="#0001" width="10" height="1" x="0" y="7"/> <rect fill="#0001" width="10" height="1" x="0" y="9"/> <path d="M0 0 h10 L9 1 h-8 v8 L0 10 z" fill="#ff05"/> <path d="M10 10 h-10 L1 9 h8 v-8 L10 0 z" fill="#0f05"/> <rect fill="#0002" width="10" height=".1" x="0" y="9.9"/> <rect fill="#0002" width="10" height=".1" x="0" y="0"/> <rect fill="#0002" height="10" width=".1" y="0" x="9.9"/> <rect fill="#0002" height="10" width=".1" y="0" x="0"/> </pattern> </defs> <rect fill="url(#grid)" width="1000" height="1000" x="0" y="0" style="opacity:.5"/> </svg> <h2> A = <span id="labelA">10</span> </h2> <input type="range" min="1" max="40" value="10" oninput="changeA(parseInt(this.value))"/> <script> function changeA(v){ labelA.innerText = v; sq1.setAttribute('width',v) sq1.setAttribute('height',v) sq1.setAttribute('x',`calc(40 - ${v})`) sq1.setAttribute('y',`calc(70 - ${v})`) } </script> </body> </html>