--- --- <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <g fill="none" fill-rule="evenodd" stroke="#206bc4" stroke-width=".025" opacity=".5"> <rect x="4" y="2" width="16" height="20" rx="3" stroke-dasharray=".5 .5"/> <rect x="2" y="4" width="20" height="16" rx="3" stroke-dasharray=".5 .5"/> <rect x="3" y="3" width="18" height="18" rx="3" /> <circle cx="12" cy="12" r="5" /> <circle cx="12" cy="12" r="10" /> <line x1="0" y1="12" x2="24" y2="12" /> <line x1="12" y1="0" x2="12" y2="24" /> </g> <g font-family="system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"> {% for i in (1..24) %} <g fill="#ccc" font-size=".3"> <text x="0" y="{{ i | plus: 0.35 }}" >{{ i }}</text> <text x="{{ i | plus: 0.1 }}" y=".25" >{{ i }}</text> </g> <g stroke="#666" stroke-width=".01"> <line x1="0" y1="{{ i }}" x2="24" y2="{{ i }}" /> <line x1="{{ i }}" y1="0" x2="{{ i }}" y2="24" /> </g> {% endfor %} </g> </svg>