Playing with Scalable Vector Graphics and CSS3

foobar<p>I haven&rsquo;t been posted often enough this year! Let&rsquo;s get out of that bad habbit by starting with some of the things I have been working on. Currently I am thinking of making some further tweaks to my web site, as I am still not really happy with it yet ( I won&rsquo;t go into full detail though ). Anyway, as an excuse to improve my knowledge around CSS3, I thought I would try my hand at converting my logo into pure CSS.</p>

<ul>
<li>Attempt 1 was the way I originally knew (which took the longest funnily enough), with multiple HTML elements and styling upon each of those.</li>
<li>Attempt 2 was with a single HTML element, and a LOT of CSS stylings upon it, making use of multiple gradients, and other tweaks to trick the browser into giving me what I wanted.</li>
<li>Attempt 3 was with SVG, which was the easiest to do and by far looks the best, on top of which has the benefit of being very easy to scale for bigger/smaller display sizes.</li>
</ul>

<p data-height="268" data-theme-id="0" data-slug-hash="glwrc" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/Cyberlane/pen/glwrc'>Cyber-Lane Logo</a> by Justin Nel (<a href='http://codepen.io/Cyberlane'>@Cyberlane</a>) on <a href='http://codepen.io'>CodePen</a>.</p>

<script async src="//codepen.io/assets/embed/ei.js"></script>

<hr />

<p>I also got my hands on an Espruino recently, so will be publishing up a lot of code for connecting this board to a number of useful modules I own and may use for much more exciting kits in the near future!</p>

This entry was posted in News. Bookmark the permalink.

Comments are closed.