1
<svg style="position: absolute;width: 0;height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2
<style>
3
@import url(https://fonts.googleapis.com/css?family=Barrio);
4
</style>
5
<defs>
6
<linearGradient id="whymask-svg-gradient1" gradientUnits="objectBoundingBox" x1="0" x2="0" y1="0" y2="1">
7
<stop offset="0" stop-color="white" />
8
<stop offset="0.5" stop-color="blue" />
9
<stop offset="1" stop-color="black" stop-opacity="0.6" />
10
</linearGradient>
11
<!-- userSpaceOnUse is just like pixels. objectBoundingBox is 0 to 1 dimension -->
12
<mask id="whymask-svg-textmask1" maskUnits="objectBoundingBox" x="0" y="0" width="1" height="1" maskContentUnits="userSpaceOnUse">
13
<g font-family="Barrio" font-size="300" font-weight="bold">
14
<rect fill="white" x="0" y="0" width="980" height="1158" />
15
<!-- text-anchor: start, middle, end -->
16
<!-- dominant-baseline: auto, alphabetic, etc. -->
17
<text fill="black" x="490" y="600" text-anchor="middle">WHY?</text>
18
</g>
19
</mask>
20
</defs>
21
<symbol id="whymask-svg" viewbox="0 0 980 1158">
22
<rect id="whymask-svg-rect1" x="0" y="0" width="980" height="1158" fill="url(#whymask-svg-gradient1)" mask="url(#whymask-svg-textmask1)" />
23
</symbol>
24
</svg>

Code of whymask-svg

182 Views