SVG

Drop files here...	開啟舊檔 (SVG):	另存新檔 (SVG):

<?xml version="1.0" encoding="utf-8"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
  height="512" width="512" viewBox="0 0 512 512">

<rect width="512" height="512" stroke="red" fill="rgba(255,255,255,0.95)" opacity="0.95" ></rect>

<text x="2" y="12" font-size="12" text-anchor="start" fill="red">0</text>
  <path d="M256  64 H0 H512" stroke="lightgray" fill="white"></path>
  <text x="2" y="68" font-size="12" text-anchor="start" fill="red">64</text>
  <path d="M256 128 H0 H512" stroke="lightgray" fill="white"></path>
  <text x="2" y="132" font-size="12" text-anchor="start" fill="red">128</text>
  <path d="M256 192 H0 H512" stroke="lightgray" fill="white"></path>
  <text x="2" y="196" font-size="12" text-anchor="start" fill="red">192</text>
  <path d="M256 256 H0 H512" stroke="lightgray" fill="white"></path>
  <text x="2" y="260" font-size="12" text-anchor="start" fill="red">256</text>
  <path d="M256 320 H0 H512" stroke="lightgray" fill="white"></path>
  <text x="2" y="324" font-size="12" text-anchor="start" fill="red">320</text>
  <path d="M256 384 H0 H512" stroke="lightgray" fill="white"></path>
  <text x="2" y="388" font-size="12" text-anchor="start" fill="red">384</text>
  <path d="M256 448 H0 H512" stroke="lightgray" fill="white"></path>
  <text x="2" y="452" font-size="12" text-anchor="start" fill="red">448</text>
  <text x="2" y="510" font-size="12" text-anchor="start" fill="red">512</text>

<path d="M64  0 V512" stroke="lightgray" fill="white"></path>
  <text x="58" y="12" font-size="12" text-anchor="start" fill="red">64</text>
  <path d="M128  0 V512" stroke="lightgray" fill="white"></path>
  <text x="118" y="12" font-size="12" text-anchor="start" fill="red">128</text>
  <path d="M195  0 V512" stroke="lightgray" fill="white"></path>
  <text x="186" y="12" font-size="12" text-anchor="start" fill="red">192</text>
  <path d="M256  0 V512" stroke="lightgray" fill="white"></path>
  <text x="246" y="12" font-size="12" text-anchor="start" fill="red">256</text>
  <path d="M320  0 V512" stroke="lightgray" fill="white"></path>
  <text x="310" y="12" font-size="12" text-anchor="start" fill="red">320</text>
  <path d="M384  0 V512" stroke="lightgray" fill="white"></path>
  <text x="374" y="12" font-size="12" text-anchor="start" fill="red">384</text>
  <path d="M448  0 V512" stroke="lightgray" fill="white"></path>
  <text x="438" y="12" font-size="12" text-anchor="start" fill="red">448</text>
  <text x="492" y="12" font-size="12" text-anchor="start" fill="red">512</text>

<path d="M256 256 V270 V242 M256 256 H270 H242" stroke="black" fill="white"></path>
  <text x="254" y="250" font-size="16" text-anchor="middle" fill="red">(256, 256)</text>

<ellipse fill="#77DD47" stroke="#246614" stroke-width="5" cx="192" cy="256" rx="128" ry="64" opacity="0.2"/>
  <ellipse fill="#47DD77" stroke="#146624" stroke-width="5" cx="320" cy="256" rx="128" ry="64" opacity="0.2"/>

<path d="M256 200 A128 64, 0, 0, 1, 256 312z" stroke-width="10" stroke="#F00" fill="none" opacity="0.3"/>

<text x="254" y="180" font-size="16" text-anchor="middle" fill="red">(256, 200)</text>
  <circle id="c1" cx="256" cy="200" r="1" stroke="red" fill="none">
    <animate attributeName="r" to="10" dur="2s" repeatCount="indefinite"/>
  </circle>

<text x="254" y="332" font-size="16" text-anchor="middle" fill="red">(256, 312)</text>
  <circle id="c2" cx="256" cy="312" r="1" stroke="red" fill="none">
    <animate attributeName="r" to="10" dur="2s" repeatCount="indefinite"/>
  </circle>

<circle cx="0" cy="0" r="1" stroke="blue" fill="none">
    <animateMotion dur="6s" path="M256 200 A128 64, 0, 0, 1, 256 312z" repeatCount="indefinite" rotate="auto"/>
    <animate attributeName="r" to="15" dur="6s" repeatCount="indefinite"/>
  </circle>
</svg>