Skip to content

Instantly share code, notes, and snippets.

@clhenrick

clhenrick/.block

Created November 3, 2017 22:42
Show Gist options
  • Save clhenrick/e0b06bbb361780f818993e956dccc5d8 to your computer and use it in GitHub Desktop.
Save clhenrick/e0b06bbb361780f818993e956dccc5d8 to your computer and use it in GitHub Desktop.
Download ZIP
svg path mask no bug
Raw
.block
license: mit
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment