codevember2017/day-2/index.html at fe17938849c791720c982dde136d09fdfdf3898f · ManzDev/codevember2017 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>#codevember - Day 2: Cake</title>


      <link rel="stylesheet" href="css/style.css">


</head>

<body>
  <div class="page">
  <div class="data">
    <h1>Cake</h1>
    <h2>#Codevember</h2>
    <a class="ghost" href="https://twitter.com/Manz">Code by Manz</a>
    <a class="ghost" href="https://soundcloud.com/michael-manotas/still-alive-8bits">Music by Michael Aker</a>
  </div>

  <div id="cake">

    <div class="portal blue"></div>

    <div class="cake move">
      <svg viewBox="0 0 130 107" width="535" height="406">
        <defs>
            <linearGradient id="b"> <!-- nata -->
                <stop offset="0" stop-color="#e3e4e7"/>
                <stop offset="1" stop-color="#babdc1"/>
            </linearGradient>
            <linearGradient id="c"> <!-- guinda -->
                <stop offset="0" stop-color="#d00"/>
                <stop offset="1" stop-color="#6a0000"/>
            </linearGradient>
            <linearGradient id="a"> <!-- brillo -->
                <stop offset="0" stop-color="#fff"/>
                <stop offset="1" stop-color="#fff" stop-opacity="0"/>
            </linearGradient>
            <radialGradient xlink:href="#b" id="natashadow"
                            cx="83.841" cy="134.169" fx="83.841" fy="134.169" r="5.384"
                            gradientTransform="matrix(.91313 0 0 .36686 7.19 84.9)" gradientUnits="userSpaceOnUse"/>
            <radialGradient xlink:href="#b" id="nata"
                            cx="83.841" cy="134.169" fx="83.841" fy="134.169" r="5.384"
                            gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.02124 0 0 .4103 -1.821 79.836)"/>
            <radialGradient xlink:href="#c" id="guindaroja"
                            cx="-15.815" cy="-152.885" fx="-15.815" fy="-152.885" r="3.638"
                            gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 .91442 1.137 -15.306)"/>
            <radialGradient xlink:href="#a" id="brillo"
                            cx="-17.062" cy="-152.369" fx="-17.062" fy="-152.369" r=".86"
                            gradientUnits="userSpaceOnUse" gradientTransform="translate(3.676 60.143) scale(1.43514)"/>
        </defs>

        <g transform="translate(-38 -86)">
            <g fill="#310d00">
                <!-- Cake bottom -->
                <ellipse cx="103.32" cy="163.134" rx="40.084" ry="11.92"/>
                <path d="M63.235 130.445h80.169v32.544H63.235z"/>
                <!-- Cake top -->
                <ellipse cx="103.32" cy="130.326" rx="40.084" ry="11.92" fill="#461200"/>
            </g>

            <!-- Cherry -->
            <g id="guinda" transform="translate(5 1)">
              <ellipse ry="2.1" rx="5.5" cy="135" cx="83.8" fill="url(#nata)"/>
              <ellipse cx="83.748" cy="134.123" rx="4.916" ry="1.975" fill="url(#natashadow)"/>
              <circle r="3.638" cy="-155.419" cx="-14.679" transform="rotate(152.913)" fill="url(#guindaroja)"/>
              <path d="M86.937 134.23a3.274 1.277 0 0 1-1.2 1.46 3.274 1.277 0 0 1-3.927-.041 3.274 1.277 0 0 1-1-1.483l3.033.482z" fill="#c4c7cb"/>
              <circle transform="translate(-6 -1) rotate(152.913)" cx="-20.81" cy="-158.528" r="1.234" fill="url(#brillo)"/>
            </g>

            <use xlink:href="#guinda" transform="translate(12 23) scale(.753)" />
            <use xlink:href="#guinda" transform="translate(-3 14) scale(.880)" />
            <use xlink:href="#guinda" transform="translate(35 34) scale(.643)" />

            <use xlink:href="#guinda" transform="scale(-1 1) translate(-205 0)" />
            <use xlink:href="#guinda" transform="scale(-.767 .767) translate(-251 28)" />
            <use xlink:href="#guinda" transform="scale(-.885 .885) translate(-238 14)" />
            <use xlink:href="#guinda" transform="scale(-.614 .614) translate(-273 62)" />

            <g id="vela">
              <ellipse ry="1.317" rx="3.277" cy="127.448" cx="102.261" fill="url(#natashadow)"/>
              <ellipse cx="102.229" cy="126.993" rx="2.93" ry="1.177" fill="url(#nata)"/>
              <path fill="#e7e7e7" d="M101.239 105.72h1.949v21.796h-1.949z"/>
              <path d="M104.13 127.057a1.951.761 0 0 1-.715.87 1.951.761 0 0 1-2.34-.024 1.951.761 0 0 1-.596-.884l1.807.287z" fill="#c4c7cb"/>
              <ellipse cx="102.213" cy="105.746" rx=".974" ry=".371" fill="#f0eff3"/>
              <!-- Mecha -->
              <g transform="matrix(1.20178 0 0 1.01149 -19.914 -2.29)" stroke-width=".907">
                  <path fill="#1e1f1f" d="M101.52 106.152h.163v.66h-.163z"/>
                  <ellipse cx="101.602" cy="106.155" rx=".082" ry=".031" fill="#373d38"/>
                  <ellipse ry=".031" rx=".082" cy="106.813" cx="101.602" fill="#1e1f1f"/>
              </g>
            </g>
        </g>
      </svg>
    </div>

    <div class="portal orange"></div>

  </div>
</div>

<audio src="https://cdn.jsdelivr.net/gh/ManzDev/codevember2017@04e3bd18/assets/still-alive-8-bits-by-michaelaker.mp3?raw=true" autoplay></audio>


</body>
</html>