A Pen by Andy Dietz

Thumbnail
This awesome code was written by andydietz, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright andydietz ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Andy Dietz</title>
  
  
  
  
  
</head>

<body>

  <svg width="22px" height="31px" viewBox="0 0 22 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  
    <defs>
        <ellipse id="path-1" cx="10" cy="25" rx="2.5" ry="1"></ellipse>
        <filter x="-120.0%" y="-100.0%" width="340.0%" height="700.0%" filterUnits="objectBoundingBox" id="filter-2">
            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0.568627451   0 0 0 0 0.588235294   0 0 0 0 0.607843137  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0.549019608   0 0 0 0 1  0 0 0 0.28 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
            </feMerge>
        </filter>
        <linearGradient x1="1.11022302e-14%" y1="100%" x2="99.21875%" y2="0.78125%" id="linearGradient-3">
            <stop stop-color="#0050AA" offset="0%"></stop>
            <stop stop-color="#008CFF" offset="100%"></stop>
        </linearGradient>
        <path d="M20,9.30198912 C20,4.13224553 15.4663881,-0.0531301822 9.89482994,0.000509894396 C4.44171612,0.0527002392 -0.0981297101,4.40189564 0.00161286911,9.47305748 C0.0343409029,11.146048 0.550197055,12.7059594 1.41203528,14.0513105 L1.40112593,14.05421 L9.26988035,25.6259692 C9.60962851,26.1246769 10.3904259,26.1246769 10.730174,25.6259692 L18.5989285,14.05421 L18.5880191,14.0513105 C19.4779099,12.659568 20,11.0387678 20,9.30198912" id="path-4"></path>
        <rect id="path-6" x="0" y="0" width="8" height="8" rx="4"></rect>
        <filter x="-18.8%" y="-18.8%" width="137.5%" height="137.5%" filterUnits="objectBoundingBox" id="filter-8">
            <feGaussianBlur stdDeviation="0.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
            <feOffset dx="0" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.12 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
        </filter>
    </defs>
    <g id="Branch-Finder---components" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-532.000000, -726.000000)">
        <g id="branch-pins" transform="translate(62.000000, 600.000000)">
            <g id="Single-Pin" transform="translate(391.000000, 80.000000)">
                <g id="Gen-Rent-Branch">
                    <g id="Gen-Rent-Resting">
                        <g id="Map/Pin/Branch/GenRent/Unselected" transform="translate(80.000000, 47.000000)">
                            <g id="shadow" fill="black" fill-opacity="1">
                                <use filter="url(#filter-2)" xlink:href="#path-1"></use>
                            </g>
                            <mask id="mask-5" fill="white">
                                <use xlink:href="#path-4"></use>
                            </mask>
                            <use id="pin" stroke="url(#linearGradient-3)" stroke-width="0.5" fill="#008CFF" xlink:href="#path-4"></use>
                            <g id="inner-circle" mask="url(#mask-5)">
                                <g transform="translate(6.000000, 5.500000)">
                                    <mask id="mask-7" fill="white">
                                        <use xlink:href="#path-6"></use>
                                    </mask>
                                    <g id="inner-circle-bg" stroke="none" fill="none">
                                        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-6"></use>
                                        <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-6"></use>
                                        <use stroke="#FFFFFF" stroke-width="1" xlink:href="#path-6"></use>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>
  
  

</body>

</html>

Comments