<%@ page contentType="image/svg-xml" %> <% // // Extract graphic parameter from request parameter // // Title String title = request.getParameter("title"); title = title!=null?title:"Your Title Here"; // Main color String color = request.getParameter("color"); color = color!=null?color:"#666699"; // Width and height int width = 500; int height = 120; // Font size int fontSize = 50; // Baseline int baseline = 80; %> <svg width="<%=width%>" height="<%=height%>"> <defs> <!-- Define background gradient using widht, height and color parameters --> <linearGradient id="backgroundGradient" x1="0" y1="0" x2="<%=width%>" y2="<%=height%>" > <stop offset="0%" style="stop-color:white" /> <stop offset="30%" style="stop-color:<%=color%>" /> <stop offset="100%" style="stop-color:black" /> </linearGradient> <!-- ================================== --> <!-- Back-lit glow --> <!-- ================================== --> <filter id="medGlow" x="-10%" y="-10%" width="120%" height="120%"> <feGaussianBlur in="SourceGraphic" stdDeviation="6.5" result="glowSrc"/> <feComponentTransfer in="glowSrc" result="glowingGraphic"> <feFuncA type="linear" slope="3"/> </feComponentTransfer> </filter> <!-- ================================== --> <!-- Text 3-D effect --> <!-- ================================== --> <filter id="emboss" x="-5%" y="-5%" width="110%" height="110%"> <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/> <feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" specularExponent="10" style="lighting-color:white" lightColor="white" result="specOut"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/> <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/> </filter> </defs> <rect width="<%=width%>" height="<%=height%>" style="fill:url(#backgroundGradient)" /> <g style="font-family:Verdana; font-weight:bold; font-size:<%=fontSize%>; text-anchor:middle;"> <text x="<%=(width/2)%>" y="<%=baseline%>" style="text-anchor:middle; fill:white; filter:url(#medGlow);"> <%=title%> </text> <text x="<%=(width/2)%>" y="<%=baseline%>" style="fill:black; filter:url(#emboss)" > <%=title%> </text> </g> </svg>