Fan Art PracticeAdvancedSVG + CSS

Spider-Man: Brand New Day

A cute chibi Spider-Man swings into a warm dawn city scene, with one navy web line, sparse hand-drawn web marks, big white mask eyes, and a sunshine-yellow sunrise behind the skyline.

This coded drawing is a fan-art practice example created for educational purposes only. Spider-Man and related characters are trademarks and copyrighted properties of Marvel; Spider-Man: Brand New Day is a Sony Pictures and Marvel Studios production. CoDoodle is not affiliated with, endorsed by, or sponsored by Marvel, Disney, or Sony Pictures.

← you, in 40 minutes.

what you'll build

Here's the plan

A cute chibi Spider-Man fan-art doodle swinging from a single navy web line over a warm sunrise city. You will layer the dawn bands, skyline silhouette, big mask eyes, sparse web marks, sparkles, and gentle CSS motion.

You’ll learn

Layering a rounded SVG stage with clipped sunrise bands
Building a skyline silhouette with tiny window details
Drawing a chibi superhero from simple SVG circles and paths
Keeping mask web lines sparse so the face stays cute and readable
Animating a pendulum swing, shimmering rays, and twinkling windows

Skill level: Advanced
Time: ~40 min
Tools: Just a browser
Code type: SVG + CSS
Lines: ~151

the steps

Build it, one change at a time

Paint the dawn stage

Start with a rounded cream stage, then clip the sunrise bands so nothing spills outside the corners. The half sun and simple navy rays set up the brand-new-day mood.

  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
    <defs>
      <clipPath id="sb-clip">
        <rect x="0" y="0" width="200" height="200" rx="18"/>
      </clipPath>
    </defs>
    <g clip-path="url(#sb-clip)">
      <rect x="0" y="0" width="200" height="58" fill="#FBF2E5" stroke="none"/>
      <rect x="0" y="58" width="200" height="38" fill="#FFD84D" opacity="0.26" stroke="none"/>
      <rect x="0" y="96" width="200" height="42" fill="#FF6B5E" opacity="0.24" stroke="none"/>

dawn breaks over the city.

Cut the skyline

Drop a navy silhouette across the horizon and add a few tiny windows. The soft shadow keeps the later swinging pose grounded without adding another color.

    <g class="sb-city" fill="#2B3A55" stroke="#2B3A55" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
        <path d="M0 178 H16 V154 H31 V168 H45 V141 H62 V161 H77 V150 H92 V173 H108 V146 H126 V162 H138 V136 H156 V168 H170 V152 H186 V178 H200 V200 H0 Z"/>
        <rect class="sb-window sb-window-a" x="22" y="161" width="5" height="7" rx="1" fill="#FFD84D" stroke="none"/>
        <rect class="sb-window sb-window-b" x="51" y="150" width="5" height="7" rx="1" fill="#FBF2E5" stroke="none"/>
        <rect class="sb-window sb-window-c" x="83" y="158" width="5" height="7" rx="1" fill="#E4B06A" stroke="none"/>
        <rect class="sb-window sb-window-a" x="114" y="154" width="5" height="7" rx="1" fill="#FFD84D" stroke="none"/>
        <rect class="sb-window sb-window-b" x="145" y="144" width="5" height="7" rx="1" fill="#FBF2E5" stroke="none"/>
        <rect class="sb-window sb-window-c" x="175" y="160" width="5" height="7" rx="1" fill="#E4B06A" stroke="none"/>
      </g>
      <ellipse class="sb-soft-shadow" cx="104" cy="171" rx="47" ry="8" fill="#2B3A55" opacity="0.13" stroke="none"/>

tiny windows wake up.

Swing in the chibi hero

Draw one web line from the top anchor, then build the big round mask and small body underneath it. A few curved marks are enough for the suit webbing.

    <g class="sb-swing" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
        <path class="sb-web-line" d="M100 0 C100 22 107 43 116 62" fill="none" stroke="#2B3A55" stroke-width="2.1"/>
        <g class="sb-hero">
          <path d="M111 80 C101 70 100 60 108 54 C113 50 120 54 120 62 C120 69 116 75 111 80 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2.6"/>
          <circle cx="100" cy="88" r="26" fill="#FF6B5E" stroke="#2B3A55" stroke-width="3.2"/>
          <path d="M77 85 C67 82 61 76 59 66" fill="none" stroke="#2B3A55" stroke-width="3"/>
          <path d="M123 91 C135 91 143 96 148 105" fill="none" stroke="#2B3A55" stroke-width="3"/>
          <path d="M91 112 C85 124 83 137 88 149" fill="none" stroke="#2B3A55" stroke-width="3"/>
          <path d="M109 111 C119 120 125 132 127 145" fill="none" stroke="#2B3A55" stroke-width="3"/>
          <path d="M82 83 C87 72 96 69 100 81 C95 89 88 91 82 83 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.4"/>
          <path d="M118 84 C111 73 102 70 100 82 C106 90 113 92 118 84 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.4"/>
          <path d="M88 107 C94 112 105 113 113 107 L119 130 C108 136 94 136 83 130 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.7"/>
          <path d="M92 111 C95 118 105 119 110 112" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2.1"/>
          <path d="M92 69 Q99 75 107 69" fill="none" stroke="#2B3A55" stroke-width="1.5"/>
          <path d="M79 96 Q97 89 121 96" fill="none" stroke="#2B3A55" stroke-width="1.5"/>
          <path d="M100 62 V112" fill="none" stroke="#2B3A55" stroke-width="1.5"/>
          <path d="M97 118 Q105 122 115 118" fill="none" stroke="#2B3A55" stroke-width="1.5"/>
          <path d="M85 150 Q89 156 95 153" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2.4"/>
          <path d="M125 145 Q132 149 136 144" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2.4"/>
        </g>
      </g>

a big mask swings into view.

Add the morning motion

Animate the whole web-and-hero group from the web anchor, then pulse the rays, windows, and sparkles. Every motion rule stays inside the reduced-motion media query.

@media (prefers-reduced-motion: no-preference) {
    .sb .sb-swing { animation: sb-pendulum 3.8s ease-in-out infinite; }
    .sb .sb-ray { animation: sb-ray-shimmer 2.4s ease-in-out infinite; }
    .sb .sb-window { animation: sb-window-twinkle 3.2s ease-in-out infinite; }
    .sb .sb-window-b { animation-delay: 0.8s; }
    .sb .sb-window-c { animation-delay: 1.6s; }
    .sb .sb-sparkle { animation: sb-sparkle-pop 2.6s ease-in-out infinite; }
    .sb .sb-sparkle-b { animation-delay: 1.1s; }
  }

  @keyframes sb-pendulum {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(6deg); }
  }

the whole sunrise scene starts to swing.

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="sb" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A cute chibi Spider-Man swings on a navy web line over a sunrise city skyline with sparkles">
    <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
    <defs>
      <clipPath id="sb-clip">
        <rect x="0" y="0" width="200" height="200" rx="18"/>
      </clipPath>
    </defs>
    <g clip-path="url(#sb-clip)">
      <rect x="0" y="0" width="200" height="58" fill="#FBF2E5" stroke="none"/>
      <rect x="0" y="58" width="200" height="38" fill="#FFD84D" opacity="0.26" stroke="none"/>
      <rect x="0" y="96" width="200" height="42" fill="#FF6B5E" opacity="0.24" stroke="none"/>
      <path d="M0 74 C36 62 63 82 100 69 C138 55 160 76 200 62 L200 94 C160 108 135 87 100 99 C62 112 36 93 0 106 Z" fill="#6FA8FF" opacity="0.18" stroke="none"/>
      <g class="sb-rays" fill="none" stroke="#2B3A55" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" opacity="0.42">
        <path class="sb-ray" d="M100 104 L100 65"/>
        <path class="sb-ray" d="M78 110 L62 77"/>
        <path class="sb-ray" d="M122 110 L139 77"/>
        <path class="sb-ray" d="M59 123 L27 101"/>
        <path class="sb-ray" d="M141 123 L173 101"/>
      </g>
      <circle class="sb-sun-glow" cx="100" cy="138" r="56" fill="#FFD84D" opacity="0.22" stroke="none"/>
      <circle class="sb-sun" cx="100" cy="142" r="42" fill="#FFD84D" stroke="#2B3A55" stroke-width="2.4"/>
      <rect x="0" y="142" width="200" height="58" fill="#FBF2E5" stroke="none"/>
      <g class="sb-city" fill="#2B3A55" stroke="#2B3A55" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
        <path d="M0 178 H16 V154 H31 V168 H45 V141 H62 V161 H77 V150 H92 V173 H108 V146 H126 V162 H138 V136 H156 V168 H170 V152 H186 V178 H200 V200 H0 Z"/>
        <rect class="sb-window sb-window-a" x="22" y="161" width="5" height="7" rx="1" fill="#FFD84D" stroke="none"/>
        <rect class="sb-window sb-window-b" x="51" y="150" width="5" height="7" rx="1" fill="#FBF2E5" stroke="none"/>
        <rect class="sb-window sb-window-c" x="83" y="158" width="5" height="7" rx="1" fill="#E4B06A" stroke="none"/>
        <rect class="sb-window sb-window-a" x="114" y="154" width="5" height="7" rx="1" fill="#FFD84D" stroke="none"/>
        <rect class="sb-window sb-window-b" x="145" y="144" width="5" height="7" rx="1" fill="#FBF2E5" stroke="none"/>
        <rect class="sb-window sb-window-c" x="175" y="160" width="5" height="7" rx="1" fill="#E4B06A" stroke="none"/>
      </g>
      <ellipse class="sb-soft-shadow" cx="104" cy="171" rx="47" ry="8" fill="#2B3A55" opacity="0.13" stroke="none"/>
      <g class="sb-swing" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
        <path class="sb-web-line" d="M100 0 C100 22 107 43 116 62" fill="none" stroke="#2B3A55" stroke-width="2.1"/>
        <g class="sb-hero">
          <path d="M111 80 C101 70 100 60 108 54 C113 50 120 54 120 62 C120 69 116 75 111 80 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2.6"/>
          <circle cx="100" cy="88" r="26" fill="#FF6B5E" stroke="#2B3A55" stroke-width="3.2"/>
          <path d="M77 85 C67 82 61 76 59 66" fill="none" stroke="#2B3A55" stroke-width="3"/>
          <path d="M123 91 C135 91 143 96 148 105" fill="none" stroke="#2B3A55" stroke-width="3"/>
          <path d="M91 112 C85 124 83 137 88 149" fill="none" stroke="#2B3A55" stroke-width="3"/>
          <path d="M109 111 C119 120 125 132 127 145" fill="none" stroke="#2B3A55" stroke-width="3"/>
          <path d="M82 83 C87 72 96 69 100 81 C95 89 88 91 82 83 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.4"/>
          <path d="M118 84 C111 73 102 70 100 82 C106 90 113 92 118 84 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.4"/>
          <path d="M88 107 C94 112 105 113 113 107 L119 130 C108 136 94 136 83 130 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.7"/>
          <path d="M92 111 C95 118 105 119 110 112" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2.1"/>
          <path d="M92 69 Q99 75 107 69" fill="none" stroke="#2B3A55" stroke-width="1.5"/>
          <path d="M79 96 Q97 89 121 96" fill="none" stroke="#2B3A55" stroke-width="1.5"/>
          <path d="M100 62 V112" fill="none" stroke="#2B3A55" stroke-width="1.5"/>
          <path d="M97 118 Q105 122 115 118" fill="none" stroke="#2B3A55" stroke-width="1.5"/>
          <path d="M85 150 Q89 156 95 153" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2.4"/>
          <path d="M125 145 Q132 149 136 144" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2.4"/>
        </g>
      </g>
      <path class="sb-sparkle sb-sparkle-a" d="M38 52 L41 59 L38 66 L35 59 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.8" stroke-linejoin="round"/>
      <path class="sb-sparkle sb-sparkle-b" d="M162 72 L165 78 L162 84 L159 78 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.6" stroke-linejoin="round"/>
      <path class="sb-heart" d="M151 47 C149 43 144 44 144 48 C144 53 151 56 151 56 C151 56 158 53 158 48 C158 44 153 43 151 47 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.6" stroke-linejoin="round"/>
    </g>
  </svg>

Open in Playground

tips & gotchas

Mistakes we actually made

I keep the mask webbing sparse because the eyes need to stay soft, bright, and readable at 200 pixels.

I draw the body smaller than feels natural at first, then let the oversized head sell the chibi proportions.

I use the same navy for outlines, skyline, and web line so the busy fan-art scene still feels tidy.

I put the swing transform origin at the web anchor; rotating around the character center would feel floaty.

I stagger the window twinkles lightly so the city feels awake without stealing focus from the swinging pose.

make it yours

Remix it

Add extra sparkleseasy
Place two tiny diamond paths near the web line and reuse the existing sparkle animation classes.
Make a sunset versioneasy
Swap the band order so coral sits higher and the sun feels like it is dipping behind the buildings.
Add a second swing arcmedium
Draw a faint curved navy guide behind the hero and animate its opacity opposite the pendulum swing.

challenge extension

Add a tiny camera-flash sparkle on one building roof that pops only when the hero reaches the far right of the swing.

Tape it to our fridge

keep sketching

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