SVG Filters, I2C/SPI, Morse, EXIF & MP4: Media Lab
September 5, 2026 · DevTools
Embedded buses, media containers, and procedural effects all reward looking one layer deeper. These five tools open that layer: SVG Displacement Filter Lab, I2C & SPI Bus Timing Diagram, Morse Spectrogram Decoder, EXIF GPS Map Reverser, and MP4 MOOV Atom Inspector.
Turbulence filters you can actually reproduce
generateSvgFilter builds seeded chains of feTurbulence, feDisplacementMap, blur, and color-matrix steps into copyable SVG defs, and validateSvgFilterOptions rejects invalid combinations before they render as silent no-ops. getSvgFilterPreset starts you from glass, water-wave, glitch, or paper-texture baselines. The seed is the detail that matters: an unseeded fractalNoise filter renders differently every load, which turns a textured hero into a flickering one.
<filter id="water">
<feTurbulence type="fractalNoise" baseFrequency="0.012"
numOctaves="3" seed="7" result="noise" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="24"
xChannelSelector="R" yChannelSelector="G" />
</filter>
Tune baseFrequency for feature size and scale for distortion strength separately — raising both at once is how water turns into static.
Catch bus conflicts before they reach the breadboard
normalizeI2cAddress converts between 7-bit and 8-bit (read/write-shifted) notation, and scanI2cConflicts flags devices that collide on the wire — like an OLED listed as 7-bit 0x3C and a driver expecting 8-bit write form 0x79, which are the same address once shifted back. getPullupRecommendation sizes pull-ups across speed grades from Standard 100 kHz to High-speed 3.4 MHz, trading rise time against bus capacitance.
bitsToSignals draws the clock and MOSI waveform for your bit pattern across all four SPI modes, making CPOL mismatches visible (CPHA does not alter this diagram): mode 3 idles high with sampling on the trailing edge, mode 0 idles low sampling on the leading edge. When a peripheral returns garbage, check the mode diagram against the datasheet before blaming the wiring.
| SPI mode | CPOL | CPHA | Clock idles | Data sampled on |
|---|---|---|---|---|
| 0 | 0 | 0 | low | leading edge |
| 1 | 0 | 1 | low | trailing edge |
| 2 | 1 | 0 | high | leading edge |
| 3 | 1 | 1 | high | trailing edge |
Synthesize, decode, geolocate, and stream-check
textToMorse encodes ITU Morse with warnings for unsupported glyphs, calculateTiming derives dit length as 1.2 ÷ WPM with intra-letter, letter, and word gaps, and synthesizeMorse renders 600 Hz sine audio at your sample rate. decodeToneSequence runs the reverse path with a simple amplitude threshold. Start decoding at 20 WPM with clean synthetic audio — real-world signals need threshold tuning, and learning the decoder on noisy input teaches you nothing.
parseExifGps reads JPEG APP1 EXIF locally — TIFF endian detection, IFD0, ExifIFD, GPS latitude/longitude rationals, camera tags, capture time, orientation — and osmEmbedUrl drops the coordinates into an OpenStreetMap embed. Nothing uploads, which is the entire point: geotagged photos are sensitive, and parsing them server-side would be a privacy bug. inspectMp4 parses box order to verify FastStart layout — moov before mdat — plus track count, movie timing, and truncation warnings, so a video that buffers instead of streaming gets a diagnosis, not a shrug.
Try Them
- SVG Displacement Filter Lab — seeded turbulence chains with glass, water, glitch, and paper presets.
- I2C & SPI Bus Timing Diagram — address conflict scan, pull-up sizing, and SPI mode waveforms.
- Morse Spectrogram Decoder — ITU timing, sine synthesis, and threshold decoding.
- EXIF GPS Map Reverser — local EXIF parsing with OpenStreetMap embeds.
- MP4 MOOV Atom Inspector — box order, track metadata, and FastStart verification.