tomgp/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mix blend mode</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
    const blends = [ 'normal','multiply','screen','overlay','darken','lighten','color-dodge','color-burn','hard-light','soft-light','difference','exclusion','hue','saturation','color','luminosity'];
    const backgrounds = [
        {
            name:'None',
            url:''
        },
        {
            name:'Space',
            url:'https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA15226_hires.jpg'
        },
        {
            name:'Maps',
            url:'http://philogb.github.io/assets/france/bertin.jpg'
        },
        {
            name:'Windows-95',
            url:'https://i.imgur.com/UwuqHf6.jpg'
        }
    ];

    </script>
    <style>
        button{
            margin: 2px;
            padding: 5px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            border-radius: 0px;
            font-weight: bold;
        }
        body{
            font-family: sans-serif;
        }
        .demo-background{
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: 100vw;
        }

        .demo-overlay{
            position: absolute;
        }

        .image-links,  .image-links a{
            font-size: 10px;
            color: #aaa;
        }
        .selected-button{
            color: white;
            background-image: linear-gradient(to right, #f00 0%, #00f 50%);
        }
    </style>
</head>
<body>
<div class="ui blends">
    <pre>mix-blend-mode:</pre>
</div>
<div class="ui background">
    <pre>background-image:</pre>
</div><span class="image-links">(<a href="https://www.jpl.nasa.gov/spaceimages/details.php?id=PIA15226">Nasa</a>,
    <a href="https://visionscarto.net/la-semiologie-graphique-a-50-ans">Bertin</a>,
    <a href="https://thenextweb.com/shareables/2011/08/28/ever-wonder-where-the-windows-xp-default-wallpaper-came-from/">Microsoft</a>)</span>
<div class="demo-area">
    <div class="demo-background"></div>
    <svg class="demo-overlay" width="100%" height="100%" viewBox="0 0 375 667" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
        <g>
            <circle id="yellow" class="blendable" cx="132.779" cy="146.375" r="72.787" style="fill:yellow;"/>
            <circle id="magenta" class="blendable" cx="239.607" cy="146.375" r="72.787" style="fill:magenta;"/>
            <circle id="cyan" class="blendable" cx="186.193" cy="235.997" r="72.787" style="fill:cyan;"/>
        </g>
        <g>
            <circle id="blue" class="blendable" cx="239.607" cy="488.07" r="72.787" style="fill:blue;"/>
            <circle id="green" class="blendable" cx="132.779" cy="488.07" r="72.787" style="fill:rgb(0, 255, 0);"/>
            <circle id="red" class="blendable" cx="186.193" cy="398.448" r="72.787" style="fill:red;"/>
        </g>
    </svg>
</div>

</body>
<script>

d3.select('.ui.blends')
    .selectAll('button')
    .data(blends)
    .enter()
        .append('button')
        .attr('id',d=>d)
        .attr('class','blend-mode-button')
        .text(d=>d)
        .on('click',(d)=>{
            d3.selectAll('.blendable')
                .style('mix-blend-mode', d);

            d3.selectAll('.blend-mode-button')
                .classed('selected-button',false);

            d3.select(`.blend-mode-button#${d}`)
                .classed('selected-button',true);
        });

d3.select('.ui.background')
    .selectAll('button')
    .data(backgrounds)
    .enter()
        .append('button')
        .attr('class','background-button')
        .attr('id',d=>d.name)
        .text(d=>d.name)
        .on('click',(d)=>{
            console.log('d',d);
            d3.select('.demo-background')
                .style('background-image',`url(${d.url})`)

            d3.selectAll('.background-button')
                .classed('selected-button',false);

            d3.select(`.background-button#${d.name}`)
                .classed('selected-button',true);
        });
</script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>mix blend mode</title>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>
	const blends = [ 'normal','multiply','screen','overlay','darken','lighten','color-dodge','color-burn','hard-light','soft-light','difference','exclusion','hue','saturation','color','luminosity'];
	const backgrounds = [
	{
	name:'None',
	url:''
	},
	{
	name:'Space',
	url:'https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA15226_hires.jpg'
	},
	{
	name:'Maps',
	url:'http://philogb.github.io/assets/france/bertin.jpg'
	},
	{
	name:'Windows-95',
	url:'https://i.imgur.com/UwuqHf6.jpg'
	}
	];

	</script>
	<style>
	button{
	margin: 2px;
	padding: 5px;
	text-align: center;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	border-radius: 0px;
	font-weight: bold;
	}
	body{
	font-family: sans-serif;
	}
	.demo-background{
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: 100vw;
	}

	.demo-overlay{
	position: absolute;
	}

	.image-links, .image-links a{
	font-size: 10px;
	color: #aaa;
	}
	.selected-button{
	color: white;
	background-image: linear-gradient(to right, #f00 0%, #00f 50%);
	}
	</style>
	</head>
	<body>
	<div class="ui blends">
	<pre>mix-blend-mode:</pre>
	</div>
	<div class="ui background">
	<pre>background-image:</pre>
	</div><span class="image-links">(<a href="https://www.jpl.nasa.gov/spaceimages/details.php?id=PIA15226">Nasa</a>,
	<a href="https://visionscarto.net/la-semiologie-graphique-a-50-ans">Bertin</a>,
	<a href="https://thenextweb.com/shareables/2011/08/28/ever-wonder-where-the-windows-xp-default-wallpaper-came-from/">Microsoft</a>)</span>
	<div class="demo-area">
	<div class="demo-background"></div>
	<svg class="demo-overlay" width="100%" height="100%" viewBox="0 0 375 667" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
	<g>
	<circle id="yellow" class="blendable" cx="132.779" cy="146.375" r="72.787" style="fill:yellow;"/>
	<circle id="magenta" class="blendable" cx="239.607" cy="146.375" r="72.787" style="fill:magenta;"/>
	<circle id="cyan" class="blendable" cx="186.193" cy="235.997" r="72.787" style="fill:cyan;"/>
	</g>
	<g>
	<circle id="blue" class="blendable" cx="239.607" cy="488.07" r="72.787" style="fill:blue;"/>
	<circle id="green" class="blendable" cx="132.779" cy="488.07" r="72.787" style="fill:rgb(0, 255, 0);"/>
	<circle id="red" class="blendable" cx="186.193" cy="398.448" r="72.787" style="fill:red;"/>
	</g>
	</svg>
	</div>

	</body>
	<script>

	d3.select('.ui.blends')
	.selectAll('button')
	.data(blends)
	.enter()
	.append('button')
	.attr('id',d=>d)
	.attr('class','blend-mode-button')
	.text(d=>d)
	.on('click',(d)=>{
	d3.selectAll('.blendable')
	.style('mix-blend-mode', d);

	d3.selectAll('.blend-mode-button')
	.classed('selected-button',false);

	d3.select(`.blend-mode-button#${d}`)
	.classed('selected-button',true);
	});

	d3.select('.ui.background')
	.selectAll('button')
	.data(backgrounds)
	.enter()
	.append('button')
	.attr('class','background-button')
	.attr('id',d=>d.name)
	.text(d=>d.name)
	.on('click',(d)=>{
	console.log('d',d);
	d3.select('.demo-background')
	.style('background-image',`url(${d.url})`)

	d3.selectAll('.background-button')
	.classed('selected-button',false);

	d3.select(`.background-button#${d.name}`)
	.classed('selected-button',true);
	});
	</script>
	</html>