newcoder1010 Posted May 1, 2016 Share Posted May 1, 2016 Hi, I like to have a text like "100% satisfaction" and then have double circle with different colors. How can I do it? Thanks. Link to comment Share on other sites More sharing options...
Ingolme Posted May 1, 2016 Share Posted May 1, 2016 You would need to make that in an image editor. Link to comment Share on other sites More sharing options...
newcoder1010 Posted May 1, 2016 Author Share Posted May 1, 2016 HTML: <section id="block-block-39" class="block block-block satisfactionguaranteed col-md-4 contextual-links-region clearfix"> <p>100% SATISFACTION GUARANTEED</p> </section> I applied this: .satisfactionguaranteed {width:100px;height:100px;border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-align:center;background:#000} I only see "100%" inside circle. rest is outside the circle. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 2, 2016 Share Posted May 2, 2016 svg? <!DOCTYPE html> <html> <body> <h1>My first SVG</h1> <svg width="100" height="100"> <circle cx="50" cy="50" r="49" stroke="skyblue" stroke-width="2" fill="white" /> <circle cx="50" cy="50" r="45" stroke="lightblue" stroke-width="3" fill="white" /> <text y="20" style="fill:blue;" font-size="8"> <tspan x="23" y="32">SATISFACTION</tspan> <tspan x="13" y="58" font-size="31">100%</tspan> <tspan x="23" y="70">GUARANTEED</tspan> </text> Sorry, your browser does not support inline SVG. </svg> </body> </html> Link to comment Share on other sites More sharing options...
newcoder1010 Posted May 2, 2016 Author Share Posted May 2, 2016 Thanks. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 6, 2016 Share Posted May 6, 2016 (edited) Replicated in svg <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <style type="text/css"> .svg_wrap { color: #000066; font: bold 96% Euphemia; margin: 1% auto; max-width: 960px; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); width: 250px; height: 250px; display:inline-block; } .svg_wrap svg { pointer-events: none; } .svg_wrap svg text { fill: currentcolor; pointer-events: auto; text-anchor: middle; text-transform: uppercase; } body {background-color: #A8D9E9;} .svg_wrap.font1 {font-size: 125%;} .color1{color: #66CCCC;} .svg_outer {text-align: center;} .svg_col {width: 33%;; display: inline-block;text-align: center; min-width: 290px;} </style> </head> <body> <div class="svg_outer"> <div class="svg_col"> <div class="svg_wrap"> <svg viewBox="0 0 200 200" preserveAspectRatio="none"> <circle cx="50%" cy="50%" r="49%" stroke="#000066" stroke-width="3" fill="#ffffff" style=""/> <circle fill="transparent" stroke-width="5" stroke="#66CCCC" r="45.5%" cy="50%" cx="50%"/> <text x="50%" y="33%" dy=".3em">Satisfaction</text> <text x="50%" y="50%" dy=".3em" font-size="2.7em" font-weight="lighter">100%</text> <text dy=".3em" y="67%" x="50%">Guaranteed</text> <svg> <g transform="scale(0.332 0.332)"> <polygon points="236,76 218,135 264,98 208,98 254,135" style="fill:#66CCCC;stroke:purple;stroke-width:0;fill-rule:nonzero;"/> <polygon points="300,70 280,140 333,96 267,96 320,140" style="fill:#66CCCC;stroke:purple;stroke-width:0;fill-rule:nonzero;"/> <polygon points="364,76 346,135 392,98 336,98 382,135" style="fill:#66CCCC;stroke:purple;stroke-width:0;fill-rule:nonzero;"/> </g> </svg> </svg> </div> </div> <div class="svg_col"> <div class="svg_wrap"> <svg viewBox="0 0 200 200" preserveAspectRatio="none"> <circle cx="50%" cy="50%" r="49%" stroke="#000066" stroke-width="3" fill="#ffffff" style=""/> <circle fill="transparent" stroke-width="5" stroke="#66CCCC" r="45.5%" cy="50%" cx="50%"/> <text x="50%" y="33%" dy=".3em">Since</text> <text x="50%" y="50%" dy=".3em" font-size="2.7em" font-weight="lighter">2000</text> <svg> <g> <circle style="" fill="#66CCCC" stroke-width="3" stroke="transparent" r="7%" cy="49.11%" cx="15%"/> <circle style="" fill="#66CCCC" stroke-width="3" stroke="transparent" r="7%" cy="49.11%" cx="85%"/> <polygon style="fill:#ffffff;stroke:purple;stroke-width:0;fill-rule:nonzero;" points="30 87,40 95,35 95,35 113,25 113,25 95,20 95" /> <polygon style="fill:#ffffff;stroke:purple;stroke-width:0;fill-rule:nonzero;" points="170 87,180 95,175 95,175 113,165 113,165 95,160 95" /> </g> </svg> </svg> </div> </div> <div class="svg_col"> <div class="svg_wrap font1"> <svg viewBox="0 0 200 200" preserveAspectRatio="none"> <circle cx="50%" cy="50%" r="49%" stroke="#000066" stroke-width="3" fill="#ffffff" style=""/> <circle fill="transparent" stroke-width="5" stroke="#66CCCC" r="45.5%" cy="50%" cx="50%"/> <text class="color1" x="50%" y="20%" dy=".3em">$ $ $</text> <text x="50%" y="43%" dy=".3em" >Within</text> <text dy=".3em" y="60%" x="50%">Budget</text> </svg> </div> </div> </div> </body> </html> Edited May 6, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now