Original CharactersIntermediateSVG + CSS

Galaxy Dinosaur

A cheerful green dinosaur adventurer plants tiny orange sneakers on a blue ringed planet, raises a navy spyglass, and scans a warm cream galaxy full of stars, comets, and a crescent moon. It is an original character study with a gentle bob, waving flag, twinkling stars, and drifting comet trails.

← you, in 35 minutes.

what you'll build

Here's the plan

A cheerful green dinosaur adventurer standing on a tiny blue planet, peeking through a navy spyglass while a pennant waves nearby. The final doodle adds a crescent moon, twinkling stars, drifting comets, and a soft bobbing loop.

You’ll learn

Layering a ringed planet so the orbit passes behind and in front
Building a chubby cartoon dinosaur from rounded SVG paths
Adding character props like a neckerchief, backpack strap, compass, and spyglass
Filling a compact space scene with stars, sparkles, a moon, and comets
Scoping SVG animation with prefers-reduced-motion and prefixed keyframes

Skill level: Intermediate
Time: ~35 min
Tools: Just a browser
Code type: SVG + CSS
Lines: ~131

the steps

Build it, one change at a time

Plant the tiny planet

Start with the warm paper stage, then draw the planet ring behind the blue sphere before adding craters and the planted pennant. A final front arc sells the ring passing around the planet.

<svg class="gd" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A cheerful galaxy dinosaur adventure scene begins with a tiny ringed blue planet and an orange pennant flag on warm cream paper">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
  <g class="gd-world" stroke-linecap="round" stroke-linejoin="round">
    <path d="M34 170 C68 144 132 144 166 170 C164 173 162 175 160 176 C129 151 71 151 40 176 C38 174 36 172 34 170 Z" fill="#E4B06A" stroke="#2B3A55" stroke-width="1.8"/>
    <circle cx="100" cy="175" r="55" fill="#6FA8FF" stroke="#2B3A55" stroke-width="3.2"/>
    <circle cx="70" cy="153" r="8" fill="#4E6E58" opacity="0.35" stroke="#2B3A55" stroke-width="1.6"/>
    <circle cx="114" cy="144" r="6" fill="#4E6E58" opacity="0.3" stroke="#2B3A55" stroke-width="1.4"/>
    <circle cx="137" cy="166" r="9" fill="#4E6E58" opacity="0.3" stroke="#2B3A55" stroke-width="1.6"/>
    <circle cx="91" cy="184" r="4" fill="#4E6E58" opacity="0.28" stroke="none"/>
    <path d="M147 142 L147 88" fill="none" stroke="#2B3A55" stroke-width="2.4"/>
    <path class="gd-flag" d="M147 90 C158 84 166 91 176 86 L171 102 C161 107 156 99 147 104 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2"/>
    <path d="M161 92 L163 96 L168 96 L164 99 L166 104 L161 101 L156 104 L158 99 L154 96 L159 96 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
    <path d="M38 174 C70 192 130 192 162 174 L159 179 C130 187 70 187 41 179 Z" fill="#E4B06A" stroke="#2B3A55" stroke-width="1.8"/>
  </g>
</svg>

a tiny planet ready for footprints

Build the dino body

The dinosaur begins as big soft shapes: tail, legs, sneakers, rounded body, belly plates, spots, and tan spikes. Keep the feet low so they stand right on the planet curve.

  <g class="gd-dino" stroke-linecap="round" stroke-linejoin="round">
    <path d="M56 128 C43 134 34 136 25 132 C40 124 51 113 64 100 Z" fill="#8CA86B" stroke="#2B3A55" stroke-width="2.8"/>
    <path d="M132 127 C152 123 163 112 172 97 C169 119 156 133 136 139 Z" fill="#8CA86B" stroke="#2B3A55" stroke-width="2.8"/>
    <g class="gd-legs" stroke="#2B3A55" stroke-width="2.6">
      <path d="M77 119 C72 126 71 134 76 139 L91 139 C89 130 89 123 94 117 Z" fill="#8CA86B"/>
      <path d="M114 119 C120 126 121 134 116 139 L101 139 C103 130 103 123 98 117 Z" fill="#8CA86B"/>
      <path d="M70 137 C77 132 88 134 93 140 C87 146 72 146 66 142 C66 140 67 138 70 137 Z" fill="#FF6B5E"/>
      <path d="M106 140 C111 133 123 133 130 138 C132 141 130 144 126 145 C116 147 106 145 102 142 Z" fill="#FF6B5E"/>

a dino body balanced on the planet

Give the adventurer a mission

Add the neckerchief, happy face, compass strap, and raised arm holding the spyglass. These small props turn the dinosaur from cute character into explorer.

    <path d="M64 90 C70 87 76 89 78 94 C74 99 67 99 63 96 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.4"/>
    <path d="M66 95 C74 101 84 103 92 102 L79 117 C70 113 65 105 66 95 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.4"/>
    <path d="M76 45 C88 38 111 37 125 46" fill="none" stroke="#2B3A55" stroke-width="2.2"/>
    <g class="gd-face">
      <circle cx="96" cy="61" r="7" fill="#2B3A55" stroke="none"/>
      <circle cx="122" cy="62" r="7" fill="#2B3A55" stroke="none"/>
      <circle cx="98" cy="58" r="2.5" fill="#FFFDF7" stroke="none"/>
      <circle cx="124" cy="59" r="2.5" fill="#FFFDF7" stroke="none"/>
      <circle cx="80" cy="76" r="4" fill="#FF6B5E" opacity="0.55" stroke="none"/>
      <circle cx="134" cy="77" r="4" fill="#FF6B5E" opacity="0.55" stroke="none"/>
      <path d="M92 77 Q105 91 122 78" fill="none" stroke="#2B3A55" stroke-width="2.6"/>
      <path d="M100 88 L105 87 L103 96 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.6"/>
    </g>

a cheerful explorer checking the stars

Animate the galaxy

Finish the sky with a crescent moon, stars, a tiny ringed planet, and comet streaks. The CSS keeps motion gentle: bob the dino, wave the flag, twinkle the stars, and drift the comets.

@media (prefers-reduced-motion: no-preference) {
  .gd .gd-dino { animation: gd-bob 3.2s ease-in-out infinite; }
  .gd .gd-flag { animation: gd-wave 1.8s ease-in-out infinite; }
  .gd .gd-twinkle { animation: gd-twinkle 2.7s ease-in-out infinite; }
  .gd .gd-twinkle-b { animation-delay: -0.9s; }
  .gd .gd-twinkle-c { animation-delay: -1.8s; }
  .gd .gd-comet { animation: gd-drift 4.4s ease-in-out infinite; }
}

a softly moving galaxy adventure

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="gd" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A cheerful green dinosaur adventurer in orange sneakers stands on a tiny blue ringed planet, looking through a navy spyglass beneath a crescent moon, stars, comets, and a tiny ringed planet">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
  <g class="gd-world" stroke-linecap="round" stroke-linejoin="round">
    <path d="M34 170 C68 144 132 144 166 170 C164 173 162 175 160 176 C129 151 71 151 40 176 C38 174 36 172 34 170 Z" fill="#E4B06A" stroke="#2B3A55" stroke-width="1.8"/>
    <circle cx="100" cy="175" r="55" fill="#6FA8FF" stroke="#2B3A55" stroke-width="3.2"/>
    <circle cx="70" cy="153" r="8" fill="#4E6E58" opacity="0.35" stroke="#2B3A55" stroke-width="1.6"/>
    <circle cx="114" cy="144" r="6" fill="#4E6E58" opacity="0.3" stroke="#2B3A55" stroke-width="1.4"/>
    <circle cx="137" cy="166" r="9" fill="#4E6E58" opacity="0.3" stroke="#2B3A55" stroke-width="1.6"/>
    <circle cx="91" cy="184" r="4" fill="#4E6E58" opacity="0.28" stroke="none"/>
    <path d="M147 142 L147 88" fill="none" stroke="#2B3A55" stroke-width="2.4"/>
    <path class="gd-flag" d="M147 90 C158 84 166 91 176 86 L171 102 C161 107 156 99 147 104 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2"/>
    <path d="M161 92 L163 96 L168 96 L164 99 L166 104 L161 101 L156 104 L158 99 L154 96 L159 96 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
    <path d="M38 174 C70 192 130 192 162 174 L159 179 C130 187 70 187 41 179 Z" fill="#E4B06A" stroke="#2B3A55" stroke-width="1.8"/>
  </g>
  <g class="gd-dino" stroke-linecap="round" stroke-linejoin="round">
    <path d="M56 128 C43 134 34 136 25 132 C40 124 51 113 64 100 Z" fill="#8CA86B" stroke="#2B3A55" stroke-width="2.8"/>
    <path d="M132 127 C152 123 163 112 172 97 C169 119 156 133 136 139 Z" fill="#8CA86B" stroke="#2B3A55" stroke-width="2.8"/>
    <g class="gd-legs" stroke="#2B3A55" stroke-width="2.6">
      <path d="M77 119 C72 126 71 134 76 139 L91 139 C89 130 89 123 94 117 Z" fill="#8CA86B"/>
      <path d="M114 119 C120 126 121 134 116 139 L101 139 C103 130 103 123 98 117 Z" fill="#8CA86B"/>
      <path d="M70 137 C77 132 88 134 93 140 C87 146 72 146 66 142 C66 140 67 138 70 137 Z" fill="#FF6B5E"/>
      <path d="M106 140 C111 133 123 133 130 138 C132 141 130 144 126 145 C116 147 106 145 102 142 Z" fill="#FF6B5E"/>
      <rect x="74" y="136" width="14" height="2.4" rx="1.2" fill="#FFFDF7" stroke="none"/>
      <rect x="111" y="138" width="14" height="2.4" rx="1.2" fill="#FFFDF7" stroke="none"/>
    </g>
    <path d="M63 77 C64 51 82 34 107 36 C132 38 148 59 145 87 C142 118 125 134 99 134 C76 134 61 113 63 77 Z" fill="#8CA86B" stroke="#2B3A55" stroke-width="3.2"/>
    <path d="M91 71 C104 67 120 72 126 88 C132 105 121 123 103 125 C88 126 78 115 76 101 C74 86 79 76 91 71 Z" fill="#E4B06A" stroke="#2B3A55" stroke-width="2.4"/>
    <path d="M85 88 Q101 91 121 88" fill="none" stroke="#2B3A55" stroke-width="1.4" opacity="0.45"/>
    <path d="M82 101 Q101 106 125 102" fill="none" stroke="#2B3A55" stroke-width="1.4" opacity="0.45"/>
    <path d="M86 114 Q102 119 119 114" fill="none" stroke="#2B3A55" stroke-width="1.4" opacity="0.45"/>
    <circle cx="80" cy="62" r="4.5" fill="#4E6E58" stroke="none"/>
    <circle cx="71" cy="88" r="5" fill="#4E6E58" stroke="none"/>
    <circle cx="132" cy="86" r="4.5" fill="#4E6E58" stroke="none"/>
    <circle cx="116" cy="48" r="4" fill="#4E6E58" stroke="none"/>
    <path d="M82 38 L75 24 L94 33 Z" fill="#E4B06A" stroke="#2B3A55" stroke-width="2.2"/>
    <path d="M101 35 L100 19 L116 33 Z" fill="#E4B06A" stroke="#2B3A55" stroke-width="2.2"/>
    <path d="M122 43 L130 29 L136 48 Z" fill="#E4B06A" stroke="#2B3A55" stroke-width="2.2"/>
    <path d="M142 68 L157 59 L153 79 Z" fill="#E4B06A" stroke="#2B3A55" stroke-width="2.2"/>
    <path d="M148 96 L165 94 L153 108 Z" fill="#E4B06A" stroke="#2B3A55" stroke-width="2.2"/>
    <path d="M65 78 C54 78 48 87 51 96 C55 91 62 92 68 96 Z" fill="#8CA86B" stroke="#2B3A55" stroke-width="2.4"/>
    <path d="M135 79 C146 78 153 87 149 97 C145 91 139 92 133 97 Z" fill="#8CA86B" stroke="#2B3A55" stroke-width="2.4"/>
    <path d="M64 90 C70 87 76 89 78 94 C74 99 67 99 63 96 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.4"/>
    <path d="M66 95 C74 101 84 103 92 102 L79 117 C70 113 65 105 66 95 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.4"/>
    <path d="M76 45 C88 38 111 37 125 46" fill="none" stroke="#2B3A55" stroke-width="2.2"/>
    <g class="gd-face">
      <circle cx="96" cy="61" r="7" fill="#2B3A55" stroke="none"/>
      <circle cx="122" cy="62" r="7" fill="#2B3A55" stroke="none"/>
      <circle cx="98" cy="58" r="2.5" fill="#FFFDF7" stroke="none"/>
      <circle cx="124" cy="59" r="2.5" fill="#FFFDF7" stroke="none"/>
      <circle cx="80" cy="76" r="4" fill="#FF6B5E" opacity="0.55" stroke="none"/>
      <circle cx="134" cy="77" r="4" fill="#FF6B5E" opacity="0.55" stroke="none"/>
      <path d="M92 77 Q105 91 122 78" fill="none" stroke="#2B3A55" stroke-width="2.6"/>
      <path d="M100 88 L105 87 L103 96 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.6"/>
    </g>
    <path d="M64 95 C55 101 51 111 55 120" fill="none" stroke="#2B3A55" stroke-width="3"/>
    <g class="gd-arm-glass" stroke-linecap="round" stroke-linejoin="round">
      <path d="M128 92 C139 83 146 70 148 57 C153 60 154 64 151 69 C147 81 140 91 134 97 Z" fill="#8CA86B" stroke="#2B3A55" stroke-width="2.6"/>
      <path d="M151 68 L171 59 L175 70 L155 79 Z" fill="#2B3A55" stroke="#2B3A55" stroke-width="2"/>
      <circle cx="174" cy="65" r="6" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2"/>
      <path d="M156 70 L168 64" fill="none" stroke="#2B3A55" stroke-width="1.4" opacity="0.35"/>
    </g>
    <path d="M76 69 C90 83 112 88 134 80" fill="none" stroke="#2B3A55" stroke-width="2.2"/>
    <path d="M77 70 C83 90 92 107 105 122" fill="none" stroke="#2B3A55" stroke-width="3.2"/>
    <circle cx="106" cy="125" r="6" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2"/>
    <path d="M106 122 L108 126 L112 126 L109 129 L110 133 L106 131 L102 133 L103 129 L100 126 L104 126 Z" fill="#E4B06A" stroke="#2B3A55" stroke-width="1.4"/>
  </g>
  <g class="gd-space" stroke-linecap="round" stroke-linejoin="round">
    <path d="M44 25 C31 29 24 43 28 56 C32 70 45 77 58 73 C47 68 42 58 45 46 C48 36 55 30 64 27 C58 23 51 22 44 25 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="2.2"/>
    <circle cx="42" cy="44" r="3" fill="#E4B06A" stroke="#2B3A55" stroke-width="1.4" opacity="0.65"/>
    <circle cx="52" cy="56" r="2.6" fill="#E4B06A" stroke="none" opacity="0.7"/>
    <circle cx="36" cy="59" r="2" fill="#E4B06A" stroke="none" opacity="0.7"/>
    <g class="gd-tiny-planet">
      <path d="M141 38 C151 31 164 33 175 42 C173 44 171 46 168 47 C159 40 151 39 143 42 Z" fill="#E4B06A" stroke="#2B3A55" stroke-width="1.4"/>
      <circle cx="156" cy="39" r="9" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.8"/>
      <path d="M142 42 C152 49 164 49 174 43 C172 46 170 48 166 49 C157 51 148 48 141 44 Z" fill="#E4B06A" stroke="#2B3A55" stroke-width="1.4"/>
    </g>
    <path class="gd-twinkle gd-twinkle-a" d="M33 82 L37 91 L46 95 L37 99 L33 108 L29 99 L20 95 L29 91 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.7"/>
    <path class="gd-twinkle gd-twinkle-b" d="M149 88 L152 95 L160 98 L152 101 L149 109 L146 101 L138 98 L146 95 Z" fill="none" stroke="#2B3A55" stroke-width="1.8"/>
    <path class="gd-twinkle gd-twinkle-c" d="M116 27 L118 33 L124 35 L118 38 L116 44 L113 38 L108 35 L113 33 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.6"/>
    <path class="gd-twinkle gd-twinkle-a" d="M185 24 L187 28 L191 30 L187 32 L185 36 L183 32 L179 30 L183 28 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
    <path class="gd-twinkle gd-twinkle-c" d="M21 38 L23 42 L27 44 L23 46 L21 50 L19 46 L15 44 L19 42 Z" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
    <path class="gd-twinkle gd-twinkle-b" d="M184 112 L186 116 L190 118 L186 120 L184 124 L182 120 L178 118 L182 116 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
    <circle class="gd-twinkle gd-twinkle-b" cx="171" cy="82" r="2.2" fill="#2B3A55" stroke="none"/>
    <circle class="gd-twinkle gd-twinkle-c" cx="61" cy="34" r="2" fill="#6FA8FF" stroke="none"/>
    <circle class="gd-twinkle gd-twinkle-a" cx="130" cy="22" r="1.7" fill="#2B3A55" stroke="none"/>
    <circle class="gd-twinkle gd-twinkle-b" cx="88" cy="26" r="1.5" fill="#6FA8FF" stroke="none"/>
    <circle class="gd-twinkle gd-twinkle-c" cx="21" cy="117" r="1.8" fill="#2B3A55" stroke="none"/>
    <circle class="gd-twinkle gd-twinkle-a" cx="183" cy="151" r="1.6" fill="#6FA8FF" stroke="none"/>
    <path d="M72 29 L72 38 M67 33 L77 33" fill="none" stroke="#2B3A55" stroke-width="1.8"/>
    <path d="M37 123 L37 132 M32 128 L42 128" fill="none" stroke="#2B3A55" stroke-width="1.8"/>
    <path d="M164 130 L164 139 M159 135 L169 135" fill="none" stroke="#2B3A55" stroke-width="1.8"/>
    <path d="M102 20 L102 27 M98 24 L106 24" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
    <path d="M17 74 L17 81 M13 78 L21 78" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
    <path d="M178 63 L178 70 M174 67 L182 67" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
    <path class="gd-comet gd-comet-a" d="M34 151 C42 143 48 139 55 134 L58 137 C49 143 42 149 36 158 Z" fill="#FF6B5E" stroke="none" opacity="0.72"/>
    <path class="gd-comet gd-comet-a" d="M30 160 C36 152 42 147 49 143 L51 146 C43 151 37 157 32 165 Z" fill="#FF6B5E" stroke="none" opacity="0.45"/>
    <circle cx="55" cy="142" r="2.8" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
    <circle cx="34" cy="156" r="1.7" fill="#FFD84D" stroke="none"/>
  </g>
</svg>

Open in Playground

tips & gotchas

Mistakes we actually made

I draw the planet ring in two passes so the back arc disappears behind the blue sphere and the front arc returns at the edges.

I keep all strokes navy and rounded, then let fill colors do the storytelling: green body, tan belly, blue gear, coral shoes.

I place the feet around y 137 so the dino reads as standing on the planet dome, not floating in front of it.

I use only a few spots and belly curves; too many tiny marks make the character busy once the star field arrives.

I animate the flag from its pole edge because a center-origin wave makes the pennant look detached from the flagpole.

make it yours

Remix it

Swap the flag iconeasy
Change the star on the orange pennant into a moon, heart, or tiny planet badge without touching the animation.
Add a second mooneasy
Draw a smaller crescent on the opposite side and give it a few crater dots to balance the sky.
Make the spyglass glowmedium
Add a pale blue cone from the lens and pulse its opacity on a slow loop while the dinosaur bobs.

challenge extension

Add a tiny alien postcard tucked into the backpack strap, then animate it with a very small wiggle whenever the dinosaur reaches the top of its bob.

Tape it to our fridge

keep sketching

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