sea-view.el

(require 'svg)
(defun replace-text (start end)
  (interactive "r")
  (let* ((str (buffer-substring start end))
         (scale (cadr (assoc :height (assoc 'default face-remapping-alist))))
         (width (float (car (window-text-pixel-size nil start end))))
         (height (float (cdr (window-text-pixel-size nil start end))))
         (family (face-attribute 'default :family))
         (ascent (* (aref (font-info family) 8) (if scale scale 1)))
         (img (format "<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='%d' height='%d'>
  <defs>
    <linearGradient id='Gradient_1' gradientUnits='userSpaceOnUse' x1='32.245' y1='11.208' x2='32.245' y2='22.24'>
      <stop offset='0.638' stop-color='#FFFFFF'/>
      <stop offset='1' stop-color='#C8C8C8'/>
    </linearGradient>
    <linearGradient id='Gradient_2' gradientUnits='userSpaceOnUse' x1='35.865' y1='18.103' x2='35.865' y2='26.377'>
      <stop offset='0.638' stop-color='#FFFFFF'/>
      <stop offset='1' stop-color='#C8C8C8'/>
    </linearGradient>
    <linearGradient id='Gradient_3' gradientUnits='userSpaceOnUse' x1='65.514' y1='22.24' x2='65.514' y2='34.996'>
      <stop offset='0.638' stop-color='#FFFFFF'/>
      <stop offset='1' stop-color='#C8C8C8'/>
    </linearGradient>
    <linearGradient id='Gradient_4' gradientUnits='userSpaceOnUse' x1='56.723' y1='28.79' x2='56.723' y2='38.788'>
      <stop offset='0.638' stop-color='#FFFFFF'/>
      <stop offset='1' stop-color='#C8C8C8'/>
    </linearGradient>
    <linearGradient id='Gradient_5' gradientUnits='userSpaceOnUse' x1='70.513' y1='30.514' x2='70.513' y2='40.857'>
      <stop offset='0.638' stop-color='#FFFFFF'/>
      <stop offset='1' stop-color='#C8C8C8'/>
    </linearGradient>
    <linearGradient id='Gradient_6' gradientUnits='userSpaceOnUse' x1='82.063' y1='8.105' x2='82.063' y2='18.792'>
      <stop offset='0.638' stop-color='#FFFFFF'/>
      <stop offset='1' stop-color='#C8C8C8'/>
    </linearGradient>
    <linearGradient id='Gradient_7' gradientUnits='userSpaceOnUse' x1='19.316' y1='43.622' x2='19.316' y2='48.793'>
      <stop offset='0.638' stop-color='#FFFFFF'/>
      <stop offset='1' stop-color='#C8C8C8'/>
    </linearGradient>
    <linearGradient id='Gradient_8' gradientUnits='userSpaceOnUse' x1='40.002' y1='45.346' x2='40.002' y2='48.793'>
      <stop offset='0.638' stop-color='#FFFFFF'/>
      <stop offset='1' stop-color='#C8C8C8'/>
    </linearGradient>
    <linearGradient id='Gradient_9' gradientUnits='userSpaceOnUse' x1='27.246' y1='45.346' x2='27.246' y2='52.241'>
      <stop offset='0.638' stop-color='#FFFFFF'/>
      <stop offset='1' stop-color='#C8C8C8'/>
    </linearGradient>
    <linearGradient id='Gradient_10' gradientUnits='userSpaceOnUse' x1='28.797' y1='16.034' x2='28.797' y2='30.514'>
      <stop offset='0.638' stop-color='#FFFFFF'/>
      <stop offset='1' stop-color='#C8C8C8'/>
    </linearGradient>
    <linearGradient id='Gradient_11' gradientUnits='userSpaceOnUse' x1='88.441' y1='9.829' x2='88.441' y2='22.24'>
      <stop offset='0.638' stop-color='#FFFFFF'/>
      <stop offset='1' stop-color='#C8C8C8'/>
    </linearGradient>
    <linearGradient id='Gradient_12' gradientUnits='userSpaceOnUse' x1='183.58' y1='70.466' x2='183.58' y2='98.611'>
      <stop offset='0' stop-color='#CFFAFF' stop-opacity='0.8'/>
      <stop offset='0.43' stop-color='#2893B0' stop-opacity='0.8'/>
      <stop offset='1' stop-color='#000542' stop-opacity='1'/>
    </linearGradient>
    <pattern id='sky' height='1' width='%f' viewBox='0 0 100 100' preserveAspectRatio='xMinYMin meet'>
      <g>
        <path d='M32.245,22.24 C27.009,22.24 22.764,19.77 22.764,16.724 C22.764,13.677 27.009,11.208 32.245,11.208 C37.481,11.208 41.726,13.677 41.726,16.724 C41.726,19.77 37.481,22.24 32.245,22.24 z' fill='url(#Gradient_1)'/>
        <path d='M35.865,26.377 C31.105,26.377 27.246,24.525 27.246,22.24 C27.246,19.955 31.105,18.103 35.865,18.103 C40.625,18.103 44.484,19.955 44.484,22.24 C44.484,24.525 40.625,26.377 35.865,26.377 z' fill='url(#Gradient_2)'/>
        <path d='M65.514,34.996 C60.373,34.996 56.206,32.14 56.206,28.618 C56.206,25.095 60.373,22.24 65.514,22.24 C70.655,22.24 74.823,25.095 74.823,28.618 C74.823,32.14 70.655,34.996 65.514,34.996 z' fill='url(#Gradient_3)'/>
        <path d='M56.723,38.788 C51.487,38.788 47.242,36.55 47.242,33.789 C47.242,31.028 51.487,28.79 56.723,28.79 C61.959,28.79 66.204,31.028 66.204,33.789 C66.204,36.55 61.959,38.788 56.723,38.788 z' fill='url(#Gradient_4)'/>
        <path d='M70.513,40.857 C66.419,40.857 63.101,38.542 63.101,35.686 C63.101,32.829 66.419,30.514 70.513,30.514 C74.607,30.514 77.925,32.829 77.925,35.686 C77.925,38.542 74.607,40.857 70.513,40.857 z' fill='url(#Gradient_5)'/>
        <path d='M82.063,18.792 C78.064,18.792 74.823,16.4 74.823,13.449 C74.823,10.497 78.064,8.105 82.063,8.105 C86.061,8.105 89.303,10.497 89.303,13.449 C89.303,16.4 86.061,18.792 82.063,18.792 z' fill='url(#Gradient_6)'/>
        <path d='M19.316,48.793 C10.748,48.793 3.802,47.636 3.802,46.208 C3.802,44.78 10.748,43.622 19.316,43.622 C27.885,43.622 34.831,44.78 34.831,46.208 C34.831,47.636 27.885,48.793 19.316,48.793 z' fill='url(#Gradient_7)'/>
        <path d='M40.002,48.793 C34.861,48.793 30.694,48.022 30.694,47.07 C30.694,46.118 34.861,45.346 40.002,45.346 C45.143,45.346 49.31,46.118 49.31,47.07 C49.31,48.022 45.143,48.793 40.002,48.793 z' fill='url(#Gradient_8)'/>
        <path d='M27.246,52.241 C19.249,52.241 12.766,50.697 12.766,48.793 C12.766,46.889 19.249,45.346 27.246,45.346 C35.243,45.346 41.726,46.889 41.726,48.793 C41.726,50.697 35.243,52.241 27.246,52.241 z' fill='url(#Gradient_9)'/>
        <path d='M28.797,30.514 C22.609,30.514 17.593,27.273 17.593,23.274 C17.593,19.276 22.609,16.034 28.797,16.034 C34.985,16.034 40.002,19.276 40.002,23.274 C40.002,27.273 34.985,30.514 28.797,30.514 z' fill='url(#Gradient_10)'/>
        <path d='M88.441,22.24 C84.157,22.24 80.684,19.462 80.684,16.034 C80.684,12.607 84.157,9.829 88.441,9.829 C92.725,9.829 96.198,12.607 96.198,16.034 C96.198,19.462 92.725,22.24 88.441,22.24 z' fill='url(#Gradient_11)'/>
      </g>
    </pattern>
    <pattern id='sea' height='1' width='%f' viewBox='0 0 100 100' preserveAspectRatio='xMinYMin meet'>
      <path d='M71.369,71.855 C71.65,74.805 74.135,76.488 76.723,77.925 L76.7,77.76 C76.72,76.439 77.896,75.362 79.509,74.5 C79.742,74.877 79.878,75.28 80.208,75.632 C82.616,77.99 86.184,78.568 89.52,79.204 C88.995,78.235 89.159,78.741 89.018,77.688 C89.076,75.478 91.118,74.235 93.68,72.809 C94.14,74.399 95.173,75.833 96.718,76.748 C97.449,75.456 98.738,74.749 100,74.036 L100,100 L-0,100 L-0,74.889 C0.511,75.725 1.252,76.415 1.892,77.157 C2.092,75.418 3.411,74.151 4.901,73.177 C5.181,76.127 7.667,77.81 10.255,79.247 L10.232,79.082 L10.381,78.441 C10.022,77.424 10.128,77.93 10.04,76.93 C10.123,75.227 11.057,73.447 13.177,72.224 C13.46,75.19 15.965,76.87 18.568,78.309 L18.508,78.128 C18.529,76.807 19.704,75.73 21.317,74.868 C21.55,75.246 21.686,75.649 22.016,76.001 C23.059,76.903 22.589,76.614 23.302,77.008 C23.955,75.845 26.012,74.833 27.212,74.131 C27.62,76.237 29.098,77.29 30.876,78.48 L30.826,78.056 C30.884,75.847 32.926,74.603 35.488,73.178 C36.399,75.439 35.712,74.18 37.937,76.764 C38.123,74.992 39.441,73.694 40.961,72.701 C41.322,75.621 43.677,77.271 46.298,78.653 L46.292,78.605 C46.312,77.284 47.487,76.207 49.1,75.345 C49.334,75.722 49.469,76.126 49.8,76.477 C52.208,78.835 55.776,79.413 59.112,80.049 C58.586,79.081 58.751,79.587 58.609,78.533 C58.667,76.323 60.709,75.08 63.271,73.654 C64.084,76.262 66.308,78.073 69.067,79.058 C68.433,78.352 68.308,77.43 68.232,76.561 C68.315,74.859 69.249,73.078 71.369,71.855 L71.369,71.855 z' fill='url(#Gradient_12)'/>
    </pattern>
  </defs>

  <rect x='0' y='0' width='100%%' height='100%%' fill='skyblue'></rect>
  <rect x='0' y='0' width='100%%' height='100%%' fill='url(#sky)'></rect>
  <text x='0' y='%d' textLength='100%%'>%s</text>
  <rect x='0' y='0' width='100%%' height='100%%' fill='url(#sea)'></rect>
</svg>" width height (/ height width) (/ height width) ascent str)))
    (add-text-properties start end `(display
				     ,(create-image img 'svg t :ascent 'center :scale 1)
				     rear-nonsticky t))))