HTML5-SVG Ninja - Textual Half A Star

Posted at

SVG is so easy on drawing vector-graphic,
BUT it handles text in images very well (you can copy/paste it as well).

Use Unicode symbol 🌟︎ and fill it halfway with yellow color to create a nice very easy to use SVG-image :)

You can right click it to view the source or open it in a new tab.





<svg xmlns="http://www.w3.org/2000/svg" width="85pt" height="85pt" >
<defs>
<linearGradient id="bicolored" x1="0" x2="100%" y1="0" y2="20%">
<stop stop-color="rgba(255,255,0, .9)" offset="80%" />
<stop stop-color="rgba(255,255,255,.9)" offset="80%" />
</linearGradient>
</defs>
<style type="text/css" media="all">
/*<![CDATA[*/
svg, text {
padding:0;
margin:0;
}
svg{
font: 80pt/80pt "Roboto", sans-serif;
vertical-align: middle;
text-size-adjust: 100%;
font-kerning: normal;
box-sizing: border-box;
text-rendering: geometricPrecision;
}
text{
/* attempt to antialias */
-webkit-font-smoothing: subpixel-antialiased;
text-shadow: 0 0 .5px rgba(0, 0, 0, .1);
stroke: rgba(0,0,0,.8);
stroke-width: 2px;
fill: url(#bicolored);
}
/*]]>*/
</style>
<text x="0" y="70pt">🌟︎</text>
</svg>