First stab at triangular SVG gradients.

10 years ago · fa2bc67bce
commit fa2bc67bce
1 changed files with 210 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,210 @@
+<!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;*/
+            margin:100px;
+        }
+    </style>
+</head>
+<body>
+
+<!-- <ul>
+    <li>&#10003; Render any map</li>
+    <li>&#10003; Finish Bostock tutorial</li>
+    <li>&#9744; Render the ocean map</li>
+    <li>&#9744; Extract only CA coastline from ocean map</li>
+    <li>&#9744; Find how to render something at a point</li>
+    <li>&#9744; Find how to draw a flat line</li>
+    <li>&#9744; Get feed of ocean temperatures</li>
+        http://www.ndbc.noaa.gov/data/realtime2/46237.txt (last 26? days)
+        http://www.ndbc.noaa.gov/station_history.php?station=46237 (historical)
+        http://cdip.ucsd.edu/?nav=historic&sub=data&stn=142&stream=p1
+        http://cdip.ucsd.edu/?nav=documents&sub=index&units=metric&tz=UTC&pub=public&map_stati=1,2,3&xitem=arch
+    <li>&#9744; Get locations of CA buoys</li>
+</ul> -->
+
+<svg width='500px' height='500px' id='svg'>
+    <defs>
+        <linearGradient id="fillR" gradientUnits="userSpaceOnUse" x1="200" y1="200" x2="0" y2="0">
+            <stop offset="0%" stop-color="#f00" />
+            <stop offset="100%" stop-color="#fff" stop-opacity="0" />
+        </linearGradient>
+
+        <linearGradient id="fillG" gradientUnits="userSpaceOnUse" x1="100" y1="0" x2="100" y2="200">
+            <stop offset="0%" stop-color="#0f0" />
+            <stop offset="100%" stop-color="#fff" stop-opacity="0" />
+        </linearGradient>
+
+        <linearGradient id="fillB" gradientUnits="userSpaceOnUse" x1="0" y1="200" x2="150" y2="100">
+            <stop offset="0%" stop-color="#00f" />
+            <stop offset="100%" stop-color="#fff" stop-opacity="0" />
+        </linearGradient>
+
+        <filter id="triblend">
+            <feImage xlink:href="#pathA" result="layerA" x="0" y="0" />
+            <feComposite in="layerA" 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='M100,0 L200,200 L0,200 Z' fill='url(#fillR)' id='pathA'></path>
+        <path d='M100,0 L200,200 L0,200 Z' fill='url(#fillG)' id='pathB'></path>
+        <path d='M100,0 L200,200 L0,200 Z' fill='url(#fillB)'></path>
+    </g>
+
+    <!--
+    <path d='M100,0 L300,0 L200,200 Z' fill='#f438ff' id='triangle2'></path>
+    <path d='M0,200 L200,200 L100,400 Z' fill='#897457' id='triangle3'></path>
+    <path d='M200,200 L300,400 L100,400 Z' fill='#88aaef' id='triangle4'></path>
+    <path d='M300,0 L400,200 L200,200 Z' fill='#99ea21' id='triangle5'></path>
+    <path d='M200,200 L400,200 L300,400 Z' fill='#845879' id='triangle6'></path>
+    -->
+</svg>
+
+<script>
+    var svg = document.getElementById('svg');
+</script>
+
+
+
+<!-- <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
+<script src="//d3js.org/topojson.v1.min.js"></script> -->
+
+
+<!--
+DISCUSS:
+gourad / phong?
+feImage
+-->
+
+<script>
+    // var file = 'uk-topo.json';
+    // var file = 'ocean-geo.json';
+
+    // d3.json(file, function(error, mapJson) {
+    //     // if (error) return console.error(error);
+
+    //     var projection =
+    //         //d3.geo.albers()
+    //         d3.geo.mercator()
+    //         // .center([0, 55.4])
+    //         // .rotate([4.4, 0])
+    //         // .parallels([50, 60])
+    //         .scale(200)
+    //         .translate([w / 2, h / 2]);
+
+    //     var path = d3.geo.path().projection(projection);
+
+    //     svg.selectAll('.subunit')
+    //         .data(mapJson.features)
+    //         .enter().append('path')
+    //             .attr('class', function(d) {
+    //                 console.log(d);
+    //                 return 'subunit ' + d.id;
+    //             })
+    //             .attr('d', path);
+
+    //     // svg.selectAll('.subunit')
+    //     //     .data(topojson.feature(uk, uk.objects.subunits).features)
+    //     //     .enter().append('path')
+    //     //         .attr('class', function(d) {
+    //     //             return 'subunit ' + d.id;
+    //     //         })
+    //     //         .attr('d', path);
+
+    //     // svg.append("path")
+    //     //     .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a !== b && a.id !== "IRL"; }))
+    //     //     .attr("d", path)
+    //     //     .attr("class", "subunit-boundary");
+
+    //     // svg.append("path")
+    //     //     .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a === b && a.id === "IRL"; }))
+    //     //     .attr("d", path)
+    //     //     .attr("class", "subunit-boundary IRL");
+
+    //     // svg.append("path")
+    //     //     .datum(topojson.feature(uk, uk.objects.places))
+    //     //     .attr("d", path)
+    //     //     .attr("class", "place");
+
+    //     // svg.selectAll(".place-label")
+    //     //     .data(topojson.feature(uk, uk.objects.places).features)
+    //     //     .enter().append("text")
+    //     //         .attr("class", "place-label")
+    //     //         .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
+    //     //         .attr("dy", ".35em")
+    //     //         .text(function(d) { return d.properties.name; });
+
+    //     // svg.selectAll(".subunit-label")
+    //     //     .data(topojson.feature(uk, uk.objects.subunits).features)
+    //     //     .enter().append("text")
+    //     //         .attr("class", function(d) { return "subunit-label " + d.id; })
+    //     //         .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
+    //     //         .attr("dy", ".35em")
+    //     //         .text(function(d) { return d.properties.name; });
+    // });
+
+    // var h = 800;
+    // var w = 800;
+
+    // var svg = d3.select("body").append("svg")
+    //     .attr('x', 500)
+    //     .attr("width", w)
+    //     .attr("height", h);
+</script>
+
+</body>
+</html>