A Pen by Jason Weaver.

index.jade

link(href='http://fonts.googleapis.com/css?family=Crete+Round', rel='stylesheet', type='text/css')

h1#page-title
  span#fallback-title Scalable Title
  svg(viewbox="0 0 1200 300", preserveAspectRatio="xMidYMin meet", id="svg-title")

Scalable-Text-with-SVG.markdown

Scalable Text with SVG

Just like FitText.js but with svg and no jQuery

A Pen by Jason Weaver on CodePen.

License.

script.coffee

# Scalable Text with SVG
# no library dependencies

supportsSVG = ->
  !!document.createElementNS and !!document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGRect

if supportsSVG
  fallback_title = document.querySelector("#fallback-title")
  fallback_title.setAttribute "style", "display:none;"
  title_text = fallback_title.childNodes[0].nodeValue
  page_title = document.querySelector("#page-title")

  svgDoc = document.querySelector("#svg-title")

  title = document.createElementNS('http://www.w3.org/2000/svg', "text")
  title.setAttributeNS(null, "x", '50%')
  title.setAttributeNS(null, "y", '50%')
  title.setAttributeNS(null, "text-anchor",  'middle')

  textNode = document.createTextNode(title_text)
  svgDoc.appendChild(title)
  title.appendChild(textNode)

style.sass

@import "compass"
body
  background: #d98527

text, #fallback-title
  font-size: 160px
  font-family: 'Crete Round'
  fill: rgba(255,255,255,.75)
  color: rgba(255,255,255,.75)