Question

An illustration of a ringing bell and dots representing air molecules. The dots are close together, then far apart and close together again representing a longitudinal mechanical wave of sound going from the bell to an ear.

Answer 1

Here’s an SVG you can copy-paste into a file (save as sound_longitudinal.svg) or embed in a webpage. It shows a bell at left, an ear at right, and columns of dots that are close together (compressions), far apart (rarefaction), then close again — illustrating a longitudinal sound wave traveling from the bell to the ear.

Paste the code below into a text file and save with a .svg extension:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="300" viewBox="0 0 900 300">
<defs>
<style>
.dot { fill: #333; }
.label { font: 14px sans-serif; fill: #222; }
.arrow { stroke: #666; stroke-width: 2; fill: none; marker-end: url(#arrowhead); }
.bell { fill: #f4c542; stroke: #c98e1a; stroke-width: 2; }
.clapper { fill: #c98e1a; }
.ear { fill: none; stroke: #6a6a6a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
</style>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#666" />
</marker>
</defs>

<!-- Bell (left) -->
<g transform="translate(40,40)">
<path class="bell" d="M60 20
C20 20, 20 80, 60 100
L140 100
C180 80, 180 20, 140 20
Z"/>
<rect x="70" y="92" width="40" height="8" rx="4" fill="#e9b939"/>
<circle class="clapper" cx="100" cy="108" r="6"/>
<text class="label" x="40" y="140">Bell</text>
</g>

<!-- Ear (right) -->
<g transform="translate(740,40)">
<!-- simple ear outline -->
<path class="ear" d="M30 40
C10 40, 10 80, 30 100
C60 125, 40 140, 20 120
C10 110, 20 90, 30 90" />
<circle cx="36" cy="70" r="2.5" fill="#6a6a6a"/>
<text class="label" x="-10" y="140">Ear</text>
</g>

<!-- Dots representing air molecules: three regions -->
<!-- Region 1: compression (dots close together) -->
<g id="region1" transform="translate(220,0)">
<!-- vertical stack of dots, all at x=0 -> clustered -->
<g fill="#333" stroke="none">
<circle class="dot" cx="0" cy="40" r="4"/>
<circle class="dot" cx="0" cy="70" r="4"/>
<circle class="dot" cx="0" cy="100" r="4"/>
<circle class="dot" cx="0" cy="130" r="4"/>
<circle class="dot" cx="0" cy="160" r="4"/>
<circle class="dot" cx="0" cy="190" r="4"/>
<circle class="dot" cx="0" cy="220" r="4"/>
</g>
</g>

<!-- Region 2: rarefaction (dots spread out horizontally) -->
<g id="region2" transform="translate(380,0)">
<!-- multiple columns spaced horizontally -->
<g fill="#333" stroke="none">
<!-- left column -->
<circle class="dot" cx="-22" cy="40" r="4"/>
<circle class="dot" cx="-22" cy="70" r="4"/>
<circle class="dot" cx="-22" cy="100" r="4"/>
<circle class="dot" cx="-22" cy="130" r="4"/>
<circle class="dot" cx="-22" cy="160" r="4"/>
<circle class="dot" cx="-22" cy="190" r="4"/>
<circle class="dot" cx="-22" cy="220" r="4"/>
<!-- center column -->
<circle class="dot" cx="0" cy="55" r="4"/>
<circle class="dot" cx="0" cy="100" r="4"/>
<circle class="dot" cx="0" cy="145" r="4"/>
<!-- right column -->
<circle class="dot" cx="24" cy="45" r="4"/>
<circle class="dot" cx="24" cy="85" r="4"/>
<circle class="dot" cx="24" cy="125" r="4"/>
<circle class="dot" cx="24" cy="165" r="4"/>
<circle class="dot" cx="24" cy="205" r="4"/>
</g>
</g>

<!-- Region 3: compression again -->
<g id="region3" transform="translate(540,0)">
<g fill="#333" stroke="none">
<circle class="dot" cx="0" cy="40" r="4"/>
<circle class="dot" cx="0" cy="70" r="4"/>
<circle class="dot" cx="0" cy="100" r="4"/>
<circle class="dot" cx="0" cy="130" r="4"/>
<circle class="dot" cx="0" cy="160" r="4"/>
<circle class="dot" cx="0" cy="190" r="4"/>
<circle class="dot" cx="0" cy="220" r="4"/>
</g>
</g>

<!-- Direction arrow from bell to ear -->
<path class="arrow" d="M140 150 L720 150" />
<text class="label" x="320" y="135" text-anchor="middle">Propagation direction</text>

<!-- Caption -->
<text class="label" x="260" y="280">Dots show air molecules: clustered = compression, spread = rarefaction (longitudinal wave)</text>
</svg>

Notes and tips:
- The clusters at x≈220 and x≈540 are compressions (molecules close together). The spread group at x≈380 is a rarefaction (molecules farther apart).
- You can edit the colors, spacing, or add more alternating regions by copying the region groups and shifting their x positions.
- If you’d like an animated version (molecules oscillating back and forth to show longitudinal motion) I can add a simple SVG animation or an HTML/CSS/JS version.