SVG bevel and emboss to find center-line of text - HTML CSS SVG

HTML CSS examples for SVG:Text

  1. HOME
  2. HTML CSS
  3. SVG
  4. Text

Description

SVG bevel and emboss to find center-line of text

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>center ridge</title> 
 </head> <!--from   w  w w.  j a v a  2 s.c  om-->
 <body translate="no"> 
  <svg viewbox="-500 0 2000 2000"> 
   <filter id="filterData"> 
    <fegaussianblur result="blur" stdDeviation="13" /> 
    <fediffuselighting surfacescale="300"> 
     <fedistantlight azimuth="90" elevation="100" /> 
    </fediffuselighting> 
    <fecomposite result="composite" operator="in" in2="SourceGraphic" /> 
   </filter> &lt; text x='2000' y='500' &gt;P 
   <path filter="url(#filterData)" id="letter" d="M 374.512,316.992 H 2.703 L 193.75,379.687 Q 1.789,402.8 183.789,4.258 183.7,423.34 192.2,4.3 2.074,437.109 229.785,439.16 V 450 H 104.688 V 439.16 Q 129.59,434.766 136.914,427.734 151.855,413.672 170.02,370.605 L 309.766,43.6523 H 320.02 L 458.301,374.121 Q 475,413.965 488.477,425.977 502.246,437.695 526.562,439.16 V 450 H 369.824 V 439.16 Q 393.555,437.988 401.758,431.25 410.254,424.512 410.254,414.844 410.254,401.953 398.535,374.121 Z M 366.309,295.312 298.926,134.766 229.785,295.312 Z M 810.742,247.266 Q 852.051,256.055 872.559,275.391 900.977,302.344 900.977,341.309 900.977,370.898 882.227,398.145 863.477,425.098 830.664,437.695 798.145,450 731.055,450 H 543.555 V 439.16 H 558.496 Q 583.398,439.16 594.238,423.34 600.977,413.086 600.977,379.687 V 123.047 Q 600.977,86.1328 592.48,76.4648 581.055,63.5742 558.496,63.5742 H 543.555 V 52.7344 H 715.234 Q 763.281,52.7344 792.285,59.7656 836.23,70.3125 859.375,97.2656 882.52,123.926 882.52,158.789 882.52,188.672 864.355,212.402 846.191,235.84 810.742,247.266 Z M 657.227,231.445 Q 668.066,233.496 681.836,234.668 695.898,235.547 712.598,235.547 755.371,235.547 776.758,226.465 798.437,217.09 809.863,198.047 821.289,179.004 821.289,156.445 821.289,121.582 792.871,96.9727 764.453,72.3633 709.961,72.3633 680.664,72.3633 657.227,78.8086 Z M 657.227,421.289 Q 691.211,429.199 724.316,429.199 777.344,429.199 805.176,405.469 833.008,381.445 833.008,346.289 833.008,323.145 820.41,301.758 807.812,280.371 779.395,268.066 750.977,255.762 709.082,255.762 690.918,255.762 678.027,256.348 665.137,256.934 657.227,258.398 Z" /> 
  </svg>  
 </body>
</html>

Related Tutorials