armsp/fontawesome-github.svg

## fontawesome-github.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              fontawesome-github.svg
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<head>
</head>
<style>
    * {
        border: 1px solid black;
    }
.container {
    border: 1px solid red;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 5em 5em;
    justify-content: center;
    align-content: center;
    position: relative;
    z-index:2;
}
.overlay {
    /* border: 2px dotted green; */
    position: absolute;
    height: 100%;
    width: 100%;
    z-index:1;
    grid-column: 1 / 3;
    grid-row: 1 / 4;
    /* box-sizing: content-box; */
    /* box-sizing: border-box; */
}
.item {
    border: 1px solid blue;
    justify-self: center;
    align-self: center;
    /* padding: 5%; */
    /* margin: auto; */
    /* box-sizing: content-box; */
    /* box-sizing: border-box; */
    /* display: block; */
}
</style>
<body>
    <div class="container">
        <div id="a" class="item"><img src="octicon-github.svg"></div>
        <div id="b" class="item">B</div>
        <div id="c" class="item"><img src="fontawesome-github.svg"></div>
        <div id="d" class="item">D</div>
        <div id="e" class="item"><img style="transform: rotate(180deg);" src="usb-brands.svg"></div>
        <div id="f" class="item">F</div>
        <div id="draw" class="overlay"></div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.min.js"></script>
    <script>
        var element = document.getElementById('draw');
        var params = { width: "100%", height: "100%" };
        var two = new Two(params).appendTo(element);

        function make_circle(x,y){
            var circle = two.makeCircle(x, y, 5);
            circle.fill = '#FF8000';
            circle.stroke = 'orangered';
            circle.linewidth = 5;
            two.update();
            return false;
        }

    // For octicon svg
        var elem = document.getElementById('a');
        var rects = {
            elem: elem.getBoundingClientRect(),
            two: two.renderer.domElement.getBoundingClientRect()
        };
        var left = rects.elem.left - rects.two.left;
        var topp = rects.elem.top - rects.two.top;
        var x = left + rects.elem.width;
        var y = topp + rects.elem.height / 2;
        make_circle(x, y);

    // For fontawesome svg
        var elem = document.getElementById('c');
        var rects = {
            elem: elem.getBoundingClientRect(),
            two: two.renderer.domElement.getBoundingClientRect()
        };
        var left = rects.elem.left - rects.two.left;
        var topp = rects.elem.top - rects.two.top;
        var x = left + rects.elem.width;
        var y = topp + rects.elem.height / 2;
        make_circle(x, y);

    // For usb svg
        var elem = document.getElementById('e');
        var rects = {
            elem: elem.getBoundingClientRect(),
            two: two.renderer.domElement.getBoundingClientRect()
        };
        var left = rects.elem.left - rects.two.left;
        var topp = rects.elem.top - rects.two.top;
        var x = left + rects.elem.width;
        var y = topp + rects.elem.height / 2;
        make_circle(x, y);
        // two.update();
    </script>
</body>

## octicon-github.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              octicon-github.svg
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## usb-brands.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              usb-brands.svg
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<head>
	</head>
	<style>
	* {
	border: 1px solid black;
	}
	.container {
	border: 1px solid red;
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	grid-gap: 5em 5em;
	justify-content: center;
	align-content: center;
	position: relative;
	z-index:2;
	}
	.overlay {
	/* border: 2px dotted green; */
	position: absolute;
	height: 100%;
	width: 100%;
	z-index:1;
	grid-column: 1 / 3;
	grid-row: 1 / 4;
	/* box-sizing: content-box; */
	/* box-sizing: border-box; */
	}
	.item {
	border: 1px solid blue;
	justify-self: center;
	align-self: center;
	/* padding: 5%; */
	/* margin: auto; */
	/* box-sizing: content-box; */
	/* box-sizing: border-box; */
	/* display: block; */
	}
	</style>
	<body>
	<div class="container">
	<div id="a" class="item"><img src="octicon-github.svg"></div>
	<div id="b" class="item">B</div>
	<div id="c" class="item"><img src="fontawesome-github.svg"></div>
	<div id="d" class="item">D</div>
	<div id="e" class="item"><img style="transform: rotate(180deg);" src="usb-brands.svg"></div>
	<div id="f" class="item">F</div>
	<div id="draw" class="overlay"></div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.min.js"></script>
	<script>
	var element = document.getElementById('draw');
	var params = { width: "100%", height: "100%" };
	var two = new Two(params).appendTo(element);

	function make_circle(x,y){
	var circle = two.makeCircle(x, y, 5);
	circle.fill = '#FF8000';
	circle.stroke = 'orangered';
	circle.linewidth = 5;
	two.update();
	return false;
	}

	// For octicon svg
	var elem = document.getElementById('a');
	var rects = {
	elem: elem.getBoundingClientRect(),
	two: two.renderer.domElement.getBoundingClientRect()
	};
	var left = rects.elem.left - rects.two.left;
	var topp = rects.elem.top - rects.two.top;
	var x = left + rects.elem.width;
	var y = topp + rects.elem.height / 2;
	make_circle(x, y);

	// For fontawesome svg
	var elem = document.getElementById('c');
	var rects = {
	elem: elem.getBoundingClientRect(),
	two: two.renderer.domElement.getBoundingClientRect()
	};
	var left = rects.elem.left - rects.two.left;
	var topp = rects.elem.top - rects.two.top;
	var x = left + rects.elem.width;
	var y = topp + rects.elem.height / 2;
	make_circle(x, y);

	// For usb svg
	var elem = document.getElementById('e');
	var rects = {
	elem: elem.getBoundingClientRect(),
	two: two.renderer.domElement.getBoundingClientRect()
	};
	var left = rects.elem.left - rects.two.left;
	var topp = rects.elem.top - rects.two.top;
	var x = left + rects.elem.width;
	var y = topp + rects.elem.height / 2;
	make_circle(x, y);
	// two.update();
	</script>
	</body>