Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: mattjeffery/highflyers-svg
base: 4108e118e0
...
head fork: mattjeffery/highflyers-svg
compare: 39380f6ece
  • 5 commits
  • 3 files changed
  • 0 commit comments
  • 1 contributor
Showing with 64 additions and 21 deletions.
  1. BIN  fonts/Collegiate.ttf
  2. +1 −2  index.html
  3. +63 −19 svg/scene.svg
View
BIN  fonts/Collegiate.ttf
Binary file not shown
View
3  index.html
@@ -11,11 +11,10 @@
</head>
<body style="padding: 0; margin: 0; background-color: #002144">
- <object type="image/svg+xml" data="svg/scene.svg" style="position: absolute; top: 0; left: 0; width: 100%;">
+ <object type="image/svg+xml" data="svg/scene.svg" style="position: absolute; top: 0; left: 0;">
<param name="src" value="svg/scene.svg" />
<param name="wmode" value="transparent" />
</object>
- <a href="http://github.com/mattjeffery/highflyers-svg"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/71eeaab9d563c2b3c590319b398dd35683265e85/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub"></a>
</body>
</html>
View
82 svg/scene.svg
@@ -7,11 +7,19 @@
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="420mm"
- height="594mm">
+ height="595mm"
+ viewBox="0 0 420 595">
+ <style type="text/css" ><![CDATA[
+ @font-face {
+ font-family: Collegiate;
+ src: url("../fonts/Collegiate.ttf");
+ }
+ ]]></style>
+
<defs>
<!-- Background Gradient -->
- <linearGradient id="bg-grad" x1="0%" y1="0%" x2="0%" y2="100%">
- <stop offset="0%" style="stop-color: #001C1E; stop-opacity: 1" />
+ <linearGradient id="bg-grad" x1="0" y1="0" x2="0" y2="100%">
+ <stop offset="0" style="stop-color: #001C1E; stop-opacity: 1" />
<stop offset="100%" style="stop-color: #002144; stop-opacity: 1" />
</linearGradient>
@@ -33,23 +41,39 @@
<!-- Musicmetric logo -->
<symbol id="mmlogo">
<path id="mmlogo_path"
- transform="scale(1.3)"
+ transform="scale(0.4)"
d="m 170.7859,16.359845 c -0.034,-1.434 -1.302,-2.443 -2.704,-2.443 -3.092,0 -3.58,2.637 -3.58,4.982 0,2.181 0.943,4.427 3.288,4.427 1.921,0 2.897,-1.107 3.159,-2.898 l 5.371,0 c -0.489,4.526 -4.006,7.132 -8.499,7.132 -5.076,0 -8.856,-3.483 -8.856,-8.661 0,-5.373 3.418,-9.216 8.856,-9.216 4.202,0 7.948,2.216 8.335,6.677 l -5.37,0 z m -16.8362,-6.919192 -4.927,0.664 4.014,2.087 -0.006,15.522 4.932,-0.662 0.002,-15.524 -4.015,-2.087 z m -0.0117,-8.3678 -4.927,0.661 4.015,2.088 -0.01,3.891 4.929,-0.662 0.008,-3.891 -4.015,-2.087 z m -17.8163,9.097992 5.376,0 0,2.964 0.061,0 c 0.813,-2.15 2.705,-3.289 5.08,-3.289 0.424,0 0.881,0.032 1.302,0.133 l 0,5.046 c -0.715,-0.196 -1.365,-0.326 -2.113,-0.326 -2.738,0 -4.169,1.886 -4.169,4.004 l 0,8.368 -5.537,0 0,-16.9 z m -1.3347,3.583 -3.42,0 0,7.683 c 0,1.335 0.785,1.628 1.985,1.628 0.459,0 0.946,-0.064 1.435,-0.064 l 0,4.07 c -1.01,0.032 -2.019,0.161 -3.029,0.161 -4.722,0 -5.924,-1.365 -5.924,-5.957 l 0,-7.521 -2.804,0 0,-3.583 2.804,0 0,-5.113 5.533,0 0,5.113 3.42,0 0,3.583 z m -23.7377,6.2201 c 0.098,2.312 1.431,3.842 3.777,3.842 1.336,0 2.638,-0.618 3.159,-1.855 l 5.175,-0.003 c -1.009,3.909 -4.623,5.602 -8.398,5.602 -5.503,0 -9.249,-3.32 -9.249,-8.989 0,-5.175 4.138,-8.886 9.118,-8.888 6.057,0.002 9.084,4.557 8.823,10.291 l -12.405,0 z m 6.871,-3.095 c -0.098,-1.888 -1.431,-3.45 -3.289,-3.45 -1.955,0 -3.257,1.398 -3.582,3.45 l 6.871,0 z m -40.116003,-6.7081 5.372,0 0,2.313 0.066,0 c 1.008,-1.692 2.801,-2.801 4.85,-2.801 2.118,0 4.006,0.683 4.919,2.738 1.332,-1.793 2.993,-2.738 5.274,-2.738 5.370003,0 5.957003,4.071 5.957003,7.295 l 0,10.093 -5.534003,0 0,-9.932 c 0,-1.823 -0.881,-2.899 -2.312,-2.899 -2.375,0 -2.607,1.827 -2.607,4.559 l 0,8.272 -5.533,0 0,-9.604 c 0,-1.988 -0.587,-3.227 -2.083,-3.227 -1.986,0 -2.833,1.142 -2.833,4.593 l 0,8.238 -5.536,0 0,-16.9 z m -44.8871,0.3488 0,9.747 c 0,2.602 -1.041,4.582 -4.124,4.582 -1.693,0 -2.809,-0.76 -3.125,-2.752 l 0,-6.38 c 0,-4.093 -2.078,-5.652 -5.62,-5.652 -2.437,0 -4.031,1.073 -5.265,2.795 -0.746,-1.919 -2.665,-2.795 -4.712,-2.795 -2.6620001,0 -4.0610001,1.138 -5.1680001,2.795 l -0.096,0 0,-2.34 -3.509,0 0,16.799 3.706,0 0,-9.977 c 0,-2.793 1.753,-4.352 3.671,-4.352 2.2410001,0 2.9570001,1.236 2.9570001,3.542 l 0,10.787 3.705,0 0,-9.846 c 0,-2.827 1.071,-4.483 3.573,-4.483 2.09,0 2.752,0.968 2.959,2.513 l 0,5.674 c 0,4.389 1.886,6.596 6.274,6.596 1.849,0 3.865,-1.101 4.774,-2.794 l 0.068,0 0,2.34 3.639,0 0,-16.799 -3.707,0 z m 38.7675,5.3347 c -0.293,-2.047 -1.786,-3.15 -3.834,-3.15 -1.916,0 -4.612,1.007 -4.612,6.106 0,2.796 1.234,5.753 4.451,5.753 2.143,0 3.639,-1.431 3.995,-3.836 l 3.704,0 c -0.683,4.354 -3.377,6.76 -7.699,6.76 -5.264,0 -8.157,-3.735 -8.157,-8.677 0,-5.068 2.761,-9.033 8.285,-9.033 3.9,0 7.215,1.952 7.571,6.077 l -3.704,0 z m -17.4476,-12.023692 3.703,0 0,3.511 -3.703,0 0,-3.511 z m 0,6.402 3.703,0 0,16.798 -3.703,0 0,-16.798 z m -12.544,11.408692 c 0.195,2.14 1.82,2.924 3.802,2.924 1.398,0 3.834,-0.294 3.734,-2.212 -0.097,-1.948 -2.793,-2.178 -5.49,-2.793 -2.729,-0.586 -5.394,-1.558 -5.394,-4.973 0,-3.673 3.964,-4.81 7.018,-4.81 3.444,0 6.565,1.43 7.02,5.168 l -3.867,0 c -0.325,-1.755 -1.787,-2.241 -3.411,-2.241 -1.075,0 -3.054,0.259 -3.054,1.721 0,1.819 2.728,2.079 5.458,2.699 2.697,0.616 5.427,1.592 5.427,4.904 0,3.997 -4.031,5.459 -7.506,5.459 -4.226,0 -7.378,-1.885 -7.443,-5.846 l 3.706,0 z" />
</symbol>
+
+ <!-- Github Ribbon -->
+ <!-- Shadow filter -->
+ <filter id="dropshadow" height="130%">
+ <feOffset dx="0" dy="5" in="SourceAlpha" result="offset"/>
+ <feGaussianBlur result="blurred" in="offset" stdDeviation="6.42 2.68" />
+ <feBlend in="SourceGraphic" in2="blurred" mode="normal" />
+ </filter>
+
+ <clipPath id="ribbonClip">
+ <rect id="ribbonClipRect"
+ x="0" y="0" width="90" height="90"
+ style="stroke: red; fill: none; stroke-width: 0.5px"/>
+ </clipPath>
+
+ <symbol id="github-ribbon">
+ <g style="clip-path: url(#ribbonClip)">
+ <g transform="translate(25, -13) rotate(45, 0, 7.5)">
+ <rect x="0" y="0" width="100" height="15" style="fill: grey;" filter="url(#dropshadow)" />
+ <line x1="0" y1="0.5" x2="100" y2="0.5" opacity="0.4" style="fill: none; stroke: white; stroke-width: 0.3; stroke-dasharray: 2, 1" />
+ <line x1="0" y1="14.5" x2="100" y2="14.5" opacity="0.4" style="fill: none; stroke: white; stroke-width: 0.3; stroke-dasharray: 2, 1" />
+ <text x="50" y="11" text-anchor="middle" opacity="0.95" style="letter-spacing: -0.1px; fill: white; font-size: 8; font-family: Collegiate, sans-serif;">Fork me on GitHub</text>
+ </g>
+ </g>
+ </symbol>
+
</defs>
<!-- Draw the background -->
- <rect id="background" x="0" y="0" width="100%" height="100%" style="fill: url(#bg-grad);"/>
- <use xlink:href="#mmlogo" x="1.5%" y="0.75%" style="fill: #b2b1b1" />
- <text x="1.5%" y="3.75%" style="fill: white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rutrum congue sem, quis rutrum diam eleifend in. Donec lacinia nisi in mauris molestie eu egestas mi molestie.</text>
-
- <!-- Licence text -->
- <text y="98%" style="fill: white">
- <tspan x="1.5%">This work is licensed under a</tspan>
- <a style="fill: white" xlink:href="http://creativecommons.org/licenses/by-sa/3.0/">
- <tspan x="1.5%" dy="1%">Creative Commons Attribution-ShareAlike 3.0 Unported License</tspan>
- </a>
- </text>
+ <rect id="background" x="0" y="0" width="420" height="595" style="fill: url(#bg-grad);"/>
<!-- JavaScript to place the balloons in the scene -->
<script type="text/javascript"><![CDATA[
@@ -71,7 +95,7 @@
if (console) { console.log(msg); }
}
- var x=200, y=150, scale=1;
+ var x=140, y=80, scale=1;
for (var i=0; i < 10; i++) {
// append a balloon to the scene
var balloon = document.createElementNS(svgns, "use");
@@ -82,9 +106,29 @@
log("Drawing balloon at: "+x+", "+y);
scene.appendChild(balloon);
- y += 50*scale;
- x += 30*scale;
- scale += 0.5;
+ y += 30*scale;
+ x += 10*scale;
+ scale += 0.1;
}
]]></script>
+
+ <!-- Draw the logo and intro -->
+ <use xlink:href="#mmlogo" x="4" y="5" style="fill: #b2b1b1" />
+ <text x="4" y="30" style="font-size: 7; fill: white; font-family: Collegiate, sans-serif; fill: lightgrey">The hotair balloons represent artists.</text>
+
+ <!-- Always on top - Fork me ribbon -->
+ <a xlink:href="http://github.com/mattjeffery/highflyers-svg" target="_blank">
+ <g transform="translate(375, 0) scale(0.5)" opacity="1.0">
+ <!-- <image width="100" height="100" xlink:href="https://a248.e.akamai.net/assets.github.com/img/71eeaab9d563c2b3c590319b398dd35683265e85/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" /> -->
+ <use xlink:href="#github-ribbon" />
+ </g>
+ </a>
+
+ <!-- Licence text -->
+ <text x="210" y="593" text-anchor="middle" opacity="0.7" style="fill: white; font-size: 4; font-family: Collegiate, sans-serif;">
+ <a style="fill: white" xlink:href="http://creativecommons.org/licenses/by-sa/3.0/" target="_blank">
+ <tspan x="210">This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License</tspan>
+ </a>
+ </text>
+
</svg>

No commit comments for this range

Something went wrong with that request. Please try again.