Rope Tic Toe

admin1234
Feb 07, 2026 6
Live Preview

Live Editor

<svg width="320" height="320" viewBox="0 0 300 300">

  <!-- ROPE DEFINITIONS -->
  <defs>
    <!-- Rope twist gradient -->
    <linearGradient id="ropeGradient" gradientUnits="userSpaceOnUse"
      x1="0" y1="0" x2="20" y2="20">
      <stop offset="0%" stop-color="#ff6a3d"/>
      <stop offset="25%" stop-color="#b32d1c"/>
      <stop offset="50%" stop-color="#ff6a3d"/>
      <stop offset="75%" stop-color="#b32d1c"/>
      <stop offset="100%" stop-color="#ff6a3d"/>
    </linearGradient>

    <!-- Rope shadow -->
    <filter id="ropeShadow">
      <feDropShadow dx="0" dy="3" stdDeviation="3"
        flood-color="#000" flood-opacity="0.3"/>
    </filter>
  </defs>

  <!-- ROPE GRID -->
  <g stroke="url(#ropeGradient)"
     stroke-width="12"
     stroke-linecap="round"
     stroke-dasharray="10 6"
     filter="url(#ropeShadow)">

    <!-- vertical -->
    <line x1="100" y1="20" x2="100" y2="280"/>
    <line x1="200" y1="20" x2="200" y2="280"/>

    <!-- horizontal -->
    <line x1="20" y1="100" x2="280" y2="100"/>
    <line x1="20" y1="200" x2="280" y2="200"/>
  </g>

  <!-- X O MARKS -->

  <!-- Row 1 -->
  <g class="x">
    <line x1="40" y1="40" x2="80" y2="80"/>
    <line x1="80" y1="40" x2="40" y2="80"/>
  </g>

  <circle class="o" cx="150" cy="60" r="22"/>

  <g class="x">
    <line x1="220" y1="40" x2="260" y2="80"/>
    <line x1="260" y1="40" x2="220" y2="80"/>
  </g>

  <!-- Row 2 -->
  <circle class="o" cx="60" cy="150" r="22"/>

  <g class="x">
    <line x1="130" y1="130" x2="170" y2="170"/>
    <line x1="170" y1="130" x2="130" y2="170"/>
  </g>

  <circle class="o" cx="240" cy="150" r="22"/>

  <!-- Row 3 -->
  <g class="x">
    <line x1="40" y1="220" x2="80" y2="260"/>
    <line x1="80" y1="220" x2="40" y2="260"/>
  </g>

  <circle class="o" cx="150" cy="240" r="22"/>

  <!-- HEART -->
  <path fill="#b11226" filter="url(#ropeShadow)"
    d="M250 240
       C250 225 275 225 275 240
       C275 260 250 275 250 290
       C250 275 225 260 225 240
       C225 225 250 225 250 240Z"/>
</svg>
body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f6f6f6;
}

/* X O styles */
.x{
  stroke:#c62828;
  stroke-width:6;
  stroke-linecap:round;
}
.o{
  fill:none;
  stroke:#c62828;
  stroke-width:6;
}
Categories

Rope Tic Toe

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
