Skip to content
CoDdleCoDoodle home
CoDdle
Share your art
Seasonal ArtBeginnerSVG + CSS

Travel Pants

A soft travel-pants flat-lay with folded sage trousers, a tiny passport, luggage tag, boarding pass, and one sunshine accent. It captures the post-pandemic travel boom in sticker form — wrinkle-free and ready to board.

← you, in 30 minutes.

what you'll build

Here's the plan

A soft fashion flat-lay drawn in SVG: folded sage travel pants, a mint passport, a sunshine luggage tag, and a cream boarding pass with a coral stamp. The tag sways, the ticket pulses, and the passport floats on its own slow loop.

You’ll learn

  • Composing a flat-lay from stacked props instead of a single character
  • Using stroke-dasharray for subtle stitching and perforated-line details
  • Layering pastel fills with navy outlines to keep the travel mood light
  • Animating multiple props on independent clocks without visual chaos
Skill level
Beginner
Time
~30 min
Tools
Just a browser
Code type
SVG + CSS
Lines
~112

the steps

Build it, one change at a time

  1. Frame the flat-lay

    Start with the warm paper square and two small corner brackets. These act like a Polaroid border or a photo mat, giving the flat-lay a deliberate composition before any props arrive.

    <svg class="tp" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Warm paper stage with corner brackets">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
  <path class="tp-corner tp-corner-tl" d="M18 34 L18 18 L34 18" fill="none" stroke="#2B3A55" stroke-width="2" stroke-linecap="round"/>
  <path class="tp-corner tp-corner-br" d="M182 166 L182 182 L166 182" fill="none" stroke="#2B3A55" stroke-width="2" stroke-linecap="round"/>
</svg>

    the empty photo frame, waiting for luggage.

  2. Fold the travel pants

    Draw the pants as one folded shape with a center seam, a waistband shadow, a dashed hemline, and a cream pocket patch. Keep the sage fill soft and the navy outline bold so the doodle reads from a distance.

    <g class="tp-pants" stroke-linecap="round" stroke-linejoin="round">
  <path d="M76 58 L124 58 L132 148 L100 156 L68 148 Z" fill="#A8D5C3" stroke="#2B3A55" stroke-width="3"/>
  <path d="M100 58 L100 156" fill="none" stroke="#2B3A55" stroke-width="2.2"/>
  <rect x="82" y="62" width="36" height="8" rx="2" fill="#2B3A55" opacity="0.12"/>
  <path d="M74 130 L126 130" fill="none" stroke="#2B3A55" stroke-width="2" stroke-dasharray="4 3" opacity="0.35"/>
  <rect x="84" y="84" width="32" height="24" rx="4" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" opacity="0.7"/>
</g>

    a pair of folded trousers that already look airport-ready.

  3. Pack the props

    Add a mint passport with a globe icon, a sunshine luggage tag on a string, and a cream boarding pass with a coral stamp. These props sit around the pants like they were casually tossed on a hotel bed.

    <!-- passport -->
<g class="tp-passport" stroke-linecap="round" stroke-linejoin="round">
  <rect x="130" y="92" width="34" height="48" rx="4" fill="#5ECBB4" stroke="#2B3A55" stroke-width="2.4"/>
  <circle cx="147" cy="112" r="8" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.6"/>
  <path d="M147 106 L147 118 M141 112 L153 112" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
  <rect x="136" y="132" width="22" height="4" rx="2" fill="#2B3A55" opacity="0.25"/>
</g>

<!-- luggage tag -->
<g class="tp-tag" stroke-linecap="round" stroke-linejoin="round">
  <rect x="40" y="78" width="30" height="18" rx="3" fill="#FFD84D" stroke="#2B3A55" stroke-width="2"/>
  <circle cx="46" cy="87" r="2.4" fill="#2B3A55"/>
  <rect x="52" y="84" width="12" height="2.4" rx="1.2" fill="#2B3A55"/>
  <rect x="52" y="88" width="8" height="2.4" rx="1.2" fill="#2B3A55"/>
  <path d="M55 78 L55 70" fill="none" stroke="#2B3A55" stroke-width="2"/>
</g>

<!-- boarding pass -->
<g class="tp-ticket" stroke-linecap="round" stroke-linejoin="round">
  <rect x="32" y="124" width="44" height="28" rx="3" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2"/>
  <path d="M42 124 L42 152" fill="none" stroke="#2B3A55" stroke-width="1.6" stroke-dasharray="3 2"/>
  <rect x="50" y="130" width="18" height="3" rx="1.5" fill="#2B3A55" opacity="0.25"/>
  <rect x="50" y="137" width="14" height="3" rx="1.5" fill="#2B3A55" opacity="0.25"/>
  <circle cx="72" cy="140" r="3" fill="#FF6B5E"/>
</g>

    pants, passport, tag, ticket — the flat-lay is packed.

  4. Add calm travel motion

    Three gentle loops keep the scene alive: the luggage tag sways from its string, the boarding pass softly pulses, and the passport floats up and down. Each animation uses a different duration so the motion feels organic, not robotic.

    @media (prefers-reduced-motion: no-preference) {
  .tp .tp-tag { transform-box: fill-box; transform-origin: top center; animation: tp-sway 3s ease-in-out infinite; }
  .tp .tp-ticket { transform-box: fill-box; transform-origin: center; animation: tp-pulse 2.8s ease-in-out infinite; }
  .tp .tp-passport { transform-box: fill-box; transform-origin: center; animation: tp-float 4s ease-in-out infinite; }
}
@keyframes tp-sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(2.5deg); } }
@keyframes tp-pulse { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes tp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }

    everything moves a little, like it is excited to leave.

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="tp" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Animated travel flat-lay with gently swaying luggage tag and pulsing boarding pass stamp">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
  <path class="tp-corner tp-corner-tl" d="M18 34 L18 18 L34 18" fill="none" stroke="#2B3A55" stroke-width="2" stroke-linecap="round"/>
  <path class="tp-corner tp-corner-br" d="M182 166 L182 182 L166 182" fill="none" stroke="#2B3A55" stroke-width="2" stroke-linecap="round"/>
  <g class="tp-pants" stroke-linecap="round" stroke-linejoin="round">
    <path d="M76 58 L124 58 L132 148 L100 156 L68 148 Z" fill="#A8D5C3" stroke="#2B3A55" stroke-width="3"/>
    <path d="M100 58 L100 156" fill="none" stroke="#2B3A55" stroke-width="2.2"/>
    <rect x="82" y="62" width="36" height="8" rx="2" fill="#2B3A55" opacity="0.12"/>
    <path d="M74 130 L126 130" fill="none" stroke="#2B3A55" stroke-width="2" stroke-dasharray="4 3" opacity="0.35"/>
    <rect x="84" y="84" width="32" height="24" rx="4" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" opacity="0.7"/>
  </g>
  <g class="tp-passport" stroke-linecap="round" stroke-linejoin="round">
    <rect x="130" y="92" width="34" height="48" rx="4" fill="#5ECBB4" stroke="#2B3A55" stroke-width="2.4"/>
    <circle cx="147" cy="112" r="8" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.6"/>
    <path d="M147 106 L147 118 M141 112 L153 112" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
    <rect x="136" y="132" width="22" height="4" rx="2" fill="#2B3A55" opacity="0.25"/>
  </g>
  <g class="tp-tag" stroke-linecap="round" stroke-linejoin="round">
    <rect x="40" y="78" width="30" height="18" rx="3" fill="#FFD84D" stroke="#2B3A55" stroke-width="2"/>
    <circle cx="46" cy="87" r="2.4" fill="#2B3A55"/>
    <rect x="52" y="84" width="12" height="2.4" rx="1.2" fill="#2B3A55"/>
    <rect x="52" y="88" width="8" height="2.4" rx="1.2" fill="#2B3A55"/>
    <path d="M55 78 L55 70" fill="none" stroke="#2B3A55" stroke-width="2"/>
  </g>
  <g class="tp-ticket" stroke-linecap="round" stroke-linejoin="round">
    <rect x="32" y="124" width="44" height="28" rx="3" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2"/>
    <path d="M42 124 L42 152" fill="none" stroke="#2B3A55" stroke-width="1.6" stroke-dasharray="3 2"/>
    <rect x="50" y="130" width="18" height="3" rx="1.5" fill="#2B3A55" opacity="0.25"/>
    <rect x="50" y="137" width="14" height="3" rx="1.5" fill="#2B3A55" opacity="0.25"/>
    <circle cx="72" cy="140" r="3" fill="#FF6B5E"/>
  </g>
</svg>
Open in Playground

tips & gotchas

Mistakes we actually made

I draw the pants as one folded trapezoid rather than two separate legs so the flat-lay stays readable at small sizes.

The dashed hemline and pocket patch use low-opacity navy so they add texture without competing with the props.

Each prop gets its own group class so the CSS can target it for animation without rewriting the SVG.

I keep animation values tiny (1.5px–2.5deg) because flat-lays look odd when large objects bounce.

make it yours

Remix it

  • Swap the seasoneasy

    Change the pants color and add tiny sunglasses or a beanie to match summer or winter travel.

  • Add a destination stampeasy

    Draw one small circular stamp on the passport or ticket with a city code inside.

  • Build a suitcase versionmedium

    Replace the pants with a tiny open suitcase and layer the props peeking out of it.

challenge extension

Add a tiny animated airplane that traces a dashed flight path across the top of the flat-lay, entering from the left corner and exiting at the right.

Tape it to our fridge

keep sketching

More tutorials to try

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