Boolean operations on 2D shapes

This example shows the results (orange) of performing four different boolean operations (union, difference, xor and intersection) on two 2D shapes (blue). Thanks to the powerful clipper.js library, the computation is performed in client-side Javascript.

The example is almost entirely taken from this clipper.js demo.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Boolean operations on 2D shapes</title>
        <link type="text/css" href="index.css" rel="stylesheet"/>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <script src="https://jsclipper.sourceforge.net/6.1.3.1/clipper.js"></script>
    </head>
    <body>
    </body>
    <script src="index.js"></script>
</html>
    

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://jsclipper.sourceforge.net/6.1.3.1/clipper.js to a secure url

https://d3js.org/d3.v3.min.js

https://jsclipper.sourceforge.net/6.1.3.1/clipper.js