棋盘

使用渐变创建棋子

<svg>
  <defs>
    <linearGradient id="white" x1="0" y1="0" x2="1" y2="1">
      <stop offset="5%" stop-color="#fff"/>
      <stop offset="95%" stop-color="#666"/>
    </linearGradient>
    <linearGradient id="black" x1="0" y1="0" x2="1" y2="1">
      <stop offset="5%" stop-color="#aaa"/>
      <stop offset="95%" stop-color="#000"/>
    </linearGradient>
  </defs>
  <circle cx="25" cy="25" r="20" fill="url(#white)" fill-opacity="0.8"/>
  <circle cx="125" cy="25" r="20" fill="url(#black)" fill-opacity="0.8"/>
</svg>

使用 pattern 创建棋盘

<svg width="220" height="220">
  <defs>
    <pattern id="chessBoard" x="0" y="0" width=".25" height=".25">
      <path d="M0 20 h 40 M20 0 v 40" stroke="black" fill="none"/>
    </pattern> 
  </defs>
   <rect fill="url(#chessBoard)" stroke="none" x="0" y="0" width="160" height="160"/>
</svg>

合并到一起

<svg width="220" height="220">
  <defs>
    <linearGradient id="white" x1="0" y1="0" x2="1" y2="1">
      <stop offset="5%" stop-color="#fff"/>
      <stop offset="95%" stop-color="#666"/>
    </linearGradient>
    <linearGradient id="black" x1="0" y1="0" x2="1" y2="1">
      <stop offset="5%" stop-color="#aaa"/>
      <stop offset="95%" stop-color="#000"/>
    </linearGradient>
    <pattern id="chessBoard" x="0" y="0" width=".25" height=".25">
      <path d="M0 20 h 40 M20 0 v 40" stroke="black" fill="none"/>
    </pattern> 
  </defs>

  <rect fill="url(#chessBoard)" stroke="none" x="0" y="0" width="160" height="160"/>
  <circle cx="20" cy="20" r="20" fill="url(#white)" />
  <circle cx="100" cy="20" r="20" fill="url(#black)" />
  <circle cx="100" cy="100" r="20" fill="url(#white)" />
</svg>

加点动效

<svg width="220" height="220">
  <defs>
    <linearGradient id="white" x1="0" y1="0" x2="1" y2="1">
      <stop offset="5%" stop-color="#fff"/>
      <stop offset="95%" stop-color="#666"/>
    </linearGradient>
    <linearGradient id="black" x1="0" y1="0" x2="1" y2="1">
      <stop offset="5%" stop-color="#aaa"/>
      <stop offset="95%" stop-color="#000"/>
    </linearGradient>
    <pattern id="chessBoard" x="0" y="0" width=".25" height=".25">
      <path d="M0 20 h 40 M20 0 v 40" stroke="black" fill="none"/>
    </pattern> 
  </defs>

  <rect fill="url(#chessBoard)" stroke="none" x="0" y="0" width="160" height="160"/>
  <circle id="chess1" cx="20" cy="20" r="20" fill="url(#white)" />
  <circle id="chess2" cx="100" cy="20" r="20" fill="url(#black)" />
  <circle cx="100" cy="100" r="20" fill="url(#white)" />

  <style>

    #chess1 {
      animation: 3s  moveBottom infinite;
    }
    #chess2 {
      animation: 3s  moveLeft infinite;
    }
    @keyframes moveLeft {
      0% {
        cx: 100px;
      }
      40% {
        cx: 20px;
      }

      60% {
        cx: 20px;
      }
      100 {
        cx: 100px;
      }
    }

    @keyframes moveBottom {
      0% {
        cy: 20px;
      }
      40% {
        cy: 100px;
      }

      60% {
        cy: 100px;
      }
      100% {
        cy: 20px;
      }
    }

  </style>
</svg>

效果预览