Red Velvet — Surfin' Boy

A tiny surf scene drawn in SVG: a coral striped board rocking on soft waves, a pulsing sunshine, and a twinkling star. A generic summer-vibe study inspired by a trending music mood.

You’ll learn

• Drawing a surfboard shape with a single tapered path
• Adding waves with smooth bezier curves that can slide horizontally
• Building a sunshine burst from a circle plus radiating lines
• Coordinating small rocking, sliding, and pulsing animations

1. 1

   Set the beach stage

   Start with the warm paper square and one soft shadow where the board will stand. This gives the scene a sandy, grounded feel before any props arrive.

   index.html

   copy code

   <svg class="rv" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Warm paper beach stage">
     <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
     <ellipse cx="100" cy="170" rx="62" ry="9" fill="#2B3A55" opacity="0.1"/>
   </svg>
   

   warm paper and a patch of sand shadow.

2. 2

   Draw the surfboard

   The board is one tapered path with a cream stripe down the middle and a faint stringer line. Keep it vertical and slightly rounded at the tail so it reads as a friendly longboard.

   index.html

   copy code

   <g class="rv-board" stroke-linecap="round" stroke-linejoin="round">
     <path d="M86 42 C86 42 82 100 86 132 C88 148 96 156 100 156 C104 156 112 148 114 132 C118 100 114 42 114 42 C114 34 108 30 100 30 C92 30 86 34 86 42 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="3"/>
     <path d="M92 36 C92 36 90 100 93 130 C94 140 98 146 100 146 C102 146 106 140 107 130 C110 100 108 36 108 36" fill="none" stroke="#FFFDF7" stroke-width="5"/>
     <path d="M96 34 L96 150" fill="none" stroke="#2B3A55" stroke-width="2" opacity="0.25"/>
   </g>
   

   one longboard, ready for summer.

3. 3

   Add waves, sun, and spark

   Layer two soft wave curves behind the board, a sunshine burst in the top-right corner, and a tiny four-pointed star in the top-left. These props frame the board and add color variety.

   index.html

   copy code

   <!-- waves -->
   <g class="rv-wave" fill="none" stroke="#6FA8FF" stroke-width="4" stroke-linecap="round">
     <path d="M36 128 C56 120 76 136 96 128 C116 120 136 136 156 128"/>
     <path d="M42 142 C62 134 82 150 102 142 C122 134 142 150 162 142" stroke-width="3" opacity="0.7"/>
   </g>
   
   <!-- sun -->
   <g class="rv-sun" fill="#FFD84D" stroke="#2B3A55" stroke-width="2.2" stroke-linejoin="round">
     <circle cx="156" cy="58" r="12"/>
     <path d="M156 38 L156 32"/>
     <path d="M156 84 L156 78"/>
     <path d="M136 58 L130 58"/>
     <path d="M182 58 L176 58"/>
     <path d="M142 44 L138 38"/>
     <path d="M174 78 L170 72"/>
     <path d="M142 72 L138 78"/>
     <path d="M174 38 L170 44"/>
   </g>
   
   <!-- spark -->
   <path class="rv-spark" d="M44 56 L47 63 L44 70 L41 63 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.6" stroke-linejoin="round"/>
   

   waves, sun, and a little star — the beach is packed.

4. 4

   Animate the summer motion

   The board rocks gently from its base, the waves slide horizontally, the sun pulses, and the star twinkles. Each animation uses a different duration so the scene feels organic and breezy.

   style.css

   copy code

   @media (prefers-reduced-motion: no-preference) {
     .rv .rv-board { transform-box: fill-box; transform-origin: center bottom; animation: rv-rock 3s ease-in-out infinite; }
     .rv .rv-wave { animation: rv-wave 3s ease-in-out infinite; }
     .rv .rv-sun { transform-box: fill-box; transform-origin: center; animation: rv-pulse 2.8s ease-in-out infinite; }
     .rv .rv-spark { transform-box: fill-box; transform-origin: center; animation: rv-twinkle 2.4s ease-in-out infinite; }
   }
   @keyframes rv-rock { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
   @keyframes rv-wave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
   @keyframes rv-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.9; } }
   @keyframes rv-twinkle { 0%, 100% { opacity: 0.45; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.1); } }
   

   a board that rocks, waves that roll, a sun that pulses.

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

<svg class="rv" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A surfboard gently rocking on soft waves under a pulsing sunshine">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
  <ellipse cx="100" cy="170" rx="62" ry="9" fill="#2B3A55" opacity="0.1"/>
  <g class="rv-wave" fill="none" stroke="#6FA8FF" stroke-width="4" stroke-linecap="round">
    <path d="M36 128 C56 120 76 136 96 128 C116 120 136 136 156 128"/>
    <path d="M42 142 C62 134 82 150 102 142 C122 134 142 150 162 142" stroke-width="3" opacity="0.7"/>
  </g>
  <g class="rv-board" stroke-linecap="round" stroke-linejoin="round">
    <path d="M86 42 C86 42 82 100 86 132 C88 148 96 156 100 156 C104 156 112 148 114 132 C118 100 114 42 114 42 C114 34 108 30 100 30 C92 30 86 34 86 42 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="3"/>
    <path d="M92 36 C92 36 90 100 93 130 C94 140 98 146 100 146 C102 146 106 140 107 130 C110 100 108 36 108 36" fill="none" stroke="#FFFDF7" stroke-width="5"/>
    <path d="M96 34 L96 150" fill="none" stroke="#2B3A55" stroke-width="2" opacity="0.25"/>
  </g>
  <g class="rv-sun" fill="#FFD84D" stroke="#2B3A55" stroke-width="2.2" stroke-linejoin="round">
    <circle cx="156" cy="58" r="12"/>
    <path d="M156 38 L156 32"/>
    <path d="M156 84 L156 78"/>
    <path d="M136 58 L130 58"/>
    <path d="M182 58 L176 58"/>
    <path d="M142 44 L138 38"/>
    <path d="M174 78 L170 72"/>
    <path d="M142 72 L138 78"/>
    <path d="M174 38 L170 44"/>
  </g>
  <path class="rv-spark" d="M44 56 L47 63 L44 70 L41 63 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.6" stroke-linejoin="round"/>
</svg>

• Swap the board paletteeasy

  Change the coral fill to mint or sunshine and update the stripe color to match.

• Add a palm treemedium

  Draw a tiny curved palm on the left edge and sway its fronds on the same loop as the waves.

• Night surf versionmedium

  Switch the paper to navy, the sun to a moon, and add a few twinkling stars around the board.