A Pen by Nic Bell.

index.html

<svg style="display: none; height: 100px; width: 100%" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
   <defs id="FooDefs">
      <linearGradient id="MyFirstGradient" x1="0" y1="0" x2="0" y2="50" gradientUnits="userSpaceOnUse">
         <stop id="stop1" style="stop-color:#1acf86;" offset="0" />
         <stop id="stop2" style="stop-color:#ff0051;" offset="0.25" />
         <stop id="stop3" style="stop-color:#1da1c9;"offset="0.625" />
         <stop id="stop4" style="stop-color:#e45f25;" offset="1" />
      </linearGradient>
   </defs>
   <text x="0" y="50%" id="text" style="font-size:72px;fill:url(#MyFirstGradient);"></text>
</svg>

<h1>Just like MS Word</h1>

jGcbq.markdown

jGcbq

A Pen by Nic Bell on CodePen.

License.

script.js

var title = document.querySelector('h1'),
    svgTemplate = document.querySelector('svg');

svgTemplate.style.display = 'block';
svgTemplate.querySelector('#text').textContent = title.innerHTML;

title.innerHTML = '';
title.appendChild(svgTemplate);