SVG rectangle with shadow

This snippet code shows how to make SVG object like rectangle with rounded corners and rotated text inside. 
<!DOCTYPE html>
<html>
<body>
<svg height="140" width="140">
  <defs>
    <filter id="filter1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="15" dy="15" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" rx="25" ry="25" fill="blue" filter="url(#filter1)" />
      <!-- In SVG we don't need to use -webkit- for transform -->
  <text x="20" y="35" transform="rotate(30 20,40)" fill="gold">TIZEN</text>
</svg>
</body>
</html>
List

Responses

0 Replies