clhenrick/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from clhenrick's block: svg path mask bug

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:0;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0;
      background: #333;
    }
    svg {
      margin: 20px;
    }
  </style>
</head>

<body>
    <svg width="161" height="50">
      <defs>
        <linearGradient id="gradient-44" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#f03b20"></stop>
          <stop offset="50%" stop-color="#feb24c"></stop>
          <stop offset="100%" stop-color="#ffeda0"></stop>
        </linearGradient>
        <mask id="mask-44" x="0" y="0" width="161" height="46">
          <path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C1.560662914321451,46,3.1213258286429015,46,4.681988742964353,46C6.194405357515113,46,7.706821972065875,34.5,9.219238586616635,34.5C10.779901500938086,34.5,12.340564415259538,46,13.901227329580989,46C15.46189024390244,46,17.02255315822389,34.5,18.58321607254534,34.5C19.992847091932457,34.5,21.402478111319574,46,22.81210913070669,46C24.37067437982072,46,25.929239628934752,46,27.48780487804878,46C28.99812382739212,46,30.50844277673546,46,32.0187617260788,46C33.57942464040025,46,35.1400875547217,46,36.70075046904315,46C38.211069418386494,46,39.72138836772983,46,41.23170731707317,46C42.79237023139462,46,44.353033145716076,34.5,45.91369606003752,34.5C47.47435897435897,34.5,49.035021888680426,46,50.59568480300187,46C52.10600375234522,46,53.61632270168855,46,55.126641651031896,46C56.687304565353344,46,58.2479674796748,46,59.808630393996246,46C61.321047008547005,46,62.83346362309777,46,64.34588023764853,46C65.90654315196998,46,67.46720606629142,46,69.02786898061288,46C70.58853189493433,46,72.14919480925577,46,73.70985772357723,46C75.16983270794246,46,76.6298076923077,46,78.08978267667293,46C79.64834792578695,46,81.20691317490098,46,82.765478424015,46C84.27579737335834,46,85.78611632270167,46,87.29643527204502,46C88.85709818636647,46,90.41776110068793,46,91.97842401500938,46C93.48874296435272,46,94.99906191369607,46,96.50938086303941,46C98.07004377736085,46,99.6307066916823,46,101.19136960600375,46C102.7520325203252,46,104.31269543464666,46,105.87335834896811,46C107.38367729831145,46,108.89399624765478,46,110.40431519699813,46C111.96497811131957,46,113.52564102564102,46,115.08630393996246,46C116.59872055451322,46,118.111137169064,46,119.62355378361475,46C121.18421669793621,46,122.74487961225766,46,124.30554252657912,46C125.86620544090057,46,127.42686835522201,46,128.98753126954347,46C130.3971622889306,46,131.8067933083177,46,133.21642432770483,46C134.77498957681885,46,136.33355482593288,46,137.8921200750469,46C139.40243902439025,46,140.91275797373356,46,142.4230769230769,46C143.98373983739836,46,145.54440275171982,46,147.10506566604127,46C148.6153846153846,46,150.12570356472796,46,151.6360225140713,46C153.19668542839275,46,154.75734834271418,46,156.31801125703564,46C157.8786741713571,46,159.43933708567855,40.25,161,34.5">
          </path>
        </mask>
      </defs>
      <g transform="translate(0, 2)">
        <rect
          x="0"
          y="-2"
          width="161"
          height="46"
          style="stroke: none; fill: url(&quot;#gradient-44&quot;); mask: url(&quot;#mask-44&quot;);">
        </rect>
      </g>
    </svg>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body {
	margin:0;
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background: #333;
	}
	svg {
	margin: 20px;
	}
	</style>
	</head>

	<body>
	<svg width="161" height="50">
	<defs>
	<linearGradient id="gradient-44" x1="0" y1="0" x2="0" y2="1">
	<stop offset="0%" stop-color="#f03b20"></stop>
	<stop offset="50%" stop-color="#feb24c"></stop>
	<stop offset="100%" stop-color="#ffeda0"></stop>
	</linearGradient>
	<mask id="mask-44" x="0" y="0" width="161" height="46">
	<path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C1.560662914321451,46,3.1213258286429015,46,4.681988742964353,46C6.194405357515113,46,7.706821972065875,34.5,9.219238586616635,34.5C10.779901500938086,34.5,12.340564415259538,46,13.901227329580989,46C15.46189024390244,46,17.02255315822389,34.5,18.58321607254534,34.5C19.992847091932457,34.5,21.402478111319574,46,22.81210913070669,46C24.37067437982072,46,25.929239628934752,46,27.48780487804878,46C28.99812382739212,46,30.50844277673546,46,32.0187617260788,46C33.57942464040025,46,35.1400875547217,46,36.70075046904315,46C38.211069418386494,46,39.72138836772983,46,41.23170731707317,46C42.79237023139462,46,44.353033145716076,34.5,45.91369606003752,34.5C47.47435897435897,34.5,49.035021888680426,46,50.59568480300187,46C52.10600375234522,46,53.61632270168855,46,55.126641651031896,46C56.687304565353344,46,58.2479674796748,46,59.808630393996246,46C61.321047008547005,46,62.83346362309777,46,64.34588023764853,46C65.90654315196998,46,67.46720606629142,46,69.02786898061288,46C70.58853189493433,46,72.14919480925577,46,73.70985772357723,46C75.16983270794246,46,76.6298076923077,46,78.08978267667293,46C79.64834792578695,46,81.20691317490098,46,82.765478424015,46C84.27579737335834,46,85.78611632270167,46,87.29643527204502,46C88.85709818636647,46,90.41776110068793,46,91.97842401500938,46C93.48874296435272,46,94.99906191369607,46,96.50938086303941,46C98.07004377736085,46,99.6307066916823,46,101.19136960600375,46C102.7520325203252,46,104.31269543464666,46,105.87335834896811,46C107.38367729831145,46,108.89399624765478,46,110.40431519699813,46C111.96497811131957,46,113.52564102564102,46,115.08630393996246,46C116.59872055451322,46,118.111137169064,46,119.62355378361475,46C121.18421669793621,46,122.74487961225766,46,124.30554252657912,46C125.86620544090057,46,127.42686835522201,46,128.98753126954347,46C130.3971622889306,46,131.8067933083177,46,133.21642432770483,46C134.77498957681885,46,136.33355482593288,46,137.8921200750469,46C139.40243902439025,46,140.91275797373356,46,142.4230769230769,46C143.98373983739836,46,145.54440275171982,46,147.10506566604127,46C148.6153846153846,46,150.12570356472796,46,151.6360225140713,46C153.19668542839275,46,154.75734834271418,46,156.31801125703564,46C157.8786741713571,46,159.43933708567855,40.25,161,34.5">
	</path>
	</mask>
	</defs>
	<g transform="translate(0, 2)">
	<rect
	x="0"
	y="-2"
	width="161"
	height="46"
	style="stroke: none; fill: url("#gradient-44"); mask: url("#mask-44");">
	</rect>
	</g>
	</svg>
	</body>