04. SVG

01. Implement the image.
– Use both circles and paths

<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
        svg {
            background-color: #f5ffe0;
    <svg width="300" height="500">
        <!-- Draw MEAN letters -->
        <text x="30" y="100" fill="#3e3f37" font-size="30" font-weight="bold">M</text>
        <text x="30" y="150" fill="#272726" font-size="30" font-weight="bold">E</text>
        <text x="30" y="200" fill="#e23337" font-size="30" font-weight="bold">A</text>
        <text x="30" y="250" fill="#8ec74e" font-size="30" font-weight="bold">N</text>

        <!-- Draw circles -->
        <circle r="50" cx="120" cy="100" fill="#3e3f37"></circle>
        <path d="M 120 120 C 90 100 120 90 120 75" fill="#5eb14a"></path>
        <path d="M 120 120 C 150 100 120 90 120 75" fill="#449644"></path>

        <circle r="50" cx="120" cy="150" fill="#272726"></circle>
        <text x="75" y="150" fill="#ffffff" font-size="23" font-weight="bold" font-family="Consolas">express</text>

        <circle r="50" cx="120" cy="200" fill="#e23337"></circle>
        <path d="M 100 210 L 93 180 L 120 168 M 120 166.89 M 100 210 H 120" stroke="#b3b2b2" fill="none" stroke-width="3"></path>
        <path d="M 120 168 L 147 180 L 140 210 H 120" stroke="#b3b2b2" fill="#b63032" stroke-width="3"></path>
        <path d=" M 118 168 L 121 168" stroke="#b3b2b2" fill="none" stroke-width="2"></path>
        <path d="M 110 205 L 119.5 175 V 188 L 115 205 Z" stroke="#f1f0f0" fill="#f1f0f0" stroke-width="1"></path>
        <path d="M 130 205 L 120.5 175 V 188 L 125 205 Z" stroke="#b3b3b3" fill="#b3b3b3" stroke-width="1"></path>

        <circle r="50" cx="120" cy="250" fill="#8ec74e"></circle>
        <path d="M 80 250 V 240 L 88 235 L 96 240 V 250 L 92 248 C 92 240 85 238 84 248 Z"fill="#47493F"></path>
        <path d="M 103 246 V 240 L 110 235 L 117 240 V 246 L 110 250 Z" fill="#ffffff"></path>
        <path d="M 126 246 V 240 L 133 235 L 140 240 V 246 L 133 250 Z M 136 238 V 225 L 140 228 V 240" fill="#47493F"></path>
        <path d="M 130 244 V 242 L 133 240 L 136 242 V 244 L 133 246 Z" fill="#8ec74e"></path>
        <path d="M 148 248 V 240 L 155 235 L 162 240 V 243 L 158 245 V 242 L 155 240 L 152 242 V 246 L 162 252 L 157 253 Z" fill="#47493F"></path>
        <path d="M 153.5 245 V 243.5 L 155 242.2 L 156.5 243.5 V 245 L 155 246.2 Z" fill="#ffffff"></path>

MEAN - SVG -Result

02. Implement the Windows 8 start screen with SVG.

<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
        * {
            margin: 0;
            padding: 0;
        #svg {
            background-image: url('images/Background.png');
    <svg id="svg" width="1005" height="590">
        <rect x="95" y="145" width="95" height="95" fill="#2a82ec"></rect>
        <rect x="195" y="145" width="95" height="95" fill="#54a61d"></rect>
        <rect x="295" y="145" width="195" height="95" fill="#ab1f3c"></rect>
        <rect x="495" y="145" width="195" height="95" fill="#019317"></rect>
        <rect x="735" y="145" width="195" height="95" fill="#593e9b"></rect>
        <rect x="935" y="145" width="95" height="95" fill="#ffffff"></rect>
        <rect x="95" y="245" width="95" height="95" fill="#593e9b"></rect>
        <rect x="195" y="245" width="95" height="95" fill="#3b6eeb"></rect>
        <rect x="295" y="245" width="195" height="95" fill="#583d9a"></rect>
        <rect x="495" y="245" width="195" height="95" fill="#d04828"></rect>
        <rect x="735" y="245" width="195" height="95" fill="#018c17"></rect>
        <rect x="935" y="245" width="95" height="95" fill="#ffffff"></rect>
        <rect x="95" y="345" width="195" height="95" fill="#d44928"></rect>
        <rect x="295" y="345" width="195" height="95" fill="#008F15"></rect>
        <rect x="495" y="345" width="95" height="95" fill="#ffffff"></rect>
        <rect x="595" y="345" width="95" height="95" fill="#ffffff"></rect>
        <rect x="735" y="345" width="95" height="95" fill="#d24c27"></rect>
        <rect x="835" y="345" width="95" height="95" fill="#022a6f"></rect>
        <rect x="935" y="345" width="95" height="95" fill="#2776ed"></rect>
        <rect x="95" y="445" width="195" height="95" fill="#ffffff"></rect>
        <rect x="95" y="445" width="195" height="95" fill="#ffffff"></rect>
        <rect x="295" y="445" width="195" height="95" fill="#2c87f0"></rect>
        <rect x="495" y="445" width="95" height="95" fill="#ab1f3a"></rect>
        <rect x="595" y="445" width="95" height="95" fill="#54a61d"></rect>
        <rect x="735" y="445" width="195" height="95" fill="#ffffff"></rect>

        <image x="935" y="50" width="30" height="30" xlink:href="images/User.jpg"></image>
        <image x="120" y="165" width="50" height="50" xlink:href="images/Store.jpg"></image>
        <image x="220" y="165" width="50" height="50" xlink:href="images/Xbox Live Games.jpg"></image>
        <image x="370" y="165" width="50" height="50" xlink:href="images/Photos.jpg"></image>
        <image x="800" y="165" width="50" height="50" xlink:href="images/Music.jpg"></image>
        <image x="922" y="145" width="95" height="95" xlink:href="images/Some-pic-2.jpg"></image>
        <image x="120" y="265" width="50" height="50" xlink:href="images/Maps.jpg"></image>
        <image x="220" y="265" width="50" height="50" xlink:href="images/Internet Explorer.jpg"></image>
        <image x="370" y="265" width="50" height="50" xlink:href="images/Messaging.jpg"></image>
        <image x="510" y="255" width="50" height="50" xlink:href="images/Mike Gibbs.jpg"></image>
        <image x="510" y="315" width="25" height="25" xlink:href="images/Some-pic-3.jpg"></image>
        <image x="800" y="255" width="50" height="50" xlink:href="images/Finance.jpg"></image>
        <image x="922" y="245" width="95" height="95" xlink:href="images/Some-pic-1.jpg"></image>
        <image x="160" y="365" width="50" height="50" xlink:href="images/Video.jpg"></image>
        <image x="305" y="410" width="25" height="25" xlink:href="images/Mail.jpg"></image>
        <image x="495.17" y="345" width="95" height="95" xlink:href="images/Pinball.jpg"></image>
        <image x="595.17" y="345" width="95" height="95" xlink:href="images/Solitaire.jpg"></image>
        <image x="760" y="365" width="50" height="50" xlink:href="images/Reader.jpg"></image>
        <image x="845" y="410" width="25" height="25" xlink:href="images/Windows Explorer.jpg"></image>
        <image x="950" y="365" width="50" height="50" xlink:href="images/SkyDrive.jpg"></image>
        <image x="95" y="445" width="195" height="95" xlink:href="images/Desktop.jpg"></image>
        <image x="360" y="465" width="50" height="50" xlink:href="images/Weather.jpg"></image>
        <image x="520" y="465" width="50" height="50" xlink:href="images/Camera.jpg"></image>
        <image x="620" y="465" width="50" height="50" xlink:href="images/Xbox Companion.jpg"></image>
        <image x="735" y="445" width="195" height="95" xlink:href="images/Wordpress.jpg"></image>

        <text x="95" y="70" fill="#ffffff" font-size="40" font-family="Segoe UI">Start</text>
        <text x="860" y="65" fill="#ffffff" font-size="20" font-family="Segoe UI">Richard</text>
        <text x="900" y="80" fill="#ffffff" font-size="10" font-family="Segoe UI">Perry</text>
        <text x="105" y="235" fill="#ffffff" font-size="10" font-family="Segoe UI">Store</text>
        <text x="205" y="235" fill="#ffffff" font-size="10" font-family="Segoe UI">Xbox LIVE Games</text>
        <text x="305" y="235" fill="#ffffff" font-size="10" font-family="Segoe UI">Photos</text>
        <text x="630" y="190" fill="#ffffff" font-size="40" font-family="Segoe UI">12</text>
        <text x="630" y="205" fill="#ffffff" font-size="10" font-family="Segoe UI">Monday</text>
        <text x="505" y="235" fill="#ffffff" font-size="10" font-family="Segoe UI">Calendar</text>
        <text x="745" y="235" fill="#ffffff" font-size="10" font-family="Segoe UI">Music</text>
        <text x="105" y="335" fill="#ffffff" font-size="10" font-family="Segoe UI">Maps</text>
        <text x="205" y="335" fill="#ffffff" font-size="10" font-family="Segoe UI">Internet Explorer</text>
        <text x="305" y="335" fill="#ffffff" font-size="10" font-family="Segoe UI">Messaging</text>
        <text x="565" y="270" fill="#ffffff" font-size="10" font-family="Segoe UI">Mike Gibbs, Troll Sccut</text>
        <text x="565" y="285" fill="#ffffff" font-size="10" font-family="Segoe UI">and 5 others commented</text>
        <text x="565" y="300" fill="#ffffff" font-size="10" font-family="Segoe UI">on your photo</text>
        <text x="745" y="335" fill="#ffffff" font-size="10" font-family="Segoe UI">Finance</text>
        <text x="105" y="435" fill="#ffffff" font-size="10" font-family="Segoe UI">Video</text>
        <text x="305" y="370" fill="#ffffff" font-size="17" font-family="Segoe UI">Devon Hypnotyze</text>
        <text x="305" y="385" fill="#ffffff" font-size="10" font-family="Segoe UI">something they can do about him</text>
        <text x="305" y="400" fill="#ffffff" font-size="10" font-family="Segoe UI">pile of books and scroll next to</text>
        <text x="470" y="435" fill="#ffffff" font-size="10" font-family="Segoe UI">3</text>
        <text x="745" y="435" fill="#ffffff" font-size="10" font-family="Segoe UI">Reader</text>
        <text x="845" y="370" fill="#6188cb" font-size="15" font-family="Segoe UI">Windows</text>
        <text x="845" y="385" fill="#6188cb" font-size="15" font-family="Segoe UI">Explorer</text>
        <text x="945" y="435" fill="#ffffff" font-size="10" font-family="Segoe UI">SkyDrive</text>
        <text x="105" y="535" fill="#ffffff" font-size="10" font-family="Segoe UI">Desctop</text>
        <text x="305" y="535" fill="#ffffff" font-size="10" font-family="Segoe UI">Weather</text>
        <text x="505" y="535" fill="#ffffff" font-size="10" font-family="Segoe UI">Camera</text>
        <text x="605" y="535" fill="#ffffff" font-size="10" font-family="Segoe UI">Xbox Companion</text>

Windows 8 start screen - Result


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s