Lake Whistleman - pure SVG filter generative map with multilevel contour lines and hill shading. No JavaScript or topo data. Around 800 bytes on the network after removing comments, spaces and compressing, most of it is the palette. The PNG screenshot is 1.4MB. Looks good on hi-res screens e.g. Retina.
Slow to render because SVG is scalable in resolution but not in performance - at least its browser implementations are disappointingly slow.
It uses a slightly modified version of the excellent Esri Europe2 color run (see LICENSE.txt) but any other palette would work.
It's a variation on the interactive 3D bumpmapped variant with light.
Built with blockbuilder.org
xxxxxxxxxx<head> <meta charset="utf-8"></head><body><svg xmlns="https://www.w3.org/2000/svg" width="960" height="550" style="font: 16px 'Andale Mono', monospace"><filter id="map" x="0%" y="0%" width="100%" height="100%"><!--MAKE ELEVATION DATA--><!--generate noise--><feTurbulence seed="641746" type="fractalNoise" baseFrequency=".002" numOctaves="7"/><!--scale the noise and keep the alpha channel only--><feComponentTransfer result="bump"> <feFuncA type="table" tableValues="0 0 1 1"/> <feFuncR type="gamma" amplitude="0"/> <feFuncG type="gamma" amplitude="0"/> <feFuncB type="gamma" amplitude="0"/></feComponentTransfer><!--FINE CONTOURS--><!--make a bump map out of the noise Safari chokes on multiline attrs so we must keep attr string in one line --><feConvolveMatrix result="fine" kernelMatrix="9 9 9 9 -72 9 9 9 9"/><!--MEDIUM CONTOURS--><!--make a posterized bump map --><feComponentTransfer in="bump"> <feFuncA type="discrete" tableValues=".05 .05 .05 .05 .05 .1 .1 .1 .1 .1 .14 .14 .14 .14 .14 .19 .19 .19 .19 .19 .24 .24 .24 .24 .24 .29 .29 .29 .29 .29 .33 .33 .33 .33 .33 .38 .38 .38 .38 .38 .43 .43 .43 .43 .43 .48 .48 .48 .48 .48 .52 .52 .52 .52 .52 .57 .57 .57 .57 .57 .62 .62 .62 .62 .62 .67 .67 .67 .67 .67 .71 .71 .71 .71 .71 .76 .76 .76 .76 .76 .81 .81 .81 .81 .81 .86 .86 .86 .86 .86 .9 .9 .9 .9 .9 .95 .95 .95 .95 .95 1"/></feComponentTransfer><!--for coarse elevation lines--><feConvolveMatrix result="medium" kernelMatrix="5 6 5 6 -44 6 5 6 5"/><!--COARSE CONTOURS--><!--make a posterized bump map --><feComponentTransfer in="bump"> <feFuncA type="discrete" tableValues=".2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 1"/></feComponentTransfer><!--for coarse elevation lines--><feConvolveMatrix result="coarse" order="5" kernelMatrix="0 0 2 0 0 0 2 3 2 0 2 3 -28 3 2 0 2 3 2 0 0 0 2 0 0"/><!--APPLY PALETTE--><!--convert the alpha channel to grayscale RGB channels for palette --><feColorMatrix in="bump" values="0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 1"/><!--pick up colors from the palette and map them into the channels--><!--Derivative of ESRI Europe2. Palette license: https://soliton.vm.bytemark.co.uk/pub/cpt-city/esri/copying.html--><feComponentTransfer> <feFuncR type="discrete" tableValues=".68 .44 .44 .47 .47 .5 .5 .52 .52 .55 .55 .59 .59 .61 .61 .64 .64 .67 .67 .69 .69 .73 .73 .77 .77 .79 .79 .82 .82 .84 .84 .85 .85 .87 .87 .89 .89 .91 .91 .94 .94 .94 .94 .94 .94 .94 .94 .94 .94 .94 .94 .94 .94 .93 .93 .91 .91 .9 .9 .88 .88 .87 .87 .85 .85 .84 .84 .82 .82 .8 .8 .79 .79 .77 .77 .76 .76 .77 .77 .79 .79 .8 .8 .82 .82 .84 .84 .86 .86 .87 .87 .89 .89 .91 .91 .92 .92 .94 .94 .96 .96 .97 .97 .97 .97 .97 .97 .97 .97 .98 .98 .98 .98 .98 .98 .98 .98 .99 .99 .99 .99 .99 .99 .99 .99 .99 .99 .99"/> <feFuncG type="discrete" tableValues=".84 .6 .6 .62 .62 .65 .65 .67 .67 .7 .7 .73 .73 .75 .75 .78 .78 .81 .81 .83 .83 .86 .86 .89 .89 .91 .91 .93 .93 .93 .93 .93 .93 .93 .93 .93 .93 .93 .93 .94 .94 .91 .91 .89 .89 .87 .87 .85 .85 .82 .82 .8 .8 .77 .77 .75 .75 .73 .73 .71 .71 .69 .69 .66 .66 .65 .65 .62 .62 .6 .6 .58 .58 .57 .57 .55 .55 .57 .57 .6 .6 .62 .62 .65 .65 .68 .68 .71 .71 .73 .73 .76 .76 .8 .8 .82 .82 .85 .85 .88 .88 .9 .9 .91 .91 .91 .91 .92 .92 .93 .93 .94 .94 .95 .95 .95 .95 .97 .97 .98 .98 .98 .98 .98 .98 .99 .99 .99"/> <feFuncB type="discrete" tableValues=".94 .35 .35 .36 .36 .39 .39 .4 .4 .43 .43 .45 .45 .47 .47 .49 .49 .52 .52 .53 .53 .56 .56 .59 .59 .6 .6 .62 .62 .6 .6 .6 .6 .58 .58 .58 .58 .58 .58 .57 .57 .56 .56 .55 .55 .55 .55 .54 .54 .53 .53 .53 .53 .52 .52 .52 .52 .52 .52 .52 .52 .51 .51 .51 .51 .51 .51 .5 .5 .49 .49 .5 .5 .49 .49 .49 .49 .5 .5 .52 .52 .54 .54 .56 .56 .58 .58 .61 .61 .63 .63 .66 .66 .68 .68 .71 .71 .73 .73 .77 .77 .8 .8 .8 .8 .82 .82 .84 .84 .86 .86 .88 .88 .89 .89 .91 .91 .93 .93 .95 .95 .96 .96 .98 .98 .99 .99 .99"/></feComponentTransfer><!--SUPERIMPOSE OVERLAYS--><feMerge> <feMergeNode/> <feMergeNode in="fine"/> <feMergeNode in="medium"/> <feMergeNode in="coarse"/></feMerge></filter><path filter="url(#map)" d="M0 0h960v550H0z"/><text x="800" y="545">@monfera</text><text x="8" y="545">Lake Whistleman. Hypsometry palette: Europe2 ©ESRI.</text></svg></body>