My New Banner
by subacati
As you can see, if you're using the Opera browser, I've made a new
banner. This banner is drawn using svg and loads faster than standard
banners. It also uses much less bandwidth. For those of you that are
interested in these things, here is the code.
<?xml version="1.0" encoding="UTF-8"?> [html:svg font-style="normal" font-weight="400" xml:space="preserve" baseProfile="tiny" height="100%" version="1.2" viewBox="0 0 920 170" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"] [html:rect x="0" y="0" rx="30" ry="30" width="920" height="170" style="fill:yellow;stroke:red;stroke-width:2"] <animateColor id="a1" attributeName="fill" from="black" to="yellow" dur="10s"/> </rect> [html:rect x="10" y="10" rx="20" ry="20" width="900" height="150" style="fill:black;stroke:red;stroke-width:2"] <animateColor id="a2" attributeName="fill" from="yellow" to="black" dur="10s"/> </rect> <path d="M160 100 C155 105 150 110 140 110 C130 110 110 105 110 80 C110 55 130 50 140 50 C150 50 170 55 170 80 L170 130 C175 130 180 135 180 140 L170 150 C165 150 160 155 160 140 Z" style="fill:yellow;stroke:red;stroke-width:2"> <animateColor id="a1" attributeName="fill" from="black" to="yellow" dur="10s"/> </path> <circle cx="140" cy="80" r="20" stroke="red" stroke-width="2" fill="black"> <animateColor id="a1" attributeName="fill" from="yellow" to="black" dur="10s"/> </circle> [html:rect x="180" y="20" rx="5" ry="5" width="10" height="90" style="fill:yellow;stroke:red;stroke-width:2"] <animateColor id="a1" attributeName="fill" from="black" to="yellow" dur="10s"/> </rect> <path d="M210 55 C210 53 208 50 205 50 C202 50 200 53 200 55 L200 80 C200 105 220 110 230 110 C240 110 260 105 260 80 L260 55 C260 53 258 50 255 50 C252 50 250 53 250 55 L250 80 C250 90 240 100 230 100 C220 100 210 90 210 80 Z" style="fill:yellow;stroke:red;stroke-width:2"> <animateColor id="a1" attributeName="fill" from="black" to="yellow" dur="10s"/> </path> <path d="M320 75 L290 75 C288 75 285 78 285 80 C285 82 288 85 290 85 L325 85 C327 85 330 82 330 80 C330 55 310 50 300 50 C290 50 270 55 270 80 C270 105 290 110 300 110 C310 110 330 105 330 90 L320 90 C320 90 310 100 300 100 C290 100 280 90 280 80 C280 70 290 60 300 60 C310 60 320 70 320 75 Z" style="fill:yellow;stroke:red;stroke-width:2"> <animateColor id="a1" attributeName="fill" from="black" to="yellow" dur="10s"/> </path> <path d="M345 55 C342 55 340 53 340 50 C340 45 345 40 350 40 C355 40 360 45 360 50 C360 60 350 65 340 65 Z" style="fill:yellow;stroke:red;stroke-width:2"> <animateColor id="a1" attributeName="fill" from="black" to="yellow" dur="10s"/> </path> <path d="M405 60 C405 53 395 50 385 50 C375 50 365 53 365 65 C365 73 375 83 385 83 C390 83 400 87 400 93 C400 95 395 100 385 100 C375 100 372 95 365 90 C364 90 363 91 362 91 C361 91 360 92 360 95 C360 100 370 110 385 110 C400 110 410 100 410 90 C410 80 395 75 385 73 C377 72 375 66 375 65 C375 62 377 60 385 60 C393 60 395 62 395 65 C395 66 399 67 400 67 C403 67 405 65 405 60 Z" style="fill:yellow;stroke:red;stroke-width:2"> <animateColor id="a1" attributeName="fill" from="black" to="yellow" dur="10s"/> </path> <path d="M800 100 C795 105 790 110 780 110 C770 110 750 105 750 80 C750 55 770 50 780 50 C790 50 795 55 800 60 C800 52 802 50 805 50 C808 50 810 52 810 55 L810 110 C810 130 800 140 780 140 C770 140 755 135 755 125 C755 122 757 120 760 120 C761 120 762 121 762 122 C763 125 770 130 780 130 C790 130 800 120 800 110 Z" style="fill:yellow;stroke:red;stroke-width:2"> <animateColor id="a1" attributeName="fill" from="black" to="yellow" dur="10s"/> </path> <circle cx="780" cy="80" r="20" stroke="red" stroke-width="2" fill="black"> <animateColor id="a1" attributeName="fill" from="yellow" to="black" dur="10s"/> </circle> <circle cx="710" cy="80" r="30" stroke="red" stroke-width="2" fill="yellow"> <animateColor id="a1" attributeName="fill" from="black" to="yellow" dur="10s"/> </circle> <circle cx="710" cy="80" r="20" stroke="red" stroke-width="2" fill="black"> <animateColor id="a1" attributeName="fill" from="yellow" to="black" dur="10s"/> </circle> [html:rect x="660" y="20" rx="5" ry="5" width="10" height="90" style="fill:yellow;stroke:red;stroke-width:2"] <animateColor id="a1" attributeName="fill" from="black" to="yellow" dur="10s"/> </rect> <path d="M600 58 C600 55 610 50 620 50 C630 50 650 55 650 80 C650 105 630 110 620 110 C610 110 600 105 600 102 C600 108 598 110 595 110 C592 110 590 105 590 102 L590 25 C590 22 592 20 595 20 C598 20 600 22 600 25 Z" style="fill:yellow;stroke:red;stroke-width:2"> <animateColor id="a1" attributeName="fill" from="black" to="yellow" dur="10s"/> </path> <circle cx="620" cy="80" r="20" stroke="red" stroke-width="2" fill="black"> <animateColor id="a1" attributeName="fill" from="yellow" to="black" dur="10s"/> </circle> </svg>
Something to note is how small, subtle details make a large
difference. The 's' is slightly larger at the bottom than at the top.
If you make the bottom and top parts the same size, it just doesn't
look right. And if you make the bottom too much bigger, it looks even
worse. The tail on the 'g', on the other hand, hp slightly smaller
than the body of the 'g'. I originally made it the same size, but it
looked too big so I trimmed it a bit. I still wan't to refine it a bit
but it's ok for now. :up:.
Since My Opera appears to be on the blink, I've had to post t
Advertisements
Flooder! :p
It probably is. :lol:.
The following line will hide your Siyafunda title and the subtitle giving the banner a cleaner, more professional look.#top h1, #subtitle {display:none;}
Thanks. I was going to get to that but My Opera went Haywire for a bit. I couldn't get in at all, so I emailed this post in. :left:. I guess It succeeded in posting after all. :irked:.*Goes off to delete excess posts*
For those arriving late, he managed to post it eight times. 😆 That's got to be a record.I think the e-mail cut a couple of words off the end of the post, by the way.
:up: I know, I have lots a blank new posts to Aadil. 😀
😆 Post fiend. The banner looks great! :yes:That's a ton of codde, but it should be great fun to goof with. :yes: Thanks for posting it. 😀
It was great fun to code. :up:.This post took Operamini's text input to the limit of it's ability. That might be why it hic-cough'd like that. :lol:.If you're interested in trying your own svg, w3 schools has a reasonable tutorial on svg with tons of good examples to mess with.
You've gotta love hic-coughs. 😆 Life just isn't quite as much fun without them. I'll definitely go check it out. :yes: New code is always fun to tweak with.