Skip to content

Instantly share code, notes, and snippets.

@nicbell
Created May 14, 2014 09:25
Show Gist options
  • Save nicbell/f17043113be2bb8c8c97 to your computer and use it in GitHub Desktop.
Save nicbell/f17043113be2bb8c8c97 to your computer and use it in GitHub Desktop.
A Pen by Nic Bell.
<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>
var title = document.querySelector('h1'),
svgTemplate = document.querySelector('svg');
svgTemplate.style.display = 'block';
svgTemplate.querySelector('#text').textContent = title.innerHTML;
title.innerHTML = '';
title.appendChild(svgTemplate);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment