You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
3.3 KiB
117 lines
3.3 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title></title>
|
|
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
|
|
|
|
<style>
|
|
* {
|
|
font-family:Indie Flower;
|
|
letter-spacing:0.7px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
ul {
|
|
background:#f7f7f7;
|
|
border:1px solid #e0e0e0;
|
|
left:0;
|
|
list-style-type:none;
|
|
padding:5px;
|
|
position:absolute;
|
|
top:0;
|
|
}
|
|
|
|
.subunit.SCT { fill: #ddc; }
|
|
.subunit.WLS { fill: #cdd; }
|
|
.subunit.NIR { fill: #cdc; }
|
|
.subunit.ENG { fill: #dcd; }
|
|
.subunit.IRL { display: none; }
|
|
|
|
.subunit-boundary {
|
|
fill: none;
|
|
stroke: #f00;
|
|
stroke-dasharray: 2,2;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.subunit-boundary.IRL {
|
|
stroke: #aaa;
|
|
}
|
|
|
|
.place-label {
|
|
font-size:11px;
|
|
left:20px;
|
|
}
|
|
|
|
.subunit-label {
|
|
fill: #777;
|
|
fill-opacity: .5;
|
|
font-size: 20px;
|
|
font-weight: 300;
|
|
text-anchor: middle;
|
|
}
|
|
|
|
svg {
|
|
/*background: #098347;*/
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- <script src="d3.min.js"></script> -->
|
|
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
|
|
<script src="//d3js.org/topojson.v1.min.js"></script>
|
|
|
|
<script src="gradients-v1.js"></script>
|
|
<!-- <script src="gradients-v2.js"></script> -->
|
|
<!-- UK complete but needs some minor debugging <script src="uk.js"></script> -->
|
|
<!-- <script src="ocean.js"></script> -->
|
|
|
|
<!-- ORIGINAL -->
|
|
<!-- <svg viewBox="0 0 300px 300px">
|
|
<defs>
|
|
<linearGradient id="fillR" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="86">
|
|
<stop offset="0%" stop-color="#FF0000"/>
|
|
<stop offset="100%" stop-color="" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="fillG" gradientUnits="userSpaceOnUse" x1="0" y1="86" x2="75" y2="43">
|
|
<stop offset="0%" stop-color="#00FF00"/>
|
|
<stop offset="100%" stop-color="" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="fillA" gradientUnits="userSpaceOnUse" x1="100" y1="86" x2="25" y2="43">
|
|
<stop offset="0%" stop-color="#0000FF"/>
|
|
<stop offset="100%" stop-color="" />
|
|
</linearGradient>
|
|
|
|
<path id="pathA-1" d="M 50,0 L 0,86 100,86 Z" fill="url(#fillR)"/>
|
|
<path id="pathB-1" d="M 50,0 L 0,86 100,86 Z" fill="url(#fillG)"/>
|
|
<filter id="Default">
|
|
<feImage xlink:href="#pathA-1" result="layerA" x="0" y="0" />
|
|
<feImage xlink:href="#pathB-1" result="layerB" x="0" y="0" />
|
|
<feComposite in="layerA" in2="layerB" operator="arithmetic" k1="0" k2="1.0" k3="1.0" k4="0" result="temp"/>
|
|
<feComposite in="temp" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1.0" k3="1.0" k4="0"/>
|
|
</filter>
|
|
</defs>
|
|
|
|
<g stroke="none" stroke-width="0" shape-rendering="crispEdges" >
|
|
<path d="M 50,0 L 0,86 100,86 Z" fill="url(#fillB)" filter="url(#Default)" />
|
|
</g>
|
|
</svg>
|
|
-->
|
|
|
|
|
|
<!--
|
|
DISCUSS:
|
|
Opacity solution lacks saturation and transition alignment
|
|
gourand / phong?
|
|
Delaunay / Voronoi
|
|
Mesh gradients / coon mesh
|
|
feImage
|
|
-->
|
|
|
|
</body>
|
|
</html>
|
|
|