Ariana Grande: Petal

A minimal continuous-line singer icon in profile: high ponytail, faceless outline, handheld microphone, tiny crescent moon, and flat pink petals drifting on a warm cream stage. An advanced study in negative space and restrained animation.

You’ll learn

• Drawing a readable faceless profile from a single continuous path
• Adding a high ponytail and microphone with clean negative space
• Placing a tiny crescent moon as a subtle accent
• Scattering flat petal ellipses at different rotations
• Animating a gentle body breathe and petal drift without overcomplicating the scene

1. 1

   Set a warm cream stage

   Start with a warm cream rounded square. The neutral stage keeps the focus on the navy line drawing and the pink petals.

   index.html

   copy code

   <svg class="ag" viewBox="0 0 200 200" width="200" height="200">
     <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" />
   </svg>
   

   a warm cream paper stage ready for line art.

2. 2

   Draw the continuous profile

   Build the figure as one continuous navy stroke: a small faceless profile, a high ponytail sweeping up and back, and a simple shoulder/body line that reads as a singer in one glance.

   index.html

   copy code

   <svg class="ag" viewBox="0 0 200 200" width="200" height="200">
     <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" />
     <path class="ag-figure" d="M84 152 C80 144 78 134 82 124 C84 116 78 110 74 102 C70 90 76 74 90 64 C102 56 120 58 130 68 C138 62 152 64 158 78 C164 92 160 112 146 120 C138 124 128 122 122 116 C120 124 116 130 112 134 C116 144 124 150 134 148 C122 154 102 156 84 152 Z" fill="none" stroke="#2B3A55" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" />
   </svg>
   

   a single navy line becomes a faceless singer profile.

3. 3

   Add microphone, moon, and petals

   Place a chunky handheld microphone at the figure's mouth. Add a tiny filled crescent moon in the upper left. Scatter a few flat pink ellipse petals around the frame, each rotated slightly.

   index.html

   copy code

   <svg class="ag" viewBox="0 0 200 200" width="200" height="200">
     <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" />
     <path class="ag-figure" d="M84 152 C80 144 78 134 82 124 C84 116 78 110 74 102 C70 90 76 74 90 64 C102 56 120 58 130 68 C138 62 152 64 158 78 C164 92 160 112 146 120 C138 124 128 122 122 116 C120 124 116 130 112 134 C116 144 124 150 134 148 C122 154 102 156 84 152 Z" fill="none" stroke="#2B3A55" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" />
     <path class="ag-moon" d="M54 46 A10 10 0 1 0 54 64 A7 7 0 1 1 54 46 Z" fill="#2B3A55" />
     <g class="ag-mic" stroke="#2B3A55" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none">
       <circle cx="58" cy="108" r="11" />
       <path d="M50 117 L40 144 C39 147 43 149 46 147 L58 120" />
     </g>
     <ellipse class="ag-petal" style="animation-delay:0s" cx="42" cy="92" rx="13" ry="7" fill="#FF8FA3" transform="rotate(-15 42 92)" />
     <ellipse class="ag-petal" style="animation-delay:0.8s" cx="166" cy="102" rx="12" ry="7" fill="#FF8FA3" transform="rotate(18 166 102)" />
     <ellipse class="ag-petal" style="animation-delay:1.6s" cx="56" cy="166" rx="13" ry="8" fill="#FF8FA3" transform="rotate(-28 56 166)" />
   </svg>
   

   microphone, moon, and petals complete the icon.

4. 4

   Animate breathe and petal drift

   Add CSS keyframes that give the figure a tiny breathing scale and let each petal drift up and down while subtly rotating. Inline animation-delay keeps the petals staggered.

   style.css

   copy code

   @media (prefers-reduced-motion: no-preference) {
     .ag .ag-figure { transform-box: fill-box; transform-origin: center bottom; animation: ag-breathe 4s ease-in-out infinite; }
     .ag .ag-petal { transform-box: fill-box; transform-origin: center; animation: ag-drift 5s ease-in-out infinite; }
   }
   @keyframes ag-breathe { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.01) translateY(-2px); } }
   @keyframes ag-drift { 0%, 100% { transform: translateY(0) rotate(-4deg); opacity: 0.95; } 50% { transform: translateY(10px) rotate(4deg); opacity: 0.75; } }
   

   the figure breathes gently while petals drift and spin.

Skipped straight to the end? Welcome. Copy the whole thing, download it, or open it in the Playground to start remixing.

<svg class="ag" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A faceless line-art singer sings into a microphone while petals drift by">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
  <path class="ag-figure" d="M84 152 C80 144 78 134 82 124 C84 116 78 110 74 102 C70 90 76 74 90 64 C102 56 120 58 130 68 C138 62 152 64 158 78 C164 92 160 112 146 120 C138 124 128 122 122 116 C120 124 116 130 112 134 C116 144 124 150 134 148 C122 154 102 156 84 152 Z" fill="none" stroke="#2B3A55" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/>
  <path class="ag-moon" d="M54 46 A10 10 0 1 0 54 64 A7 7 0 1 1 54 46 Z" fill="#2B3A55"/>
  <g class="ag-mic" stroke="#2B3A55" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none">
    <circle cx="58" cy="108" r="11"/>
    <path d="M50 117 L40 144 C39 147 43 149 46 147 L58 120"/>
  </g>
  <ellipse class="ag-petal" style="animation-delay:0s" cx="42" cy="92" rx="13" ry="7" fill="#FF8FA3" transform="rotate(-15 42 92)"/>
  <ellipse class="ag-petal" style="animation-delay:0.8s" cx="166" cy="102" rx="12" ry="7" fill="#FF8FA3" transform="rotate(18 166 102)"/>
  <ellipse class="ag-petal" style="animation-delay:1.6s" cx="56" cy="166" rx="13" ry="8" fill="#FF8FA3" transform="rotate(-28 56 166)"/>
  <ellipse class="ag-petal" style="animation-delay:2.4s" cx="106" cy="174" rx="12" ry="7" fill="#FF8FA3" transform="rotate(8 106 174)"/>
  <ellipse class="ag-petal" style="animation-delay:3.2s" cx="154" cy="164" rx="14" ry="8" fill="#FF8FA3" transform="rotate(-12 154 164)"/>
  <ellipse class="ag-petal" style="animation-delay:4.0s" cx="70" cy="64" rx="10" ry="6" fill="#FF8FA3" transform="rotate(24 70 64)"/>
  <ellipse class="ag-petal" style="animation-delay:4.8s" cx="172" cy="68" rx="11" ry="7" fill="#FF8FA3" transform="rotate(-22 172 68)"/>
</svg>

• Add a spotlight halomedium

  Draw a soft radial glow behind the figure and animate its opacity to pulse like a stage light.

• Sparkle mic grilleeasy

  Add tiny dot sparkles on the microphone circle that twinkle in sequence.

• Duet profilemedium

  Mirror a smaller continuous profile on the right and offset its breathe loop to suggest two singers.