Skip to content
CoDdleCoDoodle home
CoDdle
Share your art
Fan Art PracticeBeginnerSVG + CSS

Batwara 1947

A vintage postage stamp frame with two tiny doves carrying an olive branch across a dividing border. A generic peace-history study inspired by partition-era themes — no flags, no faces, just doves and a torn border.

This coded drawing is a fan-art practice example created for educational purposes only. It is a generic peace-and-history study inspired by a historical period and film theme; it does not depict any real person, flag, symbol, or copyrighted artwork. Batwara and related titles belong to their respective rights holders. CoDoodle is not affiliated with, endorsed by, or sponsored by the creators or distributors of any related film or historical work.

← you, in 25 minutes.

what you'll build

Here's the plan

A vintage postage stamp with a torn vertical border, two stylized doves carrying an olive branch across the divide, and subtle motion suggesting flight. A generic peace-and-history study inspired by partition-era themes.

You’ll learn

  • Drawing stylized doves from simple wing shapes
  • Adding a torn dashed border that can animate like a seam
  • Building an olive branch with small elliptical leaves
  • Keeping two doves visually connected by a shared branch
Skill level
Beginner
Time
~25 min
Tools
Just a browser
Code type
SVG + CSS
Lines
~90

the steps

Build it, one change at a time

  1. Set the vintage stamp stage

    Start with a warm paper square, vertical side lines, and a dashed center border that suggests a torn division. The stamp framing keeps the scene compact and symbolic.

    <svg class="bw" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Vintage stamp stage">
  <rect x="0" y="0" width="200" height="200" rx="16" fill="#FBF2E5" stroke="none"/>
  <path class="bw-border" d="M100 28 L100 172" fill="none" stroke="#2B3A55" stroke-width="2" stroke-dasharray="4 3" opacity="0.35"/>
  <path d="M24 34 L24 166" fill="none" stroke="#2B3A55" stroke-width="2" opacity="0.2"/>
  <path d="M176 34 L176 166" fill="none" stroke="#2B3A55" stroke-width="2" opacity="0.2"/>
</svg>

    a divided vintage stamp frame.

  2. Add two stylized doves

    Each dove is made of two mirrored wing paths and a small eye dot. One dove faces right from the left side, the other faces left from the right side, so they move toward the center.

    <!-- left dove -->
<g class="bw-dove" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round">
  <path d="M80 86 C80 86 72 78 64 82 C60 84 58 90 62 94 C66 98 80 106 86 104 C92 102 96 94 92 88 C88 82 80 86 80 86 Z"/>
  <path d="M80 86 C80 86 88 78 96 82 C100 84 102 90 98 94 C94 98 80 106 74 104 C68 102 64 94 68 88 C72 82 80 86 80 86 Z"/>
  <circle cx="84" cy="92" r="2.4" fill="#2B3A55" stroke="none"/>
</g>

<!-- right dove -->
<g class="bw-dove" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round">
  <path d="M120 114 C120 114 128 106 136 110 C140 112 142 118 138 122 C134 126 120 134 114 132 C108 130 104 122 108 116 C112 110 120 114 120 114 Z"/>
  <path d="M120 114 C120 114 112 106 104 110 C100 112 98 118 102 122 C106 126 120 134 126 132 C132 130 136 122 132 116 C128 110 120 114 120 114 Z"/>
  <circle cx="116" cy="120" r="2.4" fill="#2B3A55" stroke="none"/>
</g>

    two doves facing each other across the divide.

  3. Add the olive branch

    The branch is a short curved stem with small elliptical leaves. It connects the two doves and sits right over the dashed border, turning the divide into a bridge.

    <g class="bw-branch" fill="none" stroke="#4E6E58" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M92 100 Q102 106 110 104"/>
  <path d="M96 100 L96 95"/>
  <path d="M100 103 L100 96"/>
  <path d="M106 103 L106 97"/>
  <ellipse cx="96" cy="92" rx="2.4" ry="1.4" fill="#6EF4A2" stroke="none"/>
  <ellipse cx="100" cy="93" rx="2.4" ry="1.4" fill="#6EF4A2" stroke="none"/>
  <ellipse cx="106" cy="93" rx="2.4" ry="1.4" fill="#6EF4A2" stroke="none"/>
</g>

    an olive branch carried across the border.

  4. Animate the flight

    The doves bob gently up and down, the branch sways, and the dashed border slowly crawls like a torn seam. The motion is small so the symbolic scene stays dignified.

    @media (prefers-reduced-motion: no-preference) {
  .bw .bw-dove { animation: bw-fly 3.6s ease-in-out infinite; }
  .bw .bw-branch { animation: bw-sway 4s ease-in-out infinite; }
  .bw .bw-border { stroke-dashoffset: 0; animation: bw-seam 5s linear infinite; }
}
.bw .bw-dove:nth-of-type(1) { animation-delay: 0s; }
.bw .bw-dove:nth-of-type(2) { animation-delay: 0.4s; }
@keyframes bw-fly { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes bw-sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes bw-seam { to { stroke-dashoffset: -28; } }

    doves that bob, a branch that sways, a border that trembles.

the complete code

Everything, in one place

Skipped straight to the end? Welcome. Copy the whole thing, download it, or open it in the Playground to start remixing.

<svg class="bw" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A vintage 1947 partition map with a train, suitcases, birds, and tiny villages">
  <rect x="0" y="0" width="200" height="200" rx="16" fill="#FBF2E5" stroke="none"/>
  <g class="bw-map" stroke="#2B3A55" stroke-width="2.6" stroke-linejoin="round">
    <path d="M100 52 L70 52 C60 52 52 60 52 72 C52 84 58 92 66 96 C62 110 64 128 72 142 C80 156 92 166 100 176 C108 166 120 156 128 142 C136 128 138 110 134 96 C142 92 148 84 148 72 C148 60 140 52 130 52 Z" fill="none"/>
    <path d="M100 52 L70 52 C60 52 52 60 52 72 C52 84 58 92 66 96 C62 110 64 128 72 142 C80 156 92 166 100 176 L100 52 Z" fill="#F2C9A8"/>
    <path d="M100 52 L130 52 C140 52 148 60 148 72 C148 84 142 92 134 96 C138 110 136 128 128 142 C120 156 108 166 100 176 L100 52 Z" fill="#C8D8E0"/>
  </g>
  <path class="bw-border" d="M100 56 L100 172" fill="none" stroke="#2B3A55" stroke-width="2" stroke-dasharray="5 4" opacity="0.55"/>
  <text x="100" y="40" text-anchor="middle" font-family="Georgia, serif" font-size="18" fill="#2B3A55" font-weight="bold">1947</text>
  <g class="bw-sprig" fill="none" stroke="#4E6E58" stroke-width="1.6" stroke-linecap="round">
    <path d="M58 38 Q62 30 70 34"/>
    <path d="M62 42 Q68 34 76 38"/>
    <ellipse cx="70" cy="32" rx="2.4" ry="1.4" fill="#C78D55" stroke="none"/>
    <ellipse cx="76" cy="36" rx="2.4" ry="1.4" fill="#C78D55" stroke="none"/>
  </g>
  <g class="bw-sprig" fill="none" stroke="#4E6E58" stroke-width="1.6" stroke-linecap="round">
    <path d="M142 38 Q138 30 130 34"/>
    <path d="M138 42 Q132 34 124 38"/>
    <ellipse cx="130" cy="32" rx="2.4" ry="1.4" fill="#C78D55" stroke="none"/>
    <ellipse cx="124" cy="36" rx="2.4" ry="1.4" fill="#C78D55" stroke="none"/>
  </g>
  <g class="bw-bird" fill="none" stroke="#2B3A55" stroke-width="1.8" stroke-linecap="round">
    <path d="M36 56 Q42 50 48 56"/>
    <path d="M44 60 Q50 54 56 60"/>
  </g>
  <g class="bw-bird" fill="none" stroke="#2B3A55" stroke-width="1.8" stroke-linecap="round">
    <path d="M152 56 Q158 50 164 56"/>
    <path d="M160 60 Q166 54 172 60"/>
  </g>
  <g class="bw-village" stroke-linecap="round" stroke-linejoin="round">
    <rect x="66" y="102" width="16" height="12" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.8"/>
    <path d="M64 102 L74 94 L84 102" fill="#C77A57" stroke="#2B3A55" stroke-width="1.8"/>
    <rect x="88" y="108" width="10" height="8" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.6"/>
    <path d="M87 108 L93 102 L99 108" fill="#C77A57" stroke="#2B3A55" stroke-width="1.6"/>
    <circle cx="62" cy="118" r="5" fill="#4E6E58" stroke="#2B3A55" stroke-width="1.4"/>
    <circle cx="78" cy="122" r="4" fill="#4E6E58" stroke="#2B3A55" stroke-width="1.4"/>
  </g>
  <g class="bw-village" stroke-linecap="round" stroke-linejoin="round">
    <rect x="116" y="104" width="16" height="12" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.8"/>
    <path d="M116 104 C116 98 124 98 132 104" fill="#6FA8FF" stroke="#2B3A55" stroke-width="1.8"/>
    <rect x="136" y="110" width="10" height="8" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.6"/>
    <path d="M136 110 C136 104 142 104 146 110" fill="#6FA8FF" stroke="#2B3A55" stroke-width="1.6"/>
    <circle cx="154" cy="120" r="5" fill="#4E6E58" stroke="#2B3A55" stroke-width="1.4"/>
    <circle cx="138" cy="124" r="4" fill="#4E6E58" stroke="#2B3A55" stroke-width="1.4"/>
  </g>
  <path class="bw-track" d="M24 172 Q100 188 176 172" fill="none" stroke="#2B3A55" stroke-width="2.4" stroke-linecap="round"/>
  <path class="bw-track" d="M28 176 Q100 192 172 176" fill="none" stroke="#2B3A55" stroke-width="2.4" stroke-linecap="round"/>
  <g class="bw-train" stroke-linecap="round" stroke-linejoin="round">
    <rect x="88" y="160" width="26" height="14" rx="3" fill="#C77A57" stroke="#2B3A55" stroke-width="2"/>
    <rect x="116" y="162" width="18" height="12" rx="2" fill="#6FA8FF" stroke="#2B3A55" stroke-width="1.8"/>
    <rect x="136" y="162" width="18" height="12" rx="2" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.8"/>
    <rect x="78" y="158" width="12" height="10" rx="2" fill="#2B3A55" stroke="#2B3A55" stroke-width="1.6"/>
    <circle cx="82" cy="156" r="3" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.4"/>
    <circle cx="94" cy="174" r="3" fill="#2B3A55"/>
    <circle cx="104" cy="174" r="3" fill="#2B3A55"/>
    <circle cx="122" cy="174" r="2.4" fill="#2B3A55"/>
    <circle cx="132" cy="174" r="2.4" fill="#2B3A55"/>
    <circle cx="142" cy="174" r="2.4" fill="#2B3A55"/>
    <circle cx="152" cy="174" r="2.4" fill="#2B3A55"/>
    <path class="bw-smoke" d="M80 154 Q78 148 82 146 Q86 144 84 140" fill="none" stroke="#2B3A55" stroke-width="1.6" stroke-linecap="round" opacity="0.5"/>
    <path class="bw-smoke" d="M86 152 Q84 146 88 144 Q92 142 90 138" fill="none" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round" opacity="0.4"/>
  </g>
  <g class="bw-case" stroke-linecap="round" stroke-linejoin="round">
    <rect x="52" y="168" width="22" height="16" rx="2" fill="#C77A57" stroke="#2B3A55" stroke-width="2"/>
    <path d="M58 168 L58 164 Q61 162 64 164 L64 168" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
    <circle cx="58" cy="176" r="1.6" fill="#FFFDF7" opacity="0.7"/>
    <circle cx="68" cy="176" r="1.6" fill="#FFFDF7" opacity="0.7"/>
  </g>
  <g class="bw-case" stroke-linecap="round" stroke-linejoin="round">
    <rect x="80" y="174" width="20" height="14" rx="2" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2"/>
    <path d="M86 174 L86 170 Q88.5 168 91 170 L91 174" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
    <circle cx="86" cy="181" r="1.4" fill="#FFFDF7" opacity="0.7"/>
    <circle cx="94" cy="181" r="1.4" fill="#FFFDF7" opacity="0.7"/>
  </g>
</svg>
Open in Playground

tips & gotchas

Mistakes we actually made

I keep the doves white with navy outlines so they read as symbols rather than realistic birds.

The dashed border's stroke-dasharray is 4 + 3 = 7, and the offset moves by -28 so the loop is exactly four cycles.

Each dove is mirrored: left dove's head points right, right dove's head points left, so they face each other across the divide.

The branch leaves are tiny ellipses so they read as olives without needing fruit detail.

make it yours

Remix it

  • Add a postage perforation edgeeasy

    Draw a row of small semicircles around the border to look like real stamp perforations.

  • Change the branch to a flowermedium

    Replace the olive leaves with small blossoms to shift the symbol toward renewal.

  • Add a muted date bannermedium

    Place a small ribbon at the bottom with a generic year using simple text or shapes.

challenge extension

Make one dove pass the branch to the other: animate the branch moving slightly from one side to the other while the doves tilt toward each other.

Tape it to our fridge

keep sketching

More tutorials to try

Pick another small recipe and borrow one technique for your next doodle.