Stretchy SVGs

In this example below you will see how to do a Stretchy SVGs with some HTML / CSS and Javascript

Some graphics I created for my <hr> Styles Pattern Rodeo entry.

Thumbnail
This awesome code was written by AmeliaBR, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright AmeliaBR ©
  • HTML
  • CSS
  • JavaScript
    <h3> Pencil </h3>
<svg id="pencil" style="height:2em;width:80%;min-width:10em;" >
    <!-- Graphic by Amelia Bellamy-Royds, original at https://codepen.io/AmeliaBR/pen/adJtq -->
    <radialGradient id="wood" cy="0.1" r="1">
      <stop offset="0.45" stop-color="burlywood"/>
      <stop offset="0.8" stop-color="chocolate"/>
    </radialGradient>
    <linearGradient id="edges" x2="0" y2="1">
      <stop offset="0.18" stop-color="#ffc533"/>
      <stop offset="0.22" stop-color="orange"/>
      <stop offset="0.48" stop-color="orange"/>
      <stop offset="0.52" stop-color="#dd8000"/>
      <stop offset="0.78" stop-color="#dd8000"/>
      <stop offset="0.82" stop-color="chocolate"/>
  </linearGradient>
  <radialGradient id="pinkRubber" cy="0.7" cx="1" r="0.8">
    <stop offset="0.1" stop-color="salmon"/>
    <stop offset="0.6" stop-color="pink"/>
  </radialGradient>
  <linearGradient id="steel" spreadMethod="repeat"  x2="0" y2="1">
    <stop offset="0.5" stop-color="silver"/>
    <stop offset="1" stop-color="charcoal"/>
  </linearGradient>
  <symbol id="pencilTip" viewBox="0 0 25 10" preserveAspectRatio="xMaxYMid meet"
          overflow="visible">
    <path fill="url(#wood)" stroke="chocolate" stroke-width="0.5"
          d="M24,0 L0,5 24,10 h1
             a2,2,0,0,1 1,-2
             a2,2,0,0,1 0,-3
             a2,2,0,0,1 0,-3
             a2,2,0,0,1 -1,-2z"/>
    <path fill="#333" stroke="black" stroke-width="0.5" stroke-linecap="round"
          d="M0,5 L12,2.5 A15,10,0 0 1 12,7.5Z"/>
  </symbol>
  <symbol id="eraser" viewBox="0 0 15 10"  preserveAspectRatio="xMinYMid meet" overflow="visible">
    <path fill="url(#pinkRubber)" 
          d="M0,0 h14 a3,5,0 0 1 0,10 h-14 Z"/>
    <path fill="url(#steel)" stroke="slategray" stroke-width="0.3"
          d="M-2,0 h10 a9,10,0 0 1 0,10 h-10 a9,10,0 0 0 0,-10 Z
             M0,0 a9,10,0 0 1 0,10 M2,0 a9,10,0 0 1 0,10 
             M4,0 a9,10,0 0 1 0,10 M6,0 a9,10,0 0 1 0,10"/>
  </symbol>
  <rect id="pencilBody" x="20%" width="60%" y="25%" height="50%" fill="url(#edges)" stroke="chocolate"/>
  <use xlink:href="#pencilTip" x="0" width="20%"  y="25%" height="50%"/>
  <use xlink:href="#eraser" x="80%" width="20%"  y="25%" height="50%"/>
</svg>
<li><a href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="100%25" height="100%25"><!-- Graphic by Amelia Bellamy-Royds, original at https://codepen.io/AmeliaBR/pen/adJtq --><defs><radialGradient id="wood" cy="0.1" r="1"><stop offset="0.45" stop-color="burlywood"/><stop offset="0.8" stop-color="chocolate"/></radialGradient><linearGradient id="edges" x2="0" y2="1"><stop offset="0.18" stop-color="%23ffc533"/><stop offset="0.22" stop-color="orange"/><stop offset="0.48" stop-color="orange"/><stop offset="0.52" stop-color="%23dd8000"/><stop offset="0.78" stop-color="%23dd8000"/><stop offset="0.82" stop-color="chocolate"/></linearGradient><radialGradient id="pinkRubber" cy="0.7" cx="1" r="0.8"><stop offset="0.1" stop-color="salmon"/><stop offset="0.6" stop-color="pink"/></radialGradient><linearGradient id="steel" spreadMethod="repeat"  x2="0" y2="1"><stop offset="0.5" stop-color="silver"/><stop offset="1" stop-color="charcoal"/></linearGradient><symbol id="pencilTip" viewBox="0 0 25 10" preserveAspectRatio="xMaxYMid meet" overflow="visible"><path fill="url(%23wood%29" stroke="chocolate" stroke-width="0.5" d="M24,0 L0,5 24,10 h1a2,2,0,0,1 1,-2a2,2,0,0,1 0,-3a2,2,0,0,1 0,-3a2,2,0,0,1 -1,-2z"/><path fill="%23333" stroke="black" stroke-width="0.5" stroke-linecap="round" d="M0,5 L12,2.5 A15,10,0 0 1 12,7.5Z"/></symbol><symbol id="eraser" viewBox="0 0 15 10"  preserveAspectRatio="xMinYMid meet" overflow="visible"><path fill="url(%23pinkRubber%29" d="M0,0 h14 a3,5,0 0 1 0,10 h-14 Z"/><path fill="url(%23steel%29" stroke="slategray" stroke-width="0.3" d="M-2,0 h10 a9,10,0 0 1 0,10 h-10 a9,10,0 0 0 0,-10 ZM0,0 a9,10,0 0 1 0,10 M2,0 a9,10,0 0 1 0,10M4,0 a9,10,0 0 1 0,10 M6,0 a9,10,0 0 1 0,10"/></symbol></defs><rect id="pencilBody" x="20%25" width="60%25" y="25%25" height="50%25" fill="url(%23edges%29" stroke="chocolate"/><use xlink:href="%23pencilTip" x="0" width="20%25"  y="25%25" height="50%25"/><use xlink:href="%23eraser" x="80%25" width="20%25"  y="25%25" height="50%25"/></svg> '>
  As a data URI</a> (note that you need to externally constrain the aspect ratio to be at least 5:2)</li>
<h3> Ruler </h3>
<svg id="ruler" style="height:4em;width:80%;min-width:10em;" >
  <defs>
    <style>line{stroke:black; stroke-width:0.3mm; shape-rendering:crispEdges}</style>
    <linearGradient id="ridge" x2="0" y2="1">
      <stop offset="0.44" stop-color="burlywood"/>
      <stop offset="0.45" stop-color="#b09070"/>
      <stop offset="0.52" stop-color="#c8a880"/>
      <stop offset="0.54" stop-color="#b09070"/>
      <stop offset="0.55" stop-color="burlywood"/>
      <stop offset="0.70" stop-color="burlywood"/>
      <stop offset="0.95" stop-color="saddlebrown"/>
    </linearGradient>
   <pattern id="ticks" width="1cm" height="100%" patternUnits="userSpaceOnUse" x="10%">
     <rect width="100%" height="100%" fill="url(#ridge)"/>
     <line x1="0mm" x2="0mm" y2="46%" />
     <line x1="1mm" x2="1mm" y2="20%" />
     <line x1="2mm" x2="2mm" y2="20%" />
     <line x1="3mm" x2="3mm" y2="20%" />
     <line x1="4mm" x2="4mm" y2="20%" />
     <line x1="5mm" x2="5mm" y2="35%" />
     <line x1="6mm" x2="6mm" y2="20%" />
     <line x1="7mm" x2="7mm" y2="20%" />
     <line x1="8mm" x2="8mm" y2="20%" />
     <line x1="9mm" x2="9mm" y2="20%" />
     <line x1="10mm" x2="10mm" y2="47%" />
  </pattern>
  </defs>
  <rect x="10%" y="10%" width="80%" height="70%" fill="saddlebrown" transform="translate(-3, 1)" rx="3"/>
  <rect x="10%" y="10%" width="80%" height="70%" fill="url(#ticks)"  rx="2"/>
</svg>
<li><a href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="100%25" height="100%25"><!-- Graphic by Amelia Bellamy-Royds, original at https://codepen.io/AmeliaBR/pen/adJtq --><defs><linearGradient id="ridge" x2="0" y2="1"><stop offset="0.44" stop-color="burlywood"/><stop offset="0.45" stop-color="%23b09070"/> <stop offset="0.52" stop-color="%23c8a880"/><stop offset="0.54" stop-color="%23b09070"/><stop offset="0.55" stop-color="burlywood"/><stop offset="0.70" stop-color="burlywood"/><stop offset="0.95" stop-color="saddlebrown"/></linearGradient><pattern id="ticks" width="1cm" height="100%25" patternUnits="userSpaceOnUse" x="10%25"><rect width="100%25" height="100%25" fill="url(%23ridge)"/><g style="stroke:black; stroke-width:0.3mm; shape-rendering:crispEdges"><line x1="0mm" x2="0mm" y2="46%25" /><line x1="1mm" x2="1mm" y2="20%25" /><line x1="2mm" x2="2mm" y2="20%25" /><line x1="3mm" x2="3mm" y2="20%25" /><line x1="4mm" x2="4mm" y2="20%25" /><line x1="5mm" x2="5mm" y2="35%25" /><line x1="6mm" x2="6mm" y2="20%25" /><line x1="7mm" x2="7mm" y2="20%25" /><line x1="8mm" x2="8mm" y2="20%25" /><line x1="9mm" x2="9mm" y2="20%25" /><line x1="10mm" x2="10mm" y2="47%" /></g></pattern></defs><rect x="10%25" y="10%25" width="80%25" height="70%25" fill="saddlebrown" transform="translate(-3, 1)" rx="3"/><rect x="10%25" y="10%25" width="80%25" height="70%25" fill="url(%23ticks)" rx="2"/></svg>'>As a data URI</a> (any size, but looks best if only a few em high)</li>

<h3> Barbershop Pole </h3>
<svg id="barbershop"   style="height:4em;width:80%;min-width:16em;"  >
  <!-- Graphic by Amelia Bellamy-Royds, original at https://codepen.io/AmeliaBR/pen/adJtq -->
  <defs>
    <linearGradient id="colourBlocks" spreadMethod="repeat" 
                    gradientUnits="objectBoundingBox" >
      <stop offset="1%" stop-color="red"/>
      <stop offset="24%" stop-color="red"/>
      <stop offset="26%" stop-color="white"/>
      <stop offset="49%" stop-color="white"/>
      <stop offset="51%" stop-color="blue"/>
      <stop offset="74%" stop-color="blue"/>
      <stop offset="76%" stop-color="white"/>
      <stop offset="99%" stop-color="white"/>
      <stop offset="101%" stop-color="red"/>
    </linearGradient>
    <pattern id="diagonals" patternTransform="rotate(45)" 
             viewBox="0 0 14.142 10" x="0" y="0" width="14.142%"
             height="100%" preserveAspectRatio="none">
      <rect fill="url(#colourBlocks)" width="14.142" height="10"/>
      <!--
      <animate attributeType="XML" attributeName="x" fill="freeze"
              from="0%" to="100%" dur="5s" repeatCount="2" />
      -->
    </pattern>
    <filter id="shine" width="150%" height="150%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
      <feSpecularLighting in="blur" surfaceScale="7" specularConstant=".4" 
                          specularExponent="25" lighting-color="#bbbbbb"  
                          result="specOut">
        <fePointLight x="-5000" y="-15000" z="20000"/>
      </feSpecularLighting>
      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                   k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
      <feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="blur2"/>
      <feOffset in="blur2" dx="0.5" dy="1.5"/>
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.5"/>
      </feComponentTransfer>
      <feComposite in="litPaint" operator="over"/>
    </filter>
    <symbol id="cap" viewBox="-2 0 12.6 20" preserveAspectRatio="xMaxYMid meet" overflow="visible">
      <circle fill="#DB1" filter="url(#shine)" r="7" cx="5" cy="10" />
      <ellipse stroke="#DB1" filter="url(#shine)" fill="none" cx="10.5" cy="10" rx="1" ry="6" stroke-width="1.5"/>
    </symbol>
    
  </defs> 
    <use xlink:href="#cap" width="15%" height="100%" />
    <use xlink:href="#cap" x="-100%" width="15%" height="100%" transform="scale(-1,1)"/>
  <rect filter="url(#shine)" fill="url(#diagonals)" x="-85%" y="25%" width="70%" height="50%" ry="40%" rx="5" transform="scale(-1,1)"/> 
</svg>
<li><a href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="100%25" height="100%25"><!-- Graphic by Amelia Bellamy-Royds, original at https://codepen.io/AmeliaBR/pen/adJtq --><defs><linearGradient id="colourBlocks" spreadMethod="repeat" gradientUnits="objectBoundingBox" ><stop offset="0.01" stop-color="red"/><stop offset=".24" stop-color="red"/><stop offset=".26" stop-color="white"/><stop offset=".49" stop-color="white"/><stop offset=".51" stop-color="blue"/><stop offset=".74" stop-color="blue"/><stop offset=".76" stop-color="white"/><stop offset=".99" stop-color="white"/><stop offset=".101" stop-color="red"/></linearGradient><pattern id="diagonals" patternTransform="rotate(45)" viewBox="0 0 14.142 10" x="0" y="0" width="0.14142" height="1" preserveAspectRatio="none"><rect fill="url(%23colourBlocks)" width="14.142" height="10"/><animate attributeType="XML" attributeName="x" fill="freeze" from="0" to="1" dur="10s" repeat="2" /></pattern><filter id="shine" width="1.5" height="1.5"><feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/><feSpecularLighting in="blur" surfaceScale="7" specularConstant=".4" specularExponent="25" lighting-color="%23bbbbbb" result="specOut"><fePointLight x="-5000" y="-15000" z="20000"/></feSpecularLighting><feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/><feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/><feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="blur2"/><feOffset in="blur2" dx="0.5" dy="1.5"/> <feComponentTransfer><feFuncA type="linear" slope="0.5"/></feComponentTransfer><feComposite in="litPaint" operator="over"/></filter> <symbol id="cap" viewBox="-2 0 12.6 20" preserveAspectRatio="xMaxYMid meet" overflow="visible"><circle fill="%23DB1" filter="url(%23shine)" r="7" cx="5" cy="10" /><ellipse stroke="%23DB1" filter="url(%23shine)" fill="none" cx="10.5" cy="10" rx="1" ry="6" stroke-width="1.5"/> </symbol></defs><use xlink:href="%23cap" width="15%25" height="100%25" /><use xlink:href="%23cap" x="-100%25" width="15%25" height="100%25" transform="scale(-1,1)"/><rect filter="url(%23shine)" fill="url(%23diagonals)" x="-85%25" y="25%25" width="70%25" height="50%25" ry="40%25" rx="5" transform="scale(-1,1)"/></svg>'>
  As a data URI</a> (aspect ratio should be 4:1 or wider)</li>
<h3>Crowns</h3>
<svg id="chess" style="height:4em; width:80%;">
  <defs>
    <filter id="shine2">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="blur"/>
      <feSpecularLighting in="blur" surfaceScale="7" specularConstant=".4" 
                          specularExponent="25" lighting-color="#bbbbbb"  
                          result="specOut">
        <fePointLight x="-500" y="-1500" z="2000"/>
      </feSpecularLighting>
      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                   k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
    </filter>
    <symbol id="king" viewBox="-40 -70 80 80" style="font-size:80px;">
      <text filter="url(#shine2)" text-anchor="middle" >♛</text>
    </symbol>
    <symbol id="queen" viewBox="-40 -70 80 80" style="font-size:80px;">
      <text filter="url(#shine2)" text-anchor="middle">♚</text>
    </symbol>
  </defs>
  <use xlink:href="#king" x="0%" width="25%" fill="#222" stroke="black" />
  <use xlink:href="#queen"  x="25%" width="25%"  fill="#222" stroke="black" />
  <use xlink:href="#king" x="50%" width="25%" fill="#CB7" stroke="darkgoldenrod" />
  <use xlink:href="#queen"  x="75%" width="25%" fill="#CB7" stroke="darkgoldenrod" />
</svg>
<li><a href='data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="100%25" height="100%25" style="font-size:80; font-family:MS PGothic"><!-- Graphic by Amelia Bellamy-Royds, original at https://codepen.io/AmeliaBR/pen/adJtq --><defs><filter id="shine2"><feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="blur"/><feSpecularLighting in="blur" surfaceScale="7" specularConstant="0.4" specularExponent="25" lighting-color="%23bbbbbb" result="specOut"><fePointLight x="-500" y="-1500" z="2000"/></feSpecularLighting><feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/><feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/></filter><symbol id="king" viewBox="-40 -70 80 80"><text filter="url(%23shine2)" text-anchor="middle" >♛</text></symbol><symbol id="queen" viewBox="-40 -70 80 80"><text filter="url(%23shine2)" text-anchor="middle">♚</text></symbol></defs><use xlink:href="%23king" x="0%25" width="25%25" fill="%23222" stroke="black"/><use xlink:href="%23king" x="25%25" width="25%25" fill="%23CB7" stroke="darkgoldenrod"/><use xlink:href="%23queen"  x="50%25" width="25%25" fill="%23CB7" stroke="darkgoldenrod"/><use xlink:href="%23queen"  x="75%25" width="25%25"  fill="%23222" stroke="black"/></svg>'
       >As a data URI</a> (icons spread out or shrink to fit any size, but looks strange if drawn greater than full size / 100px tall)</li>
<li>The crowns are just unicode characters; see <a href="https://codepen.io/AmeliaBR/details/Goxrq/">this other pen</a> for many more examples of embossed text and unicode icons done in the same style.</li>
<li>I've suggested a font for Windows systems because it has a great ornate style, but most browsers will find a font that can render the glyphs if they don't have the suggested one.</li>

/*Downloaded from https://www.codeseek.co/AmeliaBR/stretchy-svgs-adJtq */
    svg{border:1px solid; margin:1em auto; display:block;}


/*Downloaded from https://www.codeseek.co/AmeliaBR/stretchy-svgs-adJtq */
    

Comments