<div class="wrap">
<div>
<!-- Swap below svg with your own -->
<?xml version="1.0" encoding="utf-8"?>
<a href="https://crownpointdesigns.com" title="San Diego Web Design Frim Crown Point Design | CPD" target="_blank"><svg version="1.1" baseProfile="tiny" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 259.2 259.2" xml:space="preserve" style="visibility:hidden;">
<path fill="#CFD6D3" stroke="#000000" stroke-width="1.5" d="M97.8,116.3c-20.4,0-29.3,2-33.5,6.4c-4.2,4.5-6.3,10.2-6.3,17.1
c0,6.7,2.1,12.2,6.2,16.5c4.1,4.4,9.3,6.5,15.6,6.5c6.4,0,11.5-1.9,15.3-5.7c3.8-3.8,6.7-9.7,6.9-17h30.6
c-1.5,18.4-4.5,28.2-16.1,39.4c-9.3,8.9-21.4,13.4-36.3,13.4c-15.2,0-27.8-5.1-38-15.3c-10.2-10.2-15.3-22.8-15.3-37.9
c0-15.2,5.2-27.9,15.7-38.2c10.4-10.3,26.2-15.1,55.3-15.1L97.8,116.3z"/>
<path fill="#A4C2DB" stroke="#000000" stroke-width="1.5" d="M167.7,117v76.2h-29.1V86.4h37.9c16.6,0,29.6,4.1,39.1,12.3
c11.2,9.8,16.8,23.2,16.8,40c0,16.1-4.8,29.3-14.3,39.5c-9.6,10.2-21.9,15.3-36.9,15.3c-1.8,0-4.7-0.1-8.7-0.3V162h4.7
c17,0,25.4-7.7,25.4-23.2c0-14.5-8.3-21.8-25-21.8H167.7z"/>
<path fill="#0075B2" stroke="#000000" stroke-width="1.5" d="M138.6,104.1V75.2c6.5-0.1,9.2-2.5,9.2-7.5c0-4.6-2.6-6.9-7.6-6.9
c-5,0.1-7.5,3.2-7.5,9.6l-0.1,65.2H102l0-61.6c-0.1-7.1,0-11.8,1.4-16.4c1.4-4.6,3.2-9.3,6.6-13.2c3.8-4.4,8-8.4,13.7-10.9
c5.7-2.6,11.6-3.9,17.7-4c11-0.1,20.4,3.6,27.9,11c7.6,7.4,11.4,16.7,11.5,27.8c0.1,10.8-3.2,19.6-9.9,26.4
c-6.1,6.2-15.4,9.4-27.8,9.5L138.6,104.1z"/>
<path fill="#222222" d="M14.7,202.4c-3,0-5.5,1-7.6,2.9c-2.2,2-3.3,4.5-3.3,7.5c0,3,1.1,5.4,3.2,7.3c2.1,1.9,4.7,2.8,7.8,2.8
c1.9,0,3.6-0.2,5-0.7c1.3-0.4,2.1-0.9,2.3-1.4c0.3-0.8,0.5-1.9,0.6-3.2c0-0.3-0.2-0.6-0.6-0.6c-0.1,0-0.2,0-0.3,0
c-0.4,0-0.6,0.2-0.7,0.5c-0.5,1.5-1.3,2.5-2.1,3.2c-0.9,0.7-2.1,1-3.7,1c-2.4,0-4.4-0.8-6-2.5c-1.6-1.7-2.4-3.9-2.4-6.7
c0-2.8,0.8-5,2.3-6.6c1.4-1.5,3.2-2.2,5.4-2.2c1.8,0,3.1,0.3,4,1c0.9,0.7,1.6,1.8,2.1,3.5c0.1,0.2,0.3,0.4,0.6,0.4c0,0,0.1,0,0.1,0
c0.5,0,0.8-0.2,0.8-0.5c0-1.7-0.1-2.9-0.2-3.7c-0.1-0.4-0.7-0.8-2-1.3C18.6,202.6,16.8,202.4,14.7,202.4L14.7,202.4z"/>
<path fill="#222222" d="M27.9,210.5c-0.1,0-0.4,0.2-0.9,0.6c-0.6,0.4-1.2,0.8-1.9,1c-0.4,0.1-0.6,0.3-0.6,0.5c0,0.2,0.1,0.3,0.3,0.4
l0.1,0c0.7,0.4,1.2,0.7,1.4,0.9c0.2,0.2,0.2,0.6,0.2,1.3v4.8c0,0.8-0.3,1.3-0.8,1.4c-0.6,0.2-0.8,0.4-0.8,0.6c0,0.3,0,0.5,0.1,0.5
c0.1,0,0.1,0.1,0.3,0.1c0.1,0,0.3,0,0.5-0.1c0.6-0.1,1.3-0.1,2.1-0.1c0.9,0,1.9,0.1,3.1,0.2c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3-0.1
c0.1-0.1,0.1-0.2,0.1-0.5c0-0.2-0.2-0.4-0.7-0.5c-0.8-0.2-1.4-0.4-1.6-0.5c-0.4-0.2-0.5-0.6-0.5-1.1v-4.4c0-1.5,0.6-2.3,1.7-2.3
c0.3,0,0.7,0.1,1.4,0.2c0.6,0.1,1,0.2,1.1,0.2c0.7,0,1-0.6,1-1.8c0-0.8-0.4-1.2-1.1-1.2c-0.9,0-1.7,0.2-2.4,0.7
c-1.1,0.7-1.7,1.1-1.7,1.1c-0.1,0-0.2-0.4-0.3-1.2C28.4,210.8,28.2,210.5,27.9,210.5L27.9,210.5z"/>
<path fill="#222222" d="M42.1,210.7c-1.8,0-3.4,0.6-4.7,1.7c-1.3,1.2-2,2.7-2,4.5c0,1.7,0.5,3.1,1.6,4.1c1.1,1.1,2.6,1.6,4.5,1.6
c1.9,0,3.5-0.6,4.8-1.8c1.3-1.2,1.9-2.7,1.9-4.4c0-1.7-0.5-3.1-1.6-4.1C45.6,211.3,44.1,210.7,42.1,210.7L42.1,210.7z M42.1,221.3
c-1.2,0-2.1-0.4-2.8-1.3c-0.8-1-1.2-2.3-1.2-4c0-1.1,0.3-2,1-2.7c0.7-0.7,1.5-1.1,2.6-1.1c1.1,0,2.1,0.5,2.8,1.4
c0.8,1,1.1,2.2,1.1,3.8c0,1.2-0.3,2.1-1,2.8C44,220.9,43.2,221.3,42.1,221.3L42.1,221.3z"/>
<path fill="#222222" d="M63.7,210.7c-0.1,0-0.1,0-0.2,0c-1,0.2-2,0.3-2.9,0.3c-0.7,0-1.3,0-2-0.1c-0.1,0-0.1,0-0.2,0
c-0.3,0-0.5,0.2-0.5,0.5c0,0.2,0.3,0.4,1,0.7c0.4,0.1,0.8,0.5,1.1,1.2c0.3,0.4,0.4,0.9,0.4,1.3c0,0.2-0.4,1-1.2,2.5
c-0.8,1.5-1.2,2.2-1.3,2.2c-0.1,0-0.5-0.7-1.3-2.1c-0.7-1.4-1.3-2.6-1.6-3.5c-0.1-0.4-0.2-0.6-0.2-0.8c0-0.3,0.3-0.5,0.9-0.7
c0.4-0.1,0.7-0.4,0.7-0.7c0-0.2-0.1-0.3-0.3-0.3c0,0-0.1,0-0.2,0c-0.8,0.2-1.8,0.2-2.8,0.2c-0.7,0-1.5,0-2.3-0.1c0,0-0.1,0-0.1,0
c-0.4,0-0.5,0.2-0.5,0.5c0,0.1,0.3,0.3,1,0.6c0.4,0.2,0.7,0.5,1,1.1c2.6,5.1,4.3,8.2,5,9.3c0.1,0.1,0.1,0.1,0.3,0.1c0,0,0,0,0,0
c0.1,0,0.1,0,0.2-0.1c0.2-0.3,0.8-1.5,1.9-3.6c1-1.9,1.5-2.9,1.6-2.9c0.1,0,0.6,1,1.5,3c1,2.1,1.6,3.4,1.8,3.8
c0,0.1,0.1,0.1,0.2,0.1c0,0,0,0,0,0c0.1,0,0.2,0,0.2-0.1c1.4-2.4,3-5.7,4.8-9.6c0.3-0.7,0.7-1.1,1.1-1.2c0.7-0.2,1-0.4,1-0.6
c0-0.2-0.1-0.4-0.4-0.4c-0.1,0-0.1,0-0.2,0c-0.2,0-0.5,0-0.9,0c-0.3,0-0.7,0-1.2,0c-1.2,0-2-0.1-2.4-0.2c-0.1,0-0.1,0-0.2,0
c-0.2,0-0.3,0.1-0.3,0.4c0,0.2,0.3,0.4,0.8,0.6c0.7,0.2,1,0.6,1,1c0,0.1,0,0.1,0,0.2c-0.3,1-0.8,2.2-1.6,3.8
c-0.7,1.5-1.1,2.2-1.2,2.2c-0.2,0-1.1-1.9-2.7-5.6c-0.1-0.3-0.2-0.6-0.2-0.8c0-0.5,0.3-0.8,0.9-0.9c0.5-0.1,0.7-0.3,0.7-0.7
C64,210.8,63.9,210.7,63.7,210.7L63.7,210.7z"/>
<path fill="#222222" d="M77.2,210.6c-0.2,0-0.5,0.2-1.1,0.6c-0.7,0.5-1.3,0.8-1.8,1c-0.4,0.1-0.6,0.3-0.6,0.5c0,0.2,0.1,0.3,0.3,0.4
c0.8,0.3,1.3,0.5,1.4,0.6c0.2,0.2,0.3,0.7,0.3,1.5v4.5c0,1.2-0.3,1.8-0.8,2c-0.6,0.2-0.9,0.4-0.9,0.6c0,0.3,0.1,0.4,0.3,0.5
c0,0,0.1,0,0.1,0c0.1,0,0.3,0,0.6-0.1c1.3-0.2,2.6-0.3,3.8-0.3c0.3,0,0.7,0,1,0c0.1,0,0.2,0,0.2,0c0.1,0,0.2,0,0.3,0
c0.1-0.1,0.2-0.2,0.2-0.4c0-0.3-0.2-0.4-0.7-0.4c-1.2-0.1-1.8-0.6-1.8-1.6v-5.5c0-0.4,0.4-0.9,1.1-1.3c0.8-0.4,1.6-0.6,2.5-0.6
c2,0,3,1.1,3,3.4v4c0,0.9-0.3,1.4-0.8,1.5c-0.6,0.2-0.9,0.3-0.9,0.5c0,0.1,0,0.2,0,0.3c0,0.1,0.3,0.2,0.6,0.2c0.1,0,0.2,0,0.3,0
c0.4,0,0.9,0,1.5,0c0.9,0,2,0,3.3,0.1c0,0,0.1,0,0.1,0c0.4,0,0.6-0.1,0.6-0.4c0-0.2-0.2-0.4-0.7-0.5c-0.7-0.1-1.2-0.3-1.4-0.5
c-0.3-0.3-0.5-0.7-0.5-1.3l0-4.8c0-2.9-1.3-4.4-3.9-4.4c-1.1,0-2.1,0.3-3.2,0.9c-1.1,0.6-1.6,0.9-1.5,0.9c0,0,0,0,0,0c0,0,0,0,0,0
c-0.2,0-0.3-0.3-0.4-0.9C77.6,210.9,77.5,210.6,77.2,210.6L77.2,210.6z"/>
<path fill="#222222" d="M96.5,202.8c-0.1,0-0.1,0-0.2,0c-0.1,0.1-0.2,0.2-0.2,0.6c0,0.2,0.3,0.4,0.8,0.5c1.1,0.2,1.7,0.8,1.7,1.7
V220c0,1-0.5,1.5-1.5,1.6c-0.4,0-0.6,0.2-0.6,0.4c0,0.4,0.2,0.5,0.6,0.5c0,0,0.1,0,0.1,0c1.4-0.1,2.8-0.2,4-0.2c0.6,0,1.3,0,1.9,0
c0.1,0,0.2,0,0.3,0c0.2,0,0.4,0,0.5-0.1c0.1-0.1,0.1-0.2,0.1-0.5c0-0.3-0.3-0.5-0.8-0.6c-0.9-0.1-1.4-0.3-1.6-0.4
c-0.2-0.1-0.3-0.4-0.3-0.9v-5.4c0-0.3,0-0.5,0.2-0.5c0,0,0.3,0,0.7,0c0.4,0,0.8,0,1,0c2.4,0,4.3-0.5,5.8-1.5
c1.5-1.1,2.3-2.6,2.3-4.5c0-1.7-0.6-3.1-1.9-4c-1.2-0.9-2.9-1.3-5.1-1.3c-0.7,0-1.6,0-2.8,0.1c-1.1,0-1.9,0.1-2.4,0.1
c-0.9,0-1.5,0-2-0.1C96.8,202.9,96.6,202.8,96.5,202.8L96.5,202.8z M103.2,213.2c-1.3,0-2-0.1-2-0.4v-7.2c0-0.7,0.1-1.1,0.4-1.3
c0.3-0.2,0.8-0.3,1.5-0.3c1.8,0,3.1,0.3,3.9,1c0.8,0.7,1.2,1.9,1.2,3.7c0,1.5-0.5,2.6-1.4,3.4C106,212.8,104.8,213.2,103.2,213.2
L103.2,213.2z"/>
<path fill="#222222" d="M118.4,210.7c-1.8,0-3.4,0.6-4.7,1.7c-1.3,1.2-2,2.7-2,4.5c0,1.7,0.5,3.1,1.6,4.1c1.1,1.1,2.6,1.6,4.5,1.6
c1.9,0,3.5-0.6,4.8-1.8c1.3-1.2,1.9-2.7,1.9-4.4c0-1.7-0.5-3.1-1.6-4.1C121.9,211.3,120.4,210.7,118.4,210.7L118.4,210.7z
M118.4,221.3c-1.2,0-2.1-0.4-2.8-1.3c-0.8-1-1.2-2.3-1.2-4c0-1.1,0.3-2,1-2.7c0.7-0.7,1.5-1.1,2.6-1.1c1.1,0,2.1,0.5,2.8,1.4
c0.8,1,1.1,2.2,1.1,3.8c0,1.2-0.3,2.1-1,2.8C120.3,220.9,119.4,221.3,118.4,221.3L118.4,221.3z"/>
<path fill="#222222" d="M140,210.6c-0.2,0-0.5,0.2-1.1,0.6c-0.7,0.5-1.3,0.8-1.8,1c-0.4,0.1-0.6,0.3-0.6,0.5c0,0.2,0.1,0.3,0.3,0.4
c0.8,0.3,1.3,0.5,1.4,0.6c0.2,0.2,0.3,0.7,0.3,1.5v4.5c0,1.2-0.3,1.8-0.8,2c-0.6,0.2-0.9,0.4-0.9,0.6c0,0.3,0.1,0.4,0.3,0.5
c0,0,0.1,0,0.1,0c0.1,0,0.3,0,0.6-0.1c1.3-0.2,2.6-0.3,3.8-0.3c0.3,0,0.7,0,1,0c0.1,0,0.2,0,0.2,0c0.1,0,0.2,0,0.3,0
c0.1-0.1,0.2-0.2,0.2-0.4c0-0.3-0.2-0.4-0.7-0.4c-1.2-0.1-1.8-0.6-1.8-1.6v-5.5c0-0.4,0.4-0.9,1.1-1.3c0.8-0.4,1.6-0.6,2.5-0.6
c2,0,3,1.1,3,3.4v4c0,0.9-0.3,1.4-0.8,1.5c-0.6,0.2-0.9,0.3-0.9,0.5c0,0.1,0,0.2,0,0.3c0,0.1,0.3,0.2,0.6,0.2c0.1,0,0.2,0,0.3,0
c0.4,0,0.9,0,1.5,0c0.9,0,2,0,3.3,0.1c0,0,0.1,0,0.1,0c0.4,0,0.6-0.1,0.6-0.4c0-0.2-0.2-0.4-0.7-0.5c-0.7-0.1-1.2-0.3-1.4-0.5
c-0.3-0.3-0.5-0.7-0.5-1.3l0-4.8c0-2.9-1.3-4.4-3.9-4.4c-1.1,0-2.1,0.3-3.2,0.9c-1.1,0.6-1.6,0.9-1.5,0.9c0,0,0,0,0,0c0,0,0,0,0,0
c-0.2,0-0.3-0.3-0.4-0.9C140.5,210.9,140.3,210.6,140,210.6L140,210.6z"/>
<path fill="#222222" d="M156.8,208.1c-0.2,0-0.3,0.1-0.4,0.2c-0.8,1.4-1.7,2.3-2.8,2.8c-0.1,0.1-0.2,0.2-0.2,0.5
c0,0.3,0.1,0.4,0.2,0.5c0.6,0.2,1,0.3,1.1,0.5c0.1,0.2,0.2,0.6,0.2,1.3v5.4c0,2.3,1.1,3.5,3.2,3.5c0.8,0,1.6-0.1,2.4-0.4
c0.9-0.3,1.3-0.7,1.3-1.2c0-0.1-0.1-0.2-0.2-0.2c0,0-0.3,0.1-0.8,0.2c-0.5,0.1-0.9,0.2-1.3,0.2c-1.1,0-1.7-0.2-2-0.6
c-0.2-0.3-0.3-1.1-0.3-2.3v-4.9c0-0.4,0-0.6,0.1-0.7c0.1-0.1,0.3-0.2,0.7-0.2h2.3c0.4,0,0.8-0.3,1-0.9c0.2-0.5,0.2-0.7,0-0.7H158
c-0.2,0-0.4,0-0.5-0.1c0-0.1-0.1-0.2-0.1-0.3l-0.1-1.9c0-0.2-0.1-0.3-0.3-0.4C156.9,208.1,156.8,208.1,156.8,208.1L156.8,208.1z"/>
<path fill="#222222" d="M131.4,203.6c-0.4,0-0.8,0.2-1.2,0.6c-0.4,0.4-0.6,0.8-0.6,1.2c0,0.5,0.2,0.8,0.5,1.1
c0.3,0.3,0.7,0.4,1.2,0.4c0.4,0,0.8-0.2,1.1-0.6c0.3-0.4,0.5-0.8,0.5-1.3C132.9,204.1,132.4,203.6,131.4,203.6L131.4,203.6z
M131.7,210.6c-0.1,0-0.4,0.2-1,0.5c-0.7,0.4-1.4,0.8-2.3,1c-0.5,0.1-0.7,0.4-0.7,0.7c0,0.2,0.2,0.4,0.5,0.5c0.7,0.2,1.2,0.6,1.4,1
c0.2,0.3,0.2,0.9,0.2,1.7v4c0,0.9-0.3,1.5-0.9,1.7c-0.5,0.2-0.8,0.3-0.8,0.6c0,0.3,0.1,0.4,0.2,0.5c0.1,0,0.2,0.1,0.4,0.1
c0.1,0,0.2,0,0.4,0c0.8-0.1,1.7-0.1,2.6-0.1c0.6,0,1.2,0,1.9,0.1c0.3,0,0.5,0,0.7,0c0,0,0.1,0,0.1,0c0.2,0,0.3-0.2,0.4-0.5
c0.1-0.3-0.2-0.6-0.9-0.7c-0.6-0.1-1-0.4-1.2-0.7c-0.2-0.3-0.3-0.8-0.3-1.4c0-2.7,0-5.4,0.1-8.1
C132.3,210.8,132.1,210.6,131.7,210.6L131.7,210.6z"/>
<path fill="#222222" d="M196.3,210.5c-1.7,0-3.1,0.6-4.2,1.7c-1.2,1.2-1.8,2.8-1.8,4.8c0,1.7,0.5,3.1,1.6,4.2c1,1,2.3,1.5,3.8,1.5
c1.4,0,2.7-0.4,4.1-1.1c1.2-0.6,1.7-1.2,1.7-1.6c0-0.3-0.1-0.4-0.2-0.4c-0.2,0-0.4,0.1-0.6,0.2c-1.5,0.8-2.8,1.3-3.9,1.3
c-2,0-3.2-1.2-3.6-3.6l6.9-2c1-0.3,1.5-0.6,1.5-1c0-0.3-0.1-0.5-0.4-0.5c-0.2,0-0.3-0.2-0.4-0.4c-0.2-0.7-0.8-1.4-1.5-1.9
C198.2,210.8,197.3,210.5,196.3,210.5L196.3,210.5z M192.9,216.2v-0.4c0-2.6,0.9-4,2.8-4c0.6,0,1.2,0.2,1.6,0.6
c0.4,0.4,0.7,0.9,0.7,1.4c0,0.5-0.3,0.8-1,1L192.9,216.2L192.9,216.2z"/>
<path fill="#222222" d="M208.9,210.5c-1.3,0-2.3,0.3-3.1,0.9c-0.8,0.6-1.2,1.4-1.2,2.5c0,0.9,0.3,1.6,0.8,2.1
c0.5,0.5,1.5,1.1,2.9,1.7c1,0.4,1.7,0.8,2,1.2c0.3,0.3,0.5,0.6,0.5,1.1c0,1-0.7,1.5-2.1,1.5c-1.7,0-2.9-0.7-3.6-2
c-0.2-0.3-0.3-0.4-0.5-0.4c0,0,0,0-0.1,0c-0.2,0-0.4,0.3-0.4,0.8c0,1.2,0,1.9,0.1,2.1c0.1,0.1,0.6,0.3,1.4,0.5
c0.9,0.2,1.9,0.3,2.8,0.3c1.4,0,2.5-0.3,3.3-0.9c0.8-0.6,1.2-1.5,1.2-2.5c0-1-0.3-1.7-0.9-2.3c-0.5-0.4-1.3-0.9-2.6-1.5
c-1.2-0.5-2-0.9-2.3-1.2c-0.4-0.3-0.6-0.7-0.6-1.2c0-0.9,0.7-1.3,2-1.3c1.2,0,2.2,0.6,3,1.9c0.1,0.1,0.2,0.2,0.4,0.2
c0.1,0,0.2,0,0.2,0c0.3-0.1,0.4-0.2,0.4-0.3c-0.2-1.1-0.4-1.9-0.5-2.4c0-0.2-0.4-0.4-1.1-0.5C210.5,210.6,209.7,210.5,208.9,210.5
L208.9,210.5z"/>
<path fill="#222222" d="M243.3,210.6c-0.2,0-0.5,0.2-1.1,0.6c-0.7,0.5-1.3,0.8-1.8,1c-0.4,0.1-0.6,0.3-0.6,0.5
c0,0.2,0.1,0.3,0.3,0.4c0.8,0.3,1.3,0.5,1.4,0.6c0.2,0.2,0.3,0.7,0.3,1.5v4.5c0,1.2-0.3,1.8-0.8,2c-0.6,0.2-0.9,0.4-0.9,0.6
c0,0.3,0.1,0.4,0.3,0.5c0,0,0.1,0,0.1,0c0.1,0,0.3,0,0.6-0.1c1.3-0.2,2.6-0.3,3.8-0.3c0.3,0,0.7,0,1,0c0.1,0,0.2,0,0.2,0
c0.1,0,0.2,0,0.3,0c0.1-0.1,0.2-0.2,0.2-0.4c0-0.3-0.2-0.4-0.7-0.4c-1.2-0.1-1.8-0.6-1.8-1.6v-5.5c0-0.4,0.4-0.9,1.1-1.3
c0.8-0.4,1.6-0.6,2.5-0.6c2,0,3,1.1,3,3.4v4c0,0.9-0.3,1.4-0.8,1.5c-0.6,0.2-0.9,0.3-0.9,0.5c0,0.1,0,0.2,0,0.3
c0,0.1,0.3,0.2,0.6,0.2c0.1,0,0.2,0,0.3,0c0.4,0,0.9,0,1.5,0c0.9,0,2,0,3.3,0.1c0,0,0.1,0,0.1,0c0.4,0,0.6-0.1,0.6-0.4
c0-0.2-0.2-0.4-0.7-0.5c-0.7-0.1-1.2-0.3-1.4-0.5c-0.3-0.3-0.5-0.7-0.5-1.3l0-4.8c0-2.9-1.3-4.4-3.9-4.4c-1.1,0-2.1,0.3-3.2,0.9
c-1.1,0.6-1.6,0.9-1.5,0.9c0,0,0,0,0,0c0,0,0,0,0,0c-0.2,0-0.3-0.3-0.4-0.9C243.7,210.9,243.6,210.6,243.3,210.6L243.3,210.6z"/>
<path fill="#222222" d="M219.6,203.6c-0.4,0-0.8,0.2-1.2,0.6c-0.4,0.4-0.6,0.8-0.6,1.2c0,0.5,0.2,0.8,0.5,1.1
c0.3,0.3,0.7,0.4,1.2,0.4c0.4,0,0.8-0.2,1.1-0.6c0.3-0.4,0.5-0.8,0.5-1.3C221.2,204.1,220.7,203.6,219.6,203.6L219.6,203.6z
M219.9,210.6c-0.1,0-0.4,0.2-1,0.5c-0.7,0.4-1.4,0.8-2.3,1c-0.5,0.1-0.7,0.4-0.7,0.7c0,0.2,0.2,0.4,0.5,0.5c0.7,0.2,1.2,0.6,1.4,1
c0.2,0.3,0.2,0.9,0.2,1.7v4c0,0.9-0.3,1.5-0.9,1.7c-0.5,0.2-0.8,0.3-0.8,0.6c0,0.3,0.1,0.4,0.2,0.5c0.1,0,0.2,0.1,0.4,0.1
c0.1,0,0.2,0,0.4,0c0.8-0.1,1.7-0.1,2.6-0.1c0.6,0,1.2,0,1.9,0.1c0.3,0,0.5,0,0.7,0c0,0,0.1,0,0.1,0c0.2,0,0.3-0.2,0.4-0.5
c0.1-0.3-0.2-0.6-0.9-0.7c-0.6-0.1-1-0.4-1.2-0.7c-0.2-0.3-0.3-0.8-0.3-1.4c0-2.7,0-5.4,0.1-8.1
C220.5,210.8,220.3,210.6,219.9,210.6L219.9,210.6z"/>
<path fill="#222222" d="M176.7,202.7c-3.5,0-6.4,0.1-8.5,0.2c-0.4,0-0.6,0-0.7,0.1c-0.2,0.1-0.3,0.2-0.3,0.5c0,0.2,0.1,0.4,0.2,0.4
c0.1,0.1,0.4,0.2,0.9,0.3c0.6,0.1,1,0.3,1.2,0.4c0.2,0.2,0.3,0.6,0.3,1.1V220c0,1-0.5,1.5-1.5,1.6c-0.4,0-0.6,0.2-0.6,0.4
c0,0.4,0.2,0.5,0.5,0.5c0,0,0.1,0,0.1,0c1-0.1,1.9-0.1,2.7-0.1c0.6,0,1.5,0,2.6,0.1c1.1,0.1,1.8,0.1,2.2,0.1c3.8,0,6.8-0.8,8.9-2.5
c2.3-1.8,3.4-4.4,3.4-7.9c0-3-1.1-5.3-3.2-7C182.9,203.6,180.2,202.7,176.7,202.7L176.7,202.7z M176.4,221.2c-1.6,0-2.6-0.2-3.1-0.5
c-0.5-0.3-0.8-1-0.8-2v-13.9c0-0.5,0.5-0.8,1.6-0.9h2.1c5.9,0,8.9,2.9,8.9,8.7C185.1,218.4,182.2,221.2,176.4,221.2L176.4,221.2z"/>
<g>
<path fill="#222222" d="M230.2,210.4c-1.5,0-2.7,0.4-3.6,1.3c-1,0.9-1.4,2-1.4,3.3c0,2.1,1.2,3.5,3.5,4.1c-1.6,0.6-2.5,1.2-2.5,2
c0,0.8,0.4,1.3,1.3,1.7c-1.9,1.3-2.9,2.6-2.9,3.9c0,0.9,0.4,1.6,1.2,2.2c0.8,0.5,1.9,0.8,3.2,0.8c2.2,0,4.1-0.5,5.8-1.5
c1.7-1,2.6-2.3,2.6-3.8c0-1.1-0.5-1.8-1.5-2.3c-0.6-0.3-1.6-0.6-2.9-0.7l-2.3-0.3c-1.2-0.2-1.8-0.4-1.8-0.7c0-0.3,0.8-0.6,2.5-1.1
c2.8-0.8,4.2-2.2,4.2-4.4c0-0.3,0-0.5,0-0.8c0-0.3,0-0.4,0-0.5c0-0.2,0.1-0.3,0.2-0.3c0.1,0,0.2,0,0.4,0c0.4,0.1,0.7,0.1,0.8,0.1
c0.4,0,0.7-0.4,0.8-1.1c0.1-0.4,0-0.6,0-0.7c-0.1-0.1-0.3-0.1-0.5-0.1c0,0-0.1,0-0.1,0l-1.3,0c-0.1,0-0.2,0-0.3,0
c-0.9,0-1.6-0.1-2.2-0.4C232.2,210.6,231.2,210.4,230.2,210.4L230.2,210.4z M230.5,218c-1.9,0-2.8-1.1-2.8-3.2
c0-2.1,0.8-3.2,2.5-3.2c2,0,3,1.2,3,3.5c0,0.9-0.3,1.6-0.8,2.1C231.9,217.8,231.3,218,230.5,218L230.5,218z M230,228.4
c-1.9,0-2.9-0.7-2.9-2.1c0-1.3,0.5-2.3,1.6-3.2c0.5,0.1,0.9,0.2,1.2,0.2l3,0.4c1.8,0.3,2.8,0.8,2.8,1.5c0,0.7-0.5,1.4-1.6,2
C232.8,228,231.5,228.4,230,228.4L230,228.4z"/>
<path fill="#222222" d="M233.2,204.8c-0.1,0.2-0.3,0.2-0.4,0.4c0,0.1,0.1,0.2,0.1,0.4c0,0,0,0,0,0c-0.3,0-0.5,0.2-0.6,0.4
c-0.1,0.2,0.1,0.4,0.1,0.6c-0.1,0-0.1,0.1-0.2,0.1c-0.2,0-0.4-0.2-0.6-0.3c-0.5-0.3-1.2-0.6-1.8-0.6c-0.4,0-0.8,0.2-0.9,0.7
c-0.2,0.6,0,1.1,0.2,1.5c0.1,0.5,0.3,0.9,0.2,1.5c1.9,0.4,3.8,0.9,5.7,1.3c0.2-0.8,0.7-1,1-1.4c0.1-0.1,0.1-0.2,0.1-0.3
c0.1-0.1,0.2-0.1,0.2-0.2c0.2-0.3,0.3-0.8,0.2-1.1c-0.2-0.7-1-0.8-1.8-0.8c-0.5,0-1,0-1.3,0.1c0-0.1-0.2-0.1-0.2-0.2
c0.5-0.2,0.5-1,0.1-1.1c0.1-0.1,0.2-0.2,0.3-0.3C233.3,205.2,233.3,205,233.2,204.8L233.2,204.8z M230.3,209.2
c-0.5-0.2-0.7-0.7-0.9-1.2c-0.2-0.4-0.3-0.8-0.3-1.2c0-0.5,0.3-0.7,0.7-0.7c0.7,0,1.7,0.7,2.1,1c-0.1,0.4,0.1,1,0,1.6
c-0.1,0.3-0.3,0.8-0.7,0.8c0,0-0.1,0-0.1,0c-0.4-0.1-0.4-0.7,0-1c-0.1-0.4-0.3-0.6-0.5-0.9c-0.2,0.1-0.3,0.4-0.5,0.5
c0,0.3,0.2,0.5,0.3,0.7C230.6,209.1,230.4,209.1,230.3,209.2L230.3,209.2z M233.1,209.8c-0.3,0-0.6-0.4-0.4-0.9
c0.1-0.6,0.7-1.1,0.7-1.5c0.6-0.1,1-0.2,1.5-0.2c0.1,0,0.1,0,0.2,0c0.6,0.1,1.3,0.3,1,1.1c-0.2,0.4-1.1,1.4-1.4,1.6
c-0.1,0.1-0.3,0.1-0.5,0.1c-0.2,0-0.4-0.1-0.3-0.3c0-0.4,0.5-0.3,0.7-0.6c-0.1-0.2-0.1-0.5-0.2-0.7c-0.3,0.1-0.5,0.3-0.8,0.5
c0,0.2,0,0.4,0.1,0.6C233.4,209.7,233.3,209.8,233.1,209.8L233.1,209.8z"/>
<path fill="#222222" d="M229.1,209.8c-0.1,0.1-0.1,0.3-0.1,0.5c1.9,0.4,3.8,0.9,5.7,1.3c0-0.2,0.1-0.3,0.1-0.5
C232.9,210.6,231,210.2,229.1,209.8L229.1,209.8z"/>
</g>
<g>
</g>
</svg></a>
</div>
</div>
/* control size of animation */
div.wrap {
max-width: 350px;
height: 300px;
position:relative;
top:10px;
left:calc(50% - 150px);
}
div.wrap div svg {
max-width:300px;
}
/* License etc at bottom */
(function(window) {
'use strict';
var transEndEventNames = {
"WebkitTransition": "webkitTransitionEnd",
"MozTransition": "transitionend",
"OTransition": "oTransitionEnd",
"msTransition": "MSTransitionEnd",
"transition": "transitionend"
},
transEndEventName = transEndEventNames['transition'];
function extend(a, b) {
for (var key in b) {
if (b.hasOwnProperty(key)) {
a[key] = b[key];
}
}
return a;
}
function TraceFillSVG(options) {
this.options = extend({}, this.options);
extend(this.options, options);
this._init();
}
/**
* TraceFillSVG options
*
* Available options:
* elementId - the ID of the element to draw
*/
TraceFillSVG.prototype.options = {
elementId: "svg"
};
TraceFillSVG.prototype._init = function() {
this.svg = document.getElementById(this.options.elementId);
this.svg.style.visibility = "visible";
// console.log(this.options.elementId);
// console.log(this.svg);
this.paths = this.svg.querySelectorAll("path");
this._initAnimation();
};
TraceFillSVG.prototype._initAnimation = function() {
for (var i = 0; i < this.paths.length; i++) {
var path = this.paths[i];
var length = path.getTotalLength();
// reset opacities
path.style.fillOpacity = 0;
path.style.strokeOpacity = 1;
// reset transitions
path.style.transition = path.style.WebkitTransition = "none";
// reset stroke dash array and stroke dash offset
path.style.strokeDasharray = length + " " + length;
path.style.strokeDashoffset = length;
path.getBoundingClientRect();
// apply new transitions
path.style.transition = path.style.WebkitTransition = "stroke-dashoffset 3s ease-out";
// go baby go
path.style.strokeDashoffset = 0;
// fill the path
this._fillPath(path);
}
};
TraceFillSVG.prototype._fillPath = function(path) {
path.addEventListener(transEndEventName, function() {
// reset transitions
path.style.transition = path.style.WebkitTransition = "none";
path.style.transition = path.style.WebkitTransition = "fill-opacity 1.25s ease-in-out, stroke-opacity 2s ease-in-out, stroke-width 5s ease";
// edit props
path.style.fillOpacity = 1;
path.style.strokeOpacity = 1;
// set above property to 0 to hide stroke after animation is complete
path.style.strokeWidth = 0.6;
});
};
window.TraceFillSVG = TraceFillSVG;
})(window);
(function (window) {
var letterAnimation = new TraceFillSVG({
elementId: "svg"
});
})(window);
/* Draw Fill SVG *
* A plugin that simulates a "draw" effect on the stroke of an SVG, fades
* out the stroke, and fades in a fill color.
*
* Licensed under the MIT license.
* http://callmenick.com
* https://www.opensource.org/licenses/mit-license.php
*/
This Pen doesn't use any external CSS resources.