DevTools Logo
All posts

SVG Filters, I2C/SPI, Morse, EXIF & MP4: Media Lab

September 5, 2026 · DevTools

svg
embedded
morse
exif
mp4

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 modeCPOLCPHAClock idlesData sampled on
000lowleading edge
101lowtrailing edge
210highleading edge
311hightrailing 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