Skip to content

Instantly share code, notes, and snippets.

@chrisdickinson
Created January 17, 2014 03:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chrisdickinson/8467945 to your computer and use it in GitHub Desktop.
Save chrisdickinson/8467945 to your computer and use it in GitHub Desktop.
Display the source blob
Display the rendered blob
Raw
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
width="220" height="220">
<defs>
<linearGradient id="background-one" x1="0%" x2="0%" y1="0%" y2="100%">
<stop style="stop-color: #aa1b11;" offset="0"/>
<stop style="stop-color: #82130C;" offset="1"/>
</linearGradient>
<pattern
id="background-two"
x="0" y="0" width="16" height="20"
patternUnits="userSpaceOnUse"
viewBox="0 0 16 20">
<path
stroke="#cc3d33"
stroke-width="0.75"
fill="none"
d="
M0,0
L8,4
L16,0
"
/>
<path
stroke="#cc3d33"
stroke-width="0.75"
fill="none"
d="
M8,4
L8,10
"
/>
<path
stroke="#cc3d33"
stroke-width="0.75"
fill="none"
d="
M0,20
L0,14
L8,10
L16,14
L16,20
"
/>
</pattern>
<clipPath id="hexagon">
<path transform="translate(14,14)scale(1.5)" d="
M0,64
L0,94
Q0 96,4 98
L60,126
Q64 128,68 126
L124,98
Q128 96,128 94
L128,34
Q128 32,124 30
L68,2
Q64 0,60 2
L4,30
Q0 32,0 34
L0,32
Z
" />
</clipPath>
<clipPath id="pages">
<path d="
M18,40
L18,70
c4 28, 42 2, 46 26
L64,66
c-4 -30, -40 -4, -46 -26
" />
<path transform="translate(128,0)scale(-1,1)" d="
M18,40
L18,70
c4 28, 42 2, 46 26
L64,66
c-4 -30, -40 -4, -46 -26
" />
</clipPath>
<mask id="grid-mask" maskUnits="userSpaceOnUse"
x="0" y="0" width="100%" height="100%">
<rect id="grid" fill="url(#background-two)" width="120%" height="120%" x="-10%" y="-10%" />
</mask>
</defs>
<rect clip-path="url(#hexagon)" fill="url(#background-one)" width="100%" height="100%" />
<rect clip-path="url(#hexagon)" id="grid-materialized" fill="url(#background-two)" width="100%" height="100%" x="0%" y="0%" />
<g transform="translate(14,14)scale(1.5)">
<path stroke="#303030" stroke-width="16" fill="none" d="
M0,64
L0,96
L64,128
L124,98
L128,96
L128,32
L64,0
L0,32
Z
" />
<path fill="black" fill-opacity="0.333" stroke="none" d="
M0,64
L0,94
Q0 96,4 98
L60,126
Q64 128,68 126
L124,98
Q128 96,128 94
L128,34
Q128 32,124 30
L68,2
Q64 0,60 2
L4,30
Q0 32,0 34
L0,32
Z
">
</path>
<path fill="#202020" stroke-width="0" stroke="#f4f4f2" d="
M16,42
L16,84
L64,110
L112,84
L112,42
L64,68
" />
<path stroke-width="0" fill="#9e9a9b" d="
M18,66
L18,82
L64,108
L64,66
" />
<path transform="translate(128,0)scale(-1,1)" stroke-width="0" fill="#7e7a7b" d="
M18,66
L18,82
L64,108
L64,66
" />
<path stroke-width="0" fill="#f4f4f2" d="
M18,40
L18,70
c4 28, 42 2, 46 26
L64,66
c-4 -30, -40 -4, -46 -26
" />
<path transform="translate(128,0)scale(-1,1)" stroke-width="0" fill="#bebabb" d="
M18,40
L18,70
c4 28, 42 2, 46 26
L64,66
c-4 -30, -40 -4, -46 -26
" />
<path stroke-width="0" fill="#4e4a4b" d="
M 30,86
c38 0, 30 12, 32 18
c0 2, 0 -6, -32 -18
" />
<path transform="translate(128,0)scale(-1,1)" stroke-width="0" fill="#4e4a4b" d="
M 30,86
c38 0, 30 12, 32 18
c0 2, 0 -6, -32 -18
" />
<rect width="28" height="128" x="72" y="0" clip-path="url(#pages)" fill="#f4f4f2" />
<rect width="8" height="128" x="48" y="0" clip-path="url(#pages)" fill="#fff" />
<rect width="8" height="128" x="80" y="0" clip-path="url(#pages)" fill="#fff" />
<rect width="2" height="128" x="62" y="0" clip-path="url(#pages)" fill="#bebabb" />
<rect width="1" height="128" x="64" y="0" clip-path="url(#pages)" fill="#4e4a4b" />
<g transform="translate(44,24)">
<path d="M9.016,0.824 L4.048,8.24 L9.016,17 L8.152,17 L3.592,8.96 L1.96,11.384 L1.96,17 L1.192,17 L1.192,0.824 L1.96,0.824 L1.96,10.016 L8.104,0.824 L9.016,0.824 Z M10.999,3.152 L10.999,17 L10.231,17 L10.231,0.824 L10.879,0.824 L16.447,14.672 L16.447,0.824 L17.215,0.824 L17.215,17 L16.591,17 L10.999,3.152 Z M22.702,17 C22.3179981,17 21.922002,16.9440006 21.514,16.832 C21.105998,16.7199994 20.7340017,16.5040016 20.398,16.184 C20.0619983,15.8639984 19.790001,15.4280028 19.582,14.876 C19.373999,14.3239972 19.27,13.6000045 19.27,12.704 L19.27,5.096 C19.27,3.71999312 19.5499972,2.66400368 20.11,1.928 C20.702003,1.19199632 21.5659943,0.824 22.702,0.824 C23.8540058,0.824 24.7179971,1.19199632 25.294,1.928 C25.8700029,2.6480036 26.158,3.70399304 26.158,5.096 L26.158,12.704 C26.158,13.6000045 26.054001,14.3239972 25.846,14.876 C25.637999,15.4280028 25.3660017,15.8639984 25.03,16.184 C24.6939983,16.5040016 24.322002,16.7199994 23.914,16.832 C23.505998,16.9440006 23.102002,17 22.702,17 Z M22.702,1.568 C21.7899954,1.568 21.1260021,1.8479972 20.71,2.408 C20.2459977,3.00000296 20.014,3.895994 20.014,5.096 L20.014,12.704 C20.014,13.9200061 20.2459977,14.823997 20.71,15.416 C21.1420022,15.9760028 21.8059955,16.256 22.702,16.256 C23.5820044,16.256 24.2539977,15.9760028 24.718,15.416 C25.1660022,14.8559972 25.39,13.9520062 25.39,12.704 L25.39,5.096 C25.39,3.86399384 25.1660022,2.9680028 24.718,2.408 C24.2699978,1.8479972 23.5980045,1.568 22.702,1.568 Z M30.997,17 L28.237,17 L28.237,0.824 L30.997,0.824 C32.2770064,0.824 33.2289969,1.20799616 33.853,1.976 C34.445003,2.68000352 34.741,3.7519928 34.741,5.192 L34.741,12.632 C34.741,14.0720072 34.445003,15.1439965 33.853,15.848 C33.2289969,16.6160038 32.2770064,17 30.997,17 Z M28.981,16.256 L30.997,16.256 C32.0370052,16.256 32.7929976,15.9640029 33.265,15.38 C33.7370024,14.7959971 33.973,13.8800062 33.973,12.632 L33.973,5.192 C33.973,3.94399376 33.7370024,3.02800292 33.265,2.444 C32.7929976,1.85999708 32.0370052,1.568 30.997,1.568 L28.981,1.568 L28.981,16.256 Z M37.66,1.568 L37.66,8.528 L42.724,8.528 L42.724,9.272 L37.66,9.272 L37.66,16.256 L42.724,16.256 L42.724,17 L36.916,17 L36.916,0.824 L42.724,0.824 L42.724,1.568 L37.66,1.568 Z" id="knode" fill="white"></path>
</g>
<g>
<path stroke="#5E5647" strokeOpacity="0.8" stroke-width="0.5" fill="none" class="book-text" stroke-dasharray="0,12,17,1,6,1,7,1,5,20" d="
M18,40
c4 28, 42 2, 46 26
" />
<path stroke="#5E5647" strokeOpacity="0.8" stroke-width="0.5" fill="none" class="book-text" stroke-dasharray="0,12,6,1,3,1,4,1,8,1,7,13" d="
M18,43
c4 28, 42 2, 46 26
" />
<path stroke="#5E5647" strokeOpacity="0.8" stroke-width="0.5" fill="none" class="book-text" stroke-dasharray="0,12,11,1,10,2,12,20" d="
M18,49
c4 28, 42 2, 46 26
" />
<path stroke="#5E5647" strokeOpacity="0.8" stroke-width="0.5" fill="none" class="book-text" stroke-dasharray="0,12,12,1,4,1,5,1,7,1,3,20" d="
M18,52
c4 28, 42 2, 46 26
" />
<path stroke="#5E5647" strokeOpacity="0.8" stroke-width="0.5" fill="none" class="book-text" stroke-dasharray="0,12,6,1,3,1,4,1,8,1,7,13" d="
M18,55
c4 28, 42 2, 46 26
" />
<path stroke="#5E5647" strokeOpacity="0.8" stroke-width="0.5" fill="none" class="book-text" stroke-dasharray="0,12,8,20,0,42" d="
M18,58
c4 28, 42 2, 46 26
" />
<path stroke="#5E5647" strokeOpacity="0.8" stroke-width="0.5" fill="none" class="book-text" stroke-dasharray="0,12,24,2,12,20" d="
M18,64
c4 28, 42 2, 46 26
" />
<path stroke="#5E5647" strokeOpacity="0.8" stroke-width="0.5" fill="none" class="book-text" stroke-dasharray="0,12,8,1,6,1,7,1,6,1,3,20" d="
M18,67
c4 28, 42 2, 46 26
" />
</g>
<g transform="translate(128,0)scale(-1,1)">
<path stroke="#5E5647" strokeOpacity="0.8" stroke-width="0.5" fill="none" class="book-text" stroke-dasharray="0,12,17,1,6,1,7,1,5,20" d="
M18,40
c4 28, 42 2, 46 26
" />
<path stroke="#5E5647" strokeOpacity="0.8" stroke-width="0.5" fill="none" class="book-text" stroke-dasharray="0,18,6,1,3,1,4,1,8,1,7,13" d="
M18,43
c4 28, 42 2, 46 26
" />
<path stroke="#5E5647" strokeOpacity="0.8" stroke-width="0.5" fill="none" class="book-text" stroke-dasharray="0,14,11,1,10,2,12,20" d="
M18,49
c4 28, 42 2, 46 26
" />
<path stroke="#5E5647" strokeOpacity="0.8" stroke-width="0.5" fill="none" class="book-text" stroke-dasharray="0,15,12,1,4,1,5,1,7,1,3,20" d="
M18,52
c4 28, 42 2, 46 26
" />
<path stroke="#5E5647" strokeOpacity="0.8" stroke-width="0.5" fill="none" class="book-text" stroke-dasharray="0,18,6,1,3,1,4,1,8,1,7,13" d="
M18,55
c4 28, 42 2, 46 26
" />
<path stroke="#5E5647" strokeOpacity="0.8" stroke-width="0.5" fill="none" class="book-text" stroke-dasharray="0,42,8,20" d="
M18,58
c4 28, 42 2, 46 26
" />
<path stroke="#5E5647" strokeOpacity="0.8" stroke-width="0.5" fill="none" class="book-text" stroke-dasharray="0,12,24,2,12,20" d="
M18,64
c4 28, 42 2, 46 26
" />
<path stroke="#5E5647" strokeOpacity="0.8" stroke-width="0.5" fill="none" class="book-text" stroke-dasharray="0,16,8,1,6,1,7,1,6,1,3,20" d="
M18,67
c4 28, 42 2, 46 26
" />
</g>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment