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

Avengers: Doomsday

A giant cracked doomsday clock with Roman numerals looms over five generic caped hero silhouettes while colored lightning bolts flash and stars spark. An advanced superhero-storm study inspired by apocalyptic crossover vibes — no logos, no likenesses, just metal, thunder, and ticking doom.

This coded drawing is a fan-art practice example created for educational purposes only. It is a generic superhero-storm scene inspired by a popular comic-book crossover event; it does not reproduce any character, logo, costume, likeness, or copyrighted imagery. Avengers and related properties belong to Marvel Comics / Disney. CoDoodle is not affiliated with, endorsed by, or sponsored by Marvel Comics or Disney.

← you, in 40 minutes.

what you'll build

Here's the plan

A giant cracked doomsday clock with Roman numerals, radiating cracks, storm clouds, colored lightning bolts, sparking stars, falling debris, and five generic caped hero silhouettes looking up from below. An advanced superhero-storm study built entirely from SVG paths and CSS keyframes.

You’ll learn

  • Drawing a detailed clock face with Roman numerals, ticks, and concentric rings
  • Adding multiple radiating cracks for a shattered-clock effect
  • Layering colored lightning bolts with staggered flash timings
  • Building generic hero silhouettes from simple geometric shapes
  • Animating stars, debris, clouds, and clock shake independently
Skill level
Advanced
Time
~40 min
Tools
Just a browser
Code type
SVG + CSS
Lines
~150

the steps

Build it, one change at a time

  1. Set the stormy stage

    Start with a deep navy square and one soft ground shadow. The dark stage makes the cream clock face and bright lightning read clearly.

    <svg class="av" viewBox="0 0 200 200" width="200" height="200">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#2B3A55" />
  <ellipse cx="100" cy="178" rx="62" ry="8" fill="#FFFDF7" opacity="0.06" />
</svg>

    a dark stage waiting for the clock.

  2. Build the cracked clock face

    Draw the clock as concentric circles with tick marks and Roman numerals. Add crack paths so the face looks like it is shattering under pressure.

    <g class="av-clock" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="100" cy="92" r="58" fill="#FFFDF7" opacity="0.92" stroke="#2B3A55" stroke-width="3.2" />
  <circle cx="100" cy="92" r="52" fill="none" stroke="#2B3A55" stroke-width="1.4" opacity="0.25" />
  <path d="M86 58 L92 74 L84 86 L96 92" fill="none" stroke="#2B3A55" stroke-width="2.2" />
  <text x="100" y="30" text-anchor="middle" font-size="9" fill="#2B3A55" font-weight="bold">XII</text>
</g>

    a shattered clock face reads almost midnight.

  3. Add lightning, clouds, and spark effects

    Place overlapping storm clouds above the clock. Add three jagged bolts in yellow, pink, and blue with inline animation-delay values. Add three small stars and falling debris shapes.

    <path class="av-bolt" style="animation-delay: 0s" d="M106 56 L94 78 L106 78 L98 98 L120 74 L106 74 L116 56 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.8" />
<path class="av-bolt" style="animation-delay: 0.4s" d="M42 68 L34 86 L42 86 L36 102 L54 82 L44 82 L50 68 Z" fill="#FF8FA3" stroke="#2B3A55" stroke-width="1.6" />
<g class="av-star" style="animation-delay: 0s" fill="#FFD84D" stroke="#2B3A55" stroke-width="0.8">
  <path d="M84 28 L85 31 L88 31 L86 33 L87 36 L84 34 L81 36 L82 33 L80 31 L83 31 Z" />
</g>

    clouds rumble, lightning forks, stars spark.

  4. Add hero silhouettes and animate the storm

    Draw five generic caped figures from behind at the bottom of the stage, varying each silhouette so the group reads as a team. Then add CSS keyframes that flash the bolts, rumble the clouds, shake the clock, sparkle the stars, and drop the debris.

    /* hero silhouettes */
<g class="av-hero" fill="#2B3A55" stroke="#FFFDF7" stroke-width="1.2">
  <path d="M30 164 C30 164 26 150 32 144 C36 140 42 140 46 144 ..." />
</g>

@media (prefers-reduced-motion: no-preference) {
  .av .av-bolt { animation: av-flash 2.2s ease-in-out infinite; }
  .av .av-cloud { animation: av-rumble 4s ease-in-out infinite; }
  .av .av-clock { animation: av-shake 5s ease-in-out infinite; }
  .av .av-star { animation: av-spark 2.6s ease-in-out infinite; }
  .av .av-debris { animation: av-fall 3.5s linear infinite; }
}
@keyframes av-flash { 0%, 100% { opacity: 0.25; } 10% { opacity: 1; } 20% { opacity: 0.25; } 30% { opacity: 1; } 40%, 90% { opacity: 0.25; } }

    heroes gather beneath a shaking, flashing doomsday clock.

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="av" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A cracked doomsday clock looms behind five faceless caped heroes while lightning flashes and stars spark">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FFF8F0" stroke="none"/>
  <ellipse cx="100" cy="178" rx="62" ry="8" fill="#2B3A55" opacity="0.08"/>
  <g class="av-cloud" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.2" stroke-linejoin="round">
    <path d="M52 46 C52 36 62 30 70 30 C74 30 77 31 79 33 C82 27 92 24 100 27 C105 29 108 33 108 38 C108 38 120 38 123 46 C125 51 121 57 115 57 L55 57 C49 57 46 51 49 46 C50 45 51 46 52 46 Z"/>
    <path d="M120 40 C120 32 128 28 135 28 C138 28 141 29 142 30 C145 26 153 24 160 26 C164 28 166 31 166 35 C166 35 176 35 178 40 C180 44 177 49 172 49 L124 49 C119 49 117 44 119 40 Z"/>
  </g>
  <path class="av-bolt" style="animation-delay: 0s" d="M106 56 L94 78 L106 78 L98 98 L120 74 L106 74 L116 56 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.8" stroke-linejoin="round"/>
  <path class="av-bolt" style="animation-delay: 0.4s" d="M42 68 L34 86 L42 86 L36 102 L54 82 L44 82 L50 68 Z" fill="#FF8FA3" stroke="#2B3A55" stroke-width="1.6" stroke-linejoin="round"/>
  <path class="av-bolt" style="animation-delay: 0.8s" d="M154 70 L146 88 L154 88 L148 104 L166 84 L156 84 L162 70 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="1.6" stroke-linejoin="round"/>
  <g class="av-clock" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="100" cy="82" r="58" fill="#FFFDF7" stroke="#4A5B8C" stroke-width="6"/>
    <circle cx="100" cy="82" r="51" fill="#FFFDF7" stroke="none"/>
    <path d="M100 26 L100 32" fill="none" stroke="#2B3A55" stroke-width="2.2"/>
    <path d="M100 132 L100 138" fill="none" stroke="#2B3A55" stroke-width="2.2"/>
    <path d="M44 82 L50 82" fill="none" stroke="#2B3A55" stroke-width="2.2"/>
    <path d="M150 82 L156 82" fill="none" stroke="#2B3A55" stroke-width="2.2"/>
    <path d="M60 42 L65 47" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
    <path d="M135 117 L140 122" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
    <path d="M140 42 L135 47" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
    <path d="M65 117 L60 122" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
    <path class="av-crack" d="M138 42 L128 58 L136 74 L120 86" fill="none" stroke="#2B3A55" stroke-width="2.4" stroke-linecap="round"/>
    <path d="M100 82 L82 62" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/>
    <path d="M100 82 L122 72" fill="none" stroke="#2B3A55" stroke-width="2.4" stroke-linecap="round"/>
    <circle cx="100" cy="82" r="4" fill="#2B3A55"/>
  </g>
  <g class="av-star" style="animation-delay: 0s" fill="#FFD84D" stroke="#2B3A55" stroke-width="0.8">
    <path d="M84 28 L85 31 L88 31 L86 33 L87 36 L84 34 L81 36 L82 33 L80 31 L83 31 Z"/>
  </g>
  <g class="av-star" style="animation-delay: 0.9s" fill="#6FA8FF" stroke="#2B3A55" stroke-width="0.8">
    <path d="M160 54 L161 57 L164 57 L162 59 L163 62 L160 60 L157 62 L158 59 L156 57 L159 57 Z"/>
  </g>
  <g class="av-star" style="animation-delay: 1.8s" fill="#FF8FA3" stroke="#2B3A55" stroke-width="0.8">
    <path d="M40 42 L41 45 L44 45 L42 47 L43 50 L40 48 L37 50 L38 47 L36 45 L39 45 Z"/>
  </g>
  <circle class="av-debris" style="animation-delay: 0s" cx="70" cy="142" r="2.2" fill="#2B3A55" opacity="0.5"/>
  <circle class="av-debris" style="animation-delay: 1.2s" cx="140" cy="150" r="1.8" fill="#2B3A55" opacity="0.45"/>
  <path class="av-debris" style="animation-delay: 2.4s" d="M126 146 L130 148 L128 152 Z" fill="#2B3A55" opacity="0.5"/>
  <!-- back row heroes -->
  <g class="av-hero" transform="translate(44, 172) scale(0.75)" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
    <path d="M-11 -58 C-26 -44 -32 -18 -28 4 C-14 -2 2 -4 18 0 C32 -18 26 -44 11 -58 Z" fill="#D95353"/>
    <path d="M-11 -58 L-13 -30 L-7 0 L7 0 L13 -30 L11 -58 Z" fill="#E9B44C"/>
    <circle cx="0" cy="-70" r="11" fill="#E9B44C"/>
    <path d="M-11 -56 C-20 -50 -20 -38 -12 -32" fill="none"/>
    <path d="M11 -56 C20 -50 20 -38 12 -32" fill="none"/>
  </g>
  <g class="av-hero" transform="translate(156, 172) scale(0.75)" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
    <path d="M-11 -58 C-26 -44 -32 -18 -28 4 C-14 -2 2 -4 18 0 C32 -18 26 -44 11 -58 Z" fill="#D95353"/>
    <path d="M-11 -58 L-13 -30 L-7 0 L7 0 L13 -30 L11 -58 Z" fill="#3D5A80"/>
    <circle cx="0" cy="-70" r="11" fill="#3D5A80"/>
    <path d="M-11 -56 C-20 -50 -20 -38 -12 -32" fill="none"/>
    <path d="M11 -56 C20 -50 20 -38 12 -32" fill="none"/>
  </g>
  <!-- middle row heroes -->
  <g class="av-hero" transform="translate(70, 176) scale(0.9)" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
    <path d="M-11 -58 C-26 -44 -32 -18 -28 4 C-14 -2 2 -4 18 0 C32 -18 26 -44 11 -58 Z" fill="#D95353"/>
    <path d="M-11 -58 L-13 -30 L-7 0 L7 0 L13 -30 L11 -58 Z" fill="#D66D6D"/>
    <circle cx="0" cy="-70" r="11" fill="#D66D6D"/>
    <path d="M-11 -56 C-20 -50 -20 -38 -12 -32" fill="none"/>
    <path d="M11 -56 C20 -50 20 -38 12 -32" fill="none"/>
  </g>
  <g class="av-hero" transform="translate(130, 176) scale(0.9)" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
    <path d="M-11 -58 C-26 -44 -32 -18 -28 4 C-14 -2 2 -4 18 0 C32 -18 26 -44 11 -58 Z" fill="#D95353"/>
    <path d="M-11 -58 L-13 -30 L-7 0 L7 0 L13 -30 L11 -58 Z" fill="#E9B44C"/>
    <circle cx="0" cy="-70" r="11" fill="#E9B44C"/>
    <path d="M-11 -56 C-20 -50 -20 -38 -12 -32" fill="none"/>
    <path d="M11 -56 C20 -50 20 -38 12 -32" fill="none"/>
  </g>
  <!-- front center hero -->
  <g class="av-hero" transform="translate(100, 176) scale(1.0)" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
    <path d="M-11 -58 C-26 -44 -32 -18 -28 4 C-14 -2 2 -4 18 0 C32 -18 26 -44 11 -58 Z" fill="#D95353"/>
    <path d="M-11 -58 L-13 -30 L-7 0 L7 0 L13 -30 L11 -58 Z" fill="#3D5A80"/>
    <circle cx="0" cy="-70" r="11" fill="#3D5A80"/>
    <path d="M-11 -56 C-20 -50 -20 -38 -12 -32" fill="none"/>
    <path d="M11 -56 C20 -50 20 -38 12 -32" fill="none"/>
  </g>
</svg>
Open in Playground

tips & gotchas

Mistakes we actually made

I draw the clock face as one large circle plus a thinner inner ring so cracks read as grooves, not gaps in the fill.

Roman numerals go only at XII, III, VI, and IX to keep the face readable without crowding the small space.

The three lightning bolts use inline animation-delay so each fork flashes on its own beat.

Hero silhouettes are built from simple back-view shapes: no faces, no logos, just capes and posture.

Debris animation combines vertical translate and rotation so chunks appear to tumble as they fall.

make it yours

Remix it

  • Add a countdown glowmedium

    Place a low-opacity yellow circle behind the clock hands and pulse it on each lightning flash.

  • Make it rainmedium

    Add short dashed lines falling from the clouds with a fast vertical loop.

  • Night watch versionmedium

    Give each hero silhouette a tiny colored glow at the chest that matches one of the lightning bolt colors.

challenge extension

Make the clock hands sweep forward a few degrees on each shake loop so the clock feels like it is racing toward doomsday.

Tape it to our fridge

keep sketching

More tutorials to try

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