Skip to content
CoDdleCoDoodle home
CoDdle
Share your art
Original CharactersIntermediateSVG + CSS

Dino Pup

A chubby green dinosaur-puppy hybrid sits proudly in tiny rescue gear beside a toy rescue truck. Sunshine spikes, a wagging tail, a blinking light bar, and a popping heart bubble make this original character feel ready for a backyard mission.

This coded drawing is an original character study created for educational purposes only. Dino Pup is an affectionate nod to rescue-pup cartoons and does not depict any existing character. PAW Patrol and related properties are trademarks of Spin Master Ltd. CoDoodle is not affiliated with, endorsed by, or sponsored by Spin Master or any other rights holder.

← you, in 35 minutes.

what you'll build

Here's the plan

A cheerful original rescue buddy: part puppy, part tiny dinosaur, with a helmet, vest, first-aid pack, bedroll, toy truck, paw prints, sparkles, and a little heart bubble that pops into the scene.

You’ll learn

  • Blocking a compact scene with path shapes, tufts, paw prints, and a shared shadow
  • Building a small toy truck from rectangles, paths, wheels, and badge details
  • Layering a larger character so the tail, gear, body, and head read in the right order
  • Using a tight color palette to separate rescue gear from dinosaur-puppy shapes
  • Scoping motion with prefixed classes, transform origins, and reduced-motion guards
Skill level
Intermediate
Time
~35 min
Tools
Just a browser
Code type
SVG + CSS
Lines
~144

the steps

Build it, one change at a time

  1. Set the backyard rescue path

    Start with warm paper, one soft navy shadow, and a tan dirt path. Mint grass tufts, stones, and paw prints make the stage feel playful before the characters arrive.

    <svg class="dp" role="img" aria-label="A warm cream stage with a dirt path, mint grass tufts, small stones, paw prints, and a soft shadow" viewBox="0 0 200 200" width="200" height="200">
    <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
    <ellipse class="dp-shadow" cx="94" cy="166" rx="70" ry="10" fill="#2B3A55" opacity="0.1" stroke="none"/>
    <path d="M18 169 C48 146 76 151 104 161 C132 172 158 162 184 148 L184 200 L18 200 Z" fill="#E4B06A" opacity="0.42" stroke="none"/>

    the dirt path and grass take shape

  2. Park the toy truck

    The truck stays small and boxy so it reads as a prop next to the larger pup. A roof light, paw badge, chunky wheels, and tiny winch hook give it rescue-toy energy.

      <g stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <path d="M28 139 H62 C68 139 73 144 73 151 V163 H22 V148 C22 143 24 139 28 139 Z" fill="#FF6B5E" stroke-width="2.4"/>
      <path d="M31 128 H53 L63 139 H28 Z" fill="#FF6B5E" stroke-width="2.4"/>
      <rect x="38" y="124" width="16" height="6" rx="2" fill="#FFFDF7" stroke-width="1.6"/>
      <rect class="dp-truck-light-blue" x="39" y="123" width="7" height="5" rx="1.5" fill="#6FA8FF" stroke-width="1.4"/>
      <rect class="dp-truck-light-red" x="47" y="123" width="7" height="5" rx="1.5" fill="#FF6B5E" stroke-width="1.4"/>

    a tiny rescue truck rolls in

  3. Draw Dino Pup and the rescue gear

    Build the pup from back to front: tail and pack first, then body, legs, floppy ears, head, helmet, vest, and medallion. This keeps the silhouette clear while the gear adds story.

        <path class="dp-tail" d="M137 132 C162 126 177 133 184 145 C172 153 152 153 135 142 Z" fill="#8CA86B" stroke-width="2.8"/>
      <path d="M151 136 L155 127 L160 137 Z" fill="#FFD84D" stroke-width="1.6"/>
      <path d="M165 140 L169 132 L174 142 Z" fill="#FFD84D" stroke-width="1.6"/>
      <circle cx="157" cy="143" r="3" fill="#4E6E58" stroke="none"/>
      <circle cx="174" cy="146" r="2.4" fill="#4E6E58" stroke="none"/>
      <rect x="112" y="79" width="35" height="24" rx="8" fill="#6FA8FF" stroke-width="2.4"/>
      <path d="M116 82 C125 76 137 76 146 82" fill="none" stroke="#FFFDF7" stroke-width="2"/>
      <rect x="116" y="90" width="36" height="28" rx="7" fill="#FF6B5E" stroke-width="2.4"/>
      <path d="M128 97 H140 M134 91 V103" fill="none" stroke="#FFFDF7" stroke-width="3"/>

    the green rescue pup takes over the scene

  4. Add the rescue signal motion

    The final CSS wags the tail from its base, bobs the head, alternates the truck lights, pulses the heart bubble, and twinkles the sparkles. Every animation sits inside the reduced-motion media query.

    @media (prefers-reduced-motion: no-preference) {
    .dp .dp-shadow { animation: dp-shadow 2.8s ease-in-out infinite; }
    .dp .dp-tail { animation: dp-tail-wag 0.9s ease-in-out infinite; }
    .dp .dp-head { animation: dp-head-bob 2.8s ease-in-out infinite; }
    .dp .dp-truck-light-blue { animation: dp-light-blue 1.2s steps(1, end) infinite; }
    .dp .dp-truck-light-red { animation: dp-light-red 1.2s steps(1, end) infinite; }
    .dp .dp-heart-bubble { animation: dp-heart-pop 2.4s ease-in-out infinite; }
    .dp .dp-spark { animation: dp-sparkle 2s ease-in-out infinite; }
  }

    tail wags, lights blink, and the heart pops

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="dp" role="img" aria-label="A green dinosaur-puppy in rescue gear sits beside a blinking toy rescue truck with a heart bubble, sparkles, paw prints, and grass" viewBox="0 0 200 200" width="200" height="200">
    <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
    <ellipse class="dp-shadow" cx="94" cy="166" rx="70" ry="10" fill="#2B3A55" opacity="0.1" stroke="none"/>
    <path d="M18 169 C48 146 76 151 104 161 C132 172 158 162 184 148 L184 200 L18 200 Z" fill="#E4B06A" opacity="0.42" stroke="none"/>
    <g stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <g fill="#5ECBB4" stroke-width="1.8">
        <path d="M21 157 C22 148 25 142 29 137 C29 146 27 153 25 160 Z"/>
        <path d="M31 159 C34 151 39 146 45 143 C42 151 38 156 33 162 Z"/>
        <path d="M157 143 C158 132 162 126 167 121 C166 132 164 139 160 147 Z"/>
        <path d="M171 151 C176 143 181 139 187 136 C184 146 180 152 174 156 Z"/>
        <path d="M76 177 C78 169 82 164 87 161 C85 170 82 175 78 180 Z"/>
      </g>
      <g fill="#2B3A55" opacity="0.72" stroke="none">
        <ellipse cx="126" cy="176" rx="5" ry="3" transform="rotate(18 126 176)"/>
        <circle cx="119" cy="169" r="1.8"/>
        <circle cx="124" cy="167" r="1.8"/>
        <circle cx="130" cy="168" r="1.8"/>
        <ellipse cx="47" cy="181" rx="4.5" ry="2.8" transform="rotate(-14 47 181)"/>
        <circle cx="41" cy="175" r="1.6"/>
        <circle cx="47" cy="173" r="1.6"/>
        <circle cx="52" cy="175" r="1.6"/>
      </g>
      <g fill="#E4B06A" stroke-width="1.4">
        <ellipse cx="148" cy="177" rx="4" ry="2.4"/>
        <ellipse cx="30" cy="186" rx="3.6" ry="2.2"/>
        <ellipse cx="171" cy="166" rx="3.2" ry="2"/>
      </g>
    </g>
    <g stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <path d="M28 139 H62 C68 139 73 144 73 151 V163 H22 V148 C22 143 24 139 28 139 Z" fill="#FF6B5E" stroke-width="2.4"/>
      <path d="M31 128 H53 L63 139 H28 Z" fill="#FF6B5E" stroke-width="2.4"/>
      <rect x="38" y="124" width="16" height="6" rx="2" fill="#FFFDF7" stroke-width="1.6"/>
      <rect class="dp-truck-light-blue" x="39" y="123" width="7" height="5" rx="1.5" fill="#6FA8FF" stroke-width="1.4"/>
      <rect class="dp-truck-light-red" x="47" y="123" width="7" height="5" rx="1.5" fill="#FF6B5E" stroke-width="1.4"/>
      <path d="M34 133 H49 L55 139 H32 Z" fill="#6FA8FF" opacity="0.78" stroke-width="1.6"/>
      <path d="M39 148 C37 145 33 146 33 149 C33 153 39 156 39 156 C39 156 45 153 45 149 C45 146 41 145 39 148 Z" fill="#FFFDF7" stroke-width="1.4"/>
      <circle cx="33" cy="163" r="8" fill="#2B3A55" stroke-width="2"/>
      <circle cx="62" cy="163" r="8" fill="#2B3A55" stroke-width="2"/>
      <circle cx="33" cy="163" r="3.3" fill="#FFFDF7" stroke="none"/>
      <circle cx="62" cy="163" r="3.3" fill="#FFFDF7" stroke="none"/>
      <path d="M22 158 H17 C14 158 14 163 18 164" fill="none" stroke-width="2"/>
    </g>
    <g stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <path class="dp-tail" d="M137 132 C162 126 177 133 184 145 C172 153 152 153 135 142 Z" fill="#8CA86B" stroke-width="2.8"/>
      <path d="M151 136 L155 127 L160 137 Z" fill="#FFD84D" stroke-width="1.6"/>
      <path d="M165 140 L169 132 L174 142 Z" fill="#FFD84D" stroke-width="1.6"/>
      <circle cx="157" cy="143" r="3" fill="#4E6E58" stroke="none"/>
      <circle cx="174" cy="146" r="2.4" fill="#4E6E58" stroke="none"/>
      <rect x="112" y="79" width="35" height="24" rx="8" fill="#6FA8FF" stroke-width="2.4"/>
      <path d="M116 82 C125 76 137 76 146 82" fill="none" stroke="#FFFDF7" stroke-width="2"/>
      <rect x="116" y="90" width="36" height="28" rx="7" fill="#FF6B5E" stroke-width="2.4"/>
      <path d="M128 97 H140 M134 91 V103" fill="none" stroke="#FFFDF7" stroke-width="3"/>
      <path d="M150 105 H166 V130 H150 Z" fill="#FF6B5E" stroke-width="2.2"/>
      <path d="M153 111 H164 M153 116 H164 M153 121 H164" fill="none" stroke-width="1.4" opacity="0.55"/>
      <path d="M151 116 C149 113 145 114 145 117 C145 121 151 123 151 123 C151 123 157 121 157 117 C157 114 153 113 151 116 Z" fill="#E4B06A" stroke-width="1.6"/>
      <ellipse cx="101" cy="138" rx="43" ry="36" fill="#8CA86B" stroke-width="3"/>
      <path d="M76 132 C70 151 70 164 84 166 C93 164 93 146 87 132 Z" fill="#8CA86B" stroke-width="2.8"/>
      <path d="M121 132 C116 151 117 165 131 167 C141 163 140 146 133 132 Z" fill="#8CA86B" stroke-width="2.8"/>
      <path d="M80 166 H91 M126 167 H139" fill="none" stroke-width="2"/>
      <path d="M66 118 C53 113 47 95 57 83 C68 83 75 94 74 108 Z" fill="#4E6E58" stroke-width="2.8"/>
      <g class="dp-head">
        <path d="M88 55 C103 43 131 48 141 68 C153 95 135 120 106 122 C78 124 61 105 66 82 C69 70 77 62 88 55 Z" fill="#8CA86B" stroke-width="3"/>
        <path d="M142 75 C156 74 165 86 160 102 C157 113 148 119 139 118 C146 104 148 88 142 75 Z" fill="#4E6E58" stroke-width="2.8"/>
        <path d="M82 59 L88 47 L95 59 Z" fill="#FFD84D" stroke-width="1.8"/>
        <path d="M99 53 L106 40 L113 55 Z" fill="#FFD84D" stroke-width="1.8"/>
        <path d="M118 57 L126 45 L132 61 Z" fill="#FFD84D" stroke-width="1.8"/>
        <path d="M76 69 C83 52 128 48 146 68 L145 79 C123 68 98 66 74 77 Z" fill="#FF6B5E" stroke-width="2.8"/>
        <path d="M91 58 C105 52 124 54 139 66" fill="none" stroke="#FFD84D" stroke-width="2.4"/>
        <path d="M102 55 L126 60 L122 76 L98 72 Z" fill="#FFD84D" stroke-width="2"/>
        <path d="M108 64 C107 59 113 57 116 61 C119 57 125 60 123 65 C122 70 116 73 116 73 C116 73 110 70 108 64 Z" fill="#FFFDF7" stroke-width="1.6"/>
        <circle cx="92" cy="88" r="10" fill="#FFFDF7" stroke-width="2.4"/>
        <circle cx="124" cy="90" r="10" fill="#FFFDF7" stroke-width="2.4"/>
        <circle cx="95" cy="88" r="5.5" fill="#2B3A55" stroke="none"/>
        <circle cx="127" cy="90" r="5.5" fill="#2B3A55" stroke="none"/>
        <circle cx="93" cy="85" r="1.9" fill="#FFFDF7" stroke="none"/>
        <circle cx="125" cy="87" r="1.9" fill="#FFFDF7" stroke="none"/>
        <ellipse cx="110" cy="102" rx="7" ry="5" fill="#2B3A55" stroke="none"/>
        <path d="M110 107 C105 113 94 113 90 106" fill="none" stroke-width="2.4"/>
        <path d="M110 107 C116 115 127 113 130 105" fill="none" stroke-width="2.4"/>
        <path d="M101 115 Q111 125 121 115" fill="#FF6B5E" stroke-width="1.8"/>
        <ellipse cx="79" cy="103" rx="6" ry="4" fill="#FF6B5E" opacity="0.46" stroke="none"/>
        <ellipse cx="135" cy="104" rx="6" ry="4" fill="#FF6B5E" opacity="0.46" stroke="none"/>
        <circle cx="78" cy="82" r="3" fill="#4E6E58" stroke="none"/>
        <circle cx="135" cy="98" r="3.2" fill="#4E6E58" stroke="none"/>
      </g>
      <path d="M82 113 C95 126 119 126 133 113 L142 139 C129 152 92 151 75 137 Z" fill="#FF6B5E" stroke-width="2.6"/>
      <path d="M86 123 C101 132 120 133 137 123" fill="none" stroke="#FFFDF7" stroke-width="3"/>
      <circle cx="109" cy="133" r="9" fill="#2B3A55" stroke-width="2"/>
      <path d="M109 128 C107 125 103 126 103 130 C103 135 109 138 109 138 C109 138 115 135 115 130 C115 126 111 125 109 128 Z" fill="#FFFDF7" stroke="none"/>
      <circle cx="93" cy="145" r="3.4" fill="#4E6E58" stroke="none"/>
      <circle cx="124" cy="146" r="3" fill="#4E6E58" stroke="none"/>
      <circle cx="109" cy="153" r="2.8" fill="#4E6E58" stroke="none"/>
    </g>
    <g class="dp-heart-bubble" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <path d="M151 38 C151 27 162 20 174 25 C185 30 186 45 177 53 C168 61 155 58 151 48 L143 54 Z" fill="#FFFDF7" stroke-width="2"/>
      <path d="M166 37 C163 32 156 34 156 40 C156 48 166 53 166 53 C166 53 177 48 177 40 C177 34 169 32 166 37 Z" fill="#FF6B5E" stroke-width="1.8"/>
    </g>
    <path class="dp-spark" d="M55 78 L58 84 L64 86 L58 88 L55 94 L52 88 L46 86 L52 84 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
    <path class="dp-spark" d="M174 72 L176 77 L181 79 L176 81 L174 86 L172 81 L167 79 L172 77 Z" fill="#5ECBB4" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
Open in Playground

tips & gotchas

Mistakes we actually made

I keep the truck low and compact so it supports the story without competing with the pup's face.

I draw the tail before the body, then animate it from the left edge where it meets the pup.

I use the same coral on helmet, vest, and truck so the rescue gear feels like one kit.

I keep the bedroll sky-blue because it separates cleanly from the red pack and green body.

I save the heart bubble and sparkles for the final pass so the tutorial ends with personality.

make it yours

Remix it

  • Swap the badgeeasy

    Change the helmet shield and medallion to a star, bolt, or tiny bone shape.

  • Add muddy trackseasy

    Place two tan dashed curves behind the truck and fade them into the path.

  • Pack a rescue ropemedium

    Draw a looped rope on the saddle pack and animate a gentle sway beside the pouch.

challenge extension

Make Dino Pup do a happy rescue bounce by lifting the body a few pixels while the shadow squashes underneath.

Tape it to our fridge

keep sketching

More tutorials to try

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