SVGエフェクトテスト
Last active
January 28, 2019 07:14
-
-
Save shimizu/d3b493c5f390068ed4ab61c8546413a6 to your computer and use it in GitHub Desktop.
SVG filter effects
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="jp"> | |
<head> | |
<script src="//unpkg.com/d3@5.0.0/dist/d3.min.js"></script> | |
<style> | |
html,body, svg{ | |
width: 100%; | |
height: 100%; | |
background-image:url("p0129_l.jpeg") | |
} | |
</style> | |
</head> | |
<body> | |
<svg> | |
<defs> | |
<filter id="filter"> | |
<!-- COLOR --> | |
<feFlood flood-color="#000000" flood-opacity="1" result="COLOR-blue" /> | |
<!-- COLOR END --> | |
<!-- Texture --> | |
<feTurbulence baseFrequency=".025" type="fractalNoise" numOctaves="3" seed="0" result="Texture" /> | |
<!-- Texture --> | |
<!-- FILL --> | |
<feOffset dx="-3" dy="4" in="SourceAlpha" result="step1"/> | |
<feDisplacementMap scale="17" in="step1" in2="Texture" result="step2" /> | |
<feComposite operator="in" in="Texture" in2 = "step2" result="step3"/> | |
<feComposite operator="in" in="COLOR-blue" in2="step3" result="fill-filter" /> | |
<!-- FILL END--> | |
<feMerge result="merge2"> | |
<feMergeNode in="fill-filter" /> | |
</feMerge> | |
</filter> | |
</defs> | |
</svg> | |
<script> | |
let width = d3.select("svg").node().clientWidth; | |
let height = d3.select("svg").node().clientHeight; | |
width = (width < 980) ? 980 : width; | |
height = (height < 980) ? 980 : height; | |
const cityLayer = d3.select("svg").append("g").attr("class", "cityLayer"); | |
const prefLayer = d3.select("svg").append("g").attr("class", "prefLayer"); | |
const selectYear = 2016; | |
const stepYear = 5 | |
const projection = d3.geoMercator() | |
const geoPath = d3.geoPath(); | |
const p1 = d3.json("pref-s.geojson") | |
Promise.all([p1]).then(data => { | |
const prefData = data[0]; | |
projection.fitExtent([[0, 0], [980, 980]], prefData); | |
geoPath.projection(projection); | |
prefLayer.selectAll(".pref") | |
.data(prefData.features) | |
.enter() | |
.append("path") | |
.attr("class", "pref") | |
.attr("d", geoPath) | |
.attr("stroke", "red") | |
.attr("stroke-width", 1) | |
.attr("fill", "black") | |
.attr("filter", "url(#filter)") | |
.attr("opacity", 0.65) | |
}) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment