FloorViz/kivalogo.php at master · shred444/FloorViz · 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
<html>
	<head>
	<LINK href="styles.css" rel="stylesheet" type="text/css">
	<script src="http://d3js.org/d3.v2.js"></script>
<style>
@import url(http://fonts.googleapis.com/css?family=Bitter:700);

svg {
  width: 960px;
  height: 460px;
  margin-top: 40px;
}

.orange { fill: #f89c20 }
.orange-red { fill: #d02e27; }
.red { fill: #e54e26; }
.red-purple { fill: #7f1333; }
.purple { fill: #694d9f; }
.purple-cyan { fill: #263c81; }
.cyan { fill: #2eb3c4; }
.gray { fill: #474747; }
.lightgray { fill: #a3a3a3; }

</style>

</head>
<body>
<svg viewBox="0 0 190 172" width="190" height="172">
  <defs>
    <path id="line-long" d="m-15.5,0v85a15.5,15.5 0 0 0 31,0v-85a15.5,15.5 0 0 0 -31,0zm9,0a6.5,6.5 0 0,0 13,0a6.5,6.5 0 0,0 -13,0zm0,85a6.5,6.5 0 0,0 13,0a6.5,6.5 0 0,0 -13,0z" fill-rule="evenodd"></path>
    <path id="line-short" d="m-15.5,0v60.81118318204309a15.5,15.5 0 0 0 31,0v-60.81118318204309a15.5,15.5 0 0 0 -31,0zm9,0a6.5,6.5 0 0,0 13,0a6.5,6.5 0 0,0 -13,0zm0,60.81118318204309a6.5,6.5 0 0,0 13,0a6.5,6.5 0 0,0 -13,0z" fill-rule="evenodd"></path>
    <clipPath id="clip-orange-red"><use transform="translate(52,19)" xlink:href="#line-long"></use></clipPath>
    <clipPath id="clip-red-purple"><use transform="translate(52,104)rotate(-135)" xlink:href="#line-short"></use></clipPath>
    <clipPath id="clip-purple-cyan"><use transform="translate(138,19)" xlink:href="#line-long"></use></clipPath>
  </defs>
  <g transform="translate(-.5,-.5)">
    <use transform="translate(52,19)" xlink:href="#line-long" class="orange"></use>
    <use transform="translate(52,104)rotate(-135)" xlink:href="#line-short" class="red"></use>
    <use transform="translate(138,19)" xlink:href="#line-long" class="cyan"></use>
    <use transform="translate(138,104)rotate(135)" xlink:href="#line-short" class="purple"></use>
    <g clip-path="url(#clip-orange-red)"><use transform="translate(52,104)rotate(-135)" xlink:href="#line-short" class="orange-red"></use></g>
    <g clip-path="url(#clip-red-purple)"><use transform="translate(138,104)rotate(135)" xlink:href="#line-short" class="red-purple"></use></g>
    <g clip-path="url(#clip-purple-cyan)"><use transform="translate(138,104)rotate(135)" xlink:href="#line-short" class="purple-cyan"></use></g>
    <text x="95" y="150" text-anchor="middle" font-family="Bitter" font-size="20" font-weight="bold" class="gray">helloWorld<tspan class="lightgray">.org</tspan></text>
  </g>
</svg>

</body>
</html>