haopengzhan/CoderSherlock.github.io
1
0
Fork 0
mirror of https://github.com/CoderSherlock/CoderSherlock.github.io.git synced 2026-06-13 08:08:10 -07:00
Code Issues Packages Projects Releases Wiki Activity

I_changed_another_theme

Browse Source
This commit is contained in:
CoderSherlock
2016-08-16 20:03:40 -04:00
parent 23434adfb0
commit 3d1bca5d8b
345 changed files with 47813 additions and 2571 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bower_components/iron-image/demo/index.html
Vendored
+183
View File
@@ -0,0 +1,183 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-image</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="stylesheet" href="../../paper-styles/demo.css">
<link rel="import" href="../iron-image.html">
<style>
.sized {
width: 200px;
height: 200px;
}
.gray {
background-color: lightgray;
}
.group {
display: inline-block;
vertical-align: top;
}
[hidden] {
display: none;
}
.controls {
display: block;
margin-bottom: 1em;
}
</style>
</head>
<body unresolved>
<template is="dom-bind">
<h3>Sizing: none (naturally sized)</h3>
<iron-image src="./polymer.svg"></iron-image>
<h3>Sizing: cover</h3>
<iron-image class="sized" sizing="cover" src="./polymer.svg"></iron-image>
<iron-image class="sized" sizing="cover" src="./polymer.svg"></iron-image>
<h3>Sizing: contain</h3>
<iron-image class="sized gray" sizing="contain" src="./polymer.svg"></iron-image>
<iron-image class="sized gray" sizing="contain" src="./polymer.svg"></iron-image>
<h3>Preload: none</h3>
<div class="group">
<div>No sizing</div>
<div class="controls">
<button on-click="preload" target="preload1a">Load image</button>
</div>
<iron-image id="preload1a" class="sized gray" ></iron-image>
</div>
<div class="group">
<div>Cover</div>
<div class="controls"><button on-click="preload" target="preload1b">Load image</button></div>
<iron-image id="preload1b" class="sized gray" sizing="cover" ></iron-image>
</div>
<div class="group">
<div>Contain</div>
<div class="controls"><button on-click="preload" target="preload1c">Load image</button></div>
<iron-image id="preload1c" class="sized gray" sizing="contain" ></iron-image>
</div>
<h3>Preload: color as placeholder</h3>
<div class="group">
<div>No sizing</div>
<div class="controls"><button on-click="preload" target="preload2a">Load image</button>
<span hidden$="[[!loading2a]]">Loading...</span></div>
<iron-image loading="{{loading2a}}" id="preload2a" class="sized gray" preload></iron-image>
</div>
<div class="group">
<div>Cover</div>
<div class="controls"><button on-click="preload" target="preload2b">Load image</button>
<span hidden$="[[!loading2b]]">Loading...</span></div>
<iron-image loading="{{loading2b}}" id="preload2b" class="sized gray" sizing="cover" preload ></iron-image>
</div>
<div class="group">
<div>Contain</div>
<div class="controls"><button on-click="preload" target="preload2c">Load image</button>
<span hidden$="[[!loading2c]]">Loading...</span></div>
<iron-image loading="{{loading2c}}" id="preload2c" class="sized gray" sizing="contain" preload ></iron-image>
</div>
<h3>Preload: image as placeholder</h3>
<div class="group">
<div>No sizing</div>
<div class="controls"><button on-click="preload" target="preload3a">Load image</button>
<span hidden$="[[!loading3a]]">Loading...</span></div>
<iron-image loading="{{loading3a}}" id="preload3a" class="sized gray" preload placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw=="></iron-image>
</div>
<div class="group">
<div>Cover</div>
<div class="controls"><button on-click="preload" target="preload3b">Load image</button>
<span hidden$="[[!loading3b]]">Loading...</span></div>
<iron-image loading="{{loading3b}}" id="preload3b" class="sized gray" sizing="cover" preload placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw=="></iron-image>
</div>
<div class="group">
<div>Contain</div>
<div class="controls"><button on-click="preload" target="preload3c">Load image</button>
<span hidden$="[[!loading3c]]">Loading...</span></div>
<iron-image loading="{{loading3c}}" id="preload3c" class="sized gray" sizing="contain" preload placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw=="></iron-image>
</div>
<h3>Preload: color as placeholder, with Fade-in</h3>
<div class="group">
<div>No sizing</div>
<div class="controls"><button on-click="preload" target="preload2afade">Load image</button>
<span hidden$="[[!loading2aFade]]">Loading...</span></div>
<iron-image loading="{{loading2aFade}}" id="preload2afade" class="sized gray" preload fade></iron-image>
</div>
<div class="group">
<div>Cover</div>
<div class="controls"><button on-click="preload" target="preload2bfade">Load image</button>
<span hidden$="[[!loading2bFade]]">Loading...</span></div>
<iron-image loading="{{loading2bFade}}" id="preload2bfade" class="sized gray" sizing="cover" preload fade></iron-image>
</div>
<div class="group">
<div>Contain</div>
<div class="controls"><button on-click="preload" target="preload2cfade">Load image</button>
<span hidden$="[[!loading2cFade]]">Loading...</span></div>
<iron-image loading="{{loading2cFade}}" id="preload2cfade" class="sized gray" sizing="contain" preload fade></iron-image>
</div>
<h3>Preload: image as placeholder, with Fade-in</h3>
<div class="group">
<div>No sizing</div>
<div class="controls"><button on-click="preload" target="preload3afade">Load image</button>
<span hidden$="[[!loading3aFade]]">Loading...</span></div>
<iron-image loading="{{loading3aFade}}" id="preload3afade" class="sized gray" preload placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw==" fade></iron-image>
</div>
<div class="group">
<div>Cover</div>
<div class="controls"><button on-click="preload" target="preload3bfade">Load image</button>
<span hidden$="[[!loading3bFade]]">Loading...</span></div>
<iron-image loading="{{loading3bFade}}" id="preload3bfade" class="sized gray" sizing="cover" preload placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw==" fade></iron-image>
</div>
<div class="group">
<div>Contain</div>
<div class="controls"><button on-click="preload" target="preload3cfade">Load image</button>
<span hidden$="[[!loading3cFade]]">Loading...</span></div>
<iron-image loading="{{loading3cFade}}" id="preload3cfade" class="sized gray" sizing="contain" preload placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw==" fade></iron-image>
</div>
</template>
<script>
var scope = document.querySelector('template[is=dom-bind]');
scope.preload = function(e) {
var img = document.querySelector('#' + e.target.getAttribute('target'));
img.src = './polymer.svg?' + Math.random();
e.target.textContent = 'Reload image';
};
</script>
</body>
</html>
bower_components/iron-image/demo/polymer.svg
Vendored
+175
View File
@@ -0,0 +1,175 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="416px" height="286px" viewBox="0 0 416 286" enable-background="new 0 0 416 286" xml:space="preserve">
<g>
<g>
<polygon fill="#303F9F" points="84.157,143 42.878,214.5 84.157,286 125.436,214.5 "/>
<polygon fill="#3F51B5" points="331.842,0 290.561,71.5 331.842,143 373.121,71.5 "/>
<polygon fill="#7986CB" points="373.121,71.5 249.278,286 331.842,286 414.4,143 "/>
<polygon fill="#FF4081" points="249.278,0 84.157,286 166.721,286 331.842,0 "/>
<polygon fill="#536DFE" points="84.157,0 1.596,143 42.878,214.5 166.721,0 "/>
<polygon fill="#FFFFFF" fill-opacity="0.2" points="249.278,0 290.561,71.5 331.842,0 "/>
<polygon fill="#FFFFFF" fill-opacity="0.1" points="208,71.5 249.278,0 290.561,71.5 "/>
<polygon fill="#FFFFFF" fill-opacity="0" points="208,71.5 249.278,143 290.561,71.5 "/>
<polygon fill-opacity="0.1" points="166.721,143 208,71.5 249.278,143 "/>
<polygon fill-opacity="0.2" points="166.721,143 208,214.5 249.278,143 "/>
<polygon fill-opacity="0.3" points="125.438,214.5 166.721,143 208,214.5 "/>
<polygon fill-opacity="0.4" points="125.438,214.5 166.721,286 208,214.5 "/>
<polygon fill-opacity="0.5" points="84.157,286 125.438,214.5 166.721,286 "/>
<polygon fill="#FFFFFF" fill-opacity="0.2" points="84.157,0 125.438,71.5 166.721,0 "/>
<polygon fill="#FFFFFF" fill-opacity="0.1" points="42.878,71.5 84.157,0 125.438,71.5 "/>
<polygon fill="#FFFFFF" fill-opacity="0" points="42.878,71.5 84.157,143 125.438,71.5 "/>
<polygon fill-opacity="0.1" points="1.598,143 42.878,71.5 84.157,143 "/>
<polygon fill-opacity="0.2" points="1.598,143 42.878,214.5 84.157,143 "/>
<polygon fill="#FFFFFF" fill-opacity="0" points="125.438,214.5 84.157,143 42.878,214.5 "/>
<polygon fill-opacity="0.2" points="125.438,214.5 84.157,286 42.878,214.5 "/>
<polygon fill-opacity="0.2" points="373.121,71.5 331.842,0 290.561,71.5 "/>
<polygon fill="#FFFFFF" fill-opacity="0" points="373.121,71.5 331.842,143 290.561,71.5 "/>
<g>
<polygon fill="#FFFFFF" fill-opacity="0.2" points="331.842,143 373.121,71.5 414.4,143 "/>
<polygon fill="#FFFFFF" fill-opacity="0.1" points="331.842,143 373.121,214.5 414.4,143 "/>
<polygon fill="#FFFFFF" fill-opacity="0" points="290.561,214.5 331.842,143 373.121,214.5 "/>
<polygon fill-opacity="0.1" points="290.561,214.5 331.842,286 373.121,214.5 "/>
<polygon fill-opacity="0.2" points="249.278,286 290.561,214.5 331.842,286 "/>
</g>
</g>
<rect y="-65" fill="none" width="416" height="416"/>
</g>
<g display="none">
<g display="inline">
<polygon fill="#303F9F" points="84.157,143 42.878,214.5 84.157,286 166.721,286 "/>
<polygon fill="#3F51B5" points="331.842,0 249.278,0 331.842,143 373.121,71.5 "/>
<polygon fill="#7986CB" points="373.121,71.5 249.278,286 331.842,286 414.4,143 "/>
<polygon fill="#536DFE" points="84.157,0 1.596,143 42.878,214.5 166.721,0 "/>
<polygon fill-opacity="0.5" points="249.278,0 290.561,71.5 331.842,0 "/>
<polygon fill-opacity="0.5" points="84.157,286 125.438,214.5 166.721,286 "/>
<polygon fill="#FFFFFF" fill-opacity="0.2" points="84.157,0 125.438,71.5 166.721,0 "/>
<polygon fill="#FFFFFF" fill-opacity="0.1" points="42.878,71.5 84.157,0 125.438,71.5 "/>
<polygon fill="#FFFFFF" fill-opacity="0" points="42.878,71.5 84.157,143 125.438,71.5 "/>
<polygon fill-opacity="0.1" points="1.598,143 42.878,71.5 84.157,143 "/>
<polygon fill-opacity="0.2" points="1.598,143 42.878,214.5 84.157,143 "/>
<polygon fill="#FFFFFF" fill-opacity="0" points="125.438,214.5 84.157,143 42.878,214.5 "/>
<polygon fill="#FFFFFF" fill-opacity="0" points="373.121,71.5 331.842,143 290.561,71.5 "/>
<g>
<polygon fill="#FFFFFF" fill-opacity="0.2" points="331.842,143 373.121,71.5 414.4,143 "/>
<polygon fill="#FFFFFF" fill-opacity="0.1" points="331.842,143 373.121,214.5 414.4,143 "/>
<polygon fill="#FFFFFF" fill-opacity="0" points="290.561,214.5 331.842,143 373.121,214.5 "/>
<polygon fill-opacity="0.1" points="290.561,214.5 331.842,286 373.121,214.5 "/>
<polygon fill-opacity="0.2" points="249.278,286 290.561,214.5 331.842,286 "/>
</g>
<polygon fill-opacity="0.2" points="125.438,214.5 84.157,286 42.878,214.5 "/>
<polygon fill-opacity="0.2" points="373.121,71.5 331.842,0 290.561,71.5 "/>
</g>
<rect y="-65" display="inline" fill="none" width="416" height="416"/>
</g>
<g display="none">
<g display="inline">
<polygon fill="#FF4081" points="249.279,0 84.157,286 166.721,286 331.843,0 "/>
<polygon fill="#FFFFFF" fill-opacity="0.2" points="249.279,0 290.558,71.5 331.843,0 "/>
<polygon fill="#FFFFFF" fill-opacity="0.1" points="208,71.5 249.279,0 290.558,71.5 "/>
<polygon fill="#FFFFFF" fill-opacity="0" points="208,71.5 249.279,143 290.558,71.5 "/>
<polygon fill-opacity="0.2" points="166.721,143 208,214.5 249.279,143 "/>
<polygon fill-opacity="0.3" points="125.439,214.5 166.721,143 208,214.5 "/>
<polygon fill-opacity="0.4" points="125.439,214.5 166.721,286 208,214.5 "/>
<polygon fill-opacity="0.5" points="84.157,286 125.439,214.5 166.721,286 "/>
<polygon fill-opacity="0.1" points="166.721,143 208,71.5 249.279,143 "/>
</g>
<g display="inline">
<polygon fill="#FF4081" points="331.84,0 166.718,286 249.279,286 373.121,71.5 "/>
<polygon fill="#FFFFFF" fill-opacity="0.1" points="290.558,71.5 331.84,0 373.121,71.5 "/>
<polygon fill="#FFFFFF" fill-opacity="0" points="290.558,71.5 331.84,143 373.121,71.5 "/>
<polygon fill-opacity="0.2" points="249.279,143 290.558,214.5 331.84,143 "/>
<polygon fill-opacity="0.3" points="208,214.5 249.279,143 290.558,214.5 "/>
<polygon fill-opacity="0.4" points="208,214.5 249.279,286 290.558,214.5 "/>
<polygon fill-opacity="0.5" points="166.718,286 208,214.5 249.279,286 "/>
<polygon fill-opacity="0.1" points="249.279,143 290.558,71.5 331.84,143 "/>
</g>
<g display="inline">
<polygon fill="#FF4081" points="166.718,0 42.878,214.5 84.16,286 249.279,0 "/>
<polygon fill="#FFFFFF" fill-opacity="0.2" points="166.718,0 208,71.5 249.279,0 "/>
<polygon fill="#FFFFFF" fill-opacity="0.1" points="125.439,71.5 166.718,0 208,71.5 "/>
<polygon fill="#FFFFFF" fill-opacity="0" points="125.439,71.5 166.718,143 208,71.5 "/>
<polygon fill-opacity="0.2" points="84.16,143 125.439,214.5 166.718,143 "/>
<polygon fill-opacity="0.3" points="42.878,214.5 84.16,143 125.439,214.5 "/>
<polygon fill-opacity="0.4" points="42.878,214.5 84.16,286 125.439,214.5 "/>
<polygon fill-opacity="0.1" points="84.16,143 125.439,71.5 166.718,143 "/>
</g>
<rect y="-65" display="inline" fill="none" width="416" height="416"/>
<g display="inline">
<polygon fill="#303F9F" points="84.157,143 42.878,214.5 84.157,286 166.721,286 "/>
<polygon fill="#3F51B5" points="331.843,0 249.279,0 331.843,143 373.121,71.5 "/>
<polygon fill="#7986CB" points="373.121,71.5 249.279,286 331.843,286 414.4,143 "/>
<polygon fill="#536DFE" points="84.157,0 1.597,143 42.878,214.5 166.721,0 "/>
<polygon fill-opacity="0.5" points="249.279,0 290.558,71.5 331.843,0 "/>
<polygon fill-opacity="0.5" points="84.157,286 125.439,214.5 166.721,286 "/>
<polygon fill="#FFFFFF" fill-opacity="0.2" points="84.157,0 125.439,71.5 166.721,0 "/>
<polygon fill="#FFFFFF" fill-opacity="0.1" points="42.878,71.5 84.157,0 125.439,71.5 "/>
<polygon fill="#FFFFFF" fill-opacity="0" points="42.878,71.5 84.157,143 125.439,71.5 "/>
<polygon fill-opacity="0.1" points="1.6,143 42.878,71.5 84.157,143 "/>
<polygon fill-opacity="0.2" points="1.6,143 42.878,214.5 84.157,143 "/>
<polygon fill="#FFFFFF" fill-opacity="0" points="125.439,214.5 84.157,143 42.878,214.5 "/>
<polygon fill="#FFFFFF" fill-opacity="0" points="373.121,71.5 331.843,143 290.558,71.5 "/>
<g>
<polygon fill="#FFFFFF" fill-opacity="0.2" points="331.843,143 373.121,71.5 414.4,143 "/>
<polygon fill="#FFFFFF" fill-opacity="0.1" points="331.843,143 373.121,214.5 414.4,143 "/>
<polygon fill="#FFFFFF" fill-opacity="0" points="290.558,214.5 331.843,143 373.121,214.5 "/>
<polygon fill-opacity="0.1" points="290.558,214.5 331.843,286 373.121,214.5 "/>
<polygon fill-opacity="0.2" points="249.279,286 290.558,214.5 331.843,286 "/>
</g>
<polygon fill-opacity="0.2" points="125.439,214.5 84.157,286 42.878,214.5 "/>
<polygon fill-opacity="0.2" points="373.121,71.5 331.843,0 290.558,71.5 "/>
</g>
</g>
<g display="none">
<g display="inline">
<polygon fill="#9F499B" points="249.279,0 84.157,286 166.721,286 331.843,0 "/>
<polygon fill="#FFFFFF" fill-opacity="0.2" points="249.279,0 290.558,71.5 331.843,0 "/>
<polygon fill="#FFFFFF" fill-opacity="0.1" points="208,71.5 249.279,0 290.558,71.5 "/>
<polygon fill="#FFFFFF" fill-opacity="0" points="208,71.5 249.279,143 290.558,71.5 "/>
<polygon fill-opacity="0.2" points="166.721,143 208,214.5 249.279,143 "/>
<polygon fill-opacity="0.3" points="125.439,214.5 166.721,143 208,214.5 "/>
<polygon fill-opacity="0.4" points="125.439,214.5 166.721,286 208,214.5 "/>
<polygon fill-opacity="0.5" points="84.157,286 125.439,214.5 166.721,286 "/>
<polygon fill-opacity="0.1" points="166.721,143 208,71.5 249.279,143 "/>
</g>
<g display="inline">
<polygon fill="#9F499B" points="331.84,0 166.718,286 249.279,286 373.121,71.5 "/>
<polygon fill="#FFFFFF" fill-opacity="0.1" points="290.558,71.5 331.84,0 373.121,71.5 "/>
<polygon fill="#FFFFFF" fill-opacity="0" points="290.558,71.5 331.84,143 373.121,71.5 "/>
<polygon fill-opacity="0.2" points="249.279,143 290.558,214.5 331.84,143 "/>
<polygon fill-opacity="0.3" points="208,214.5 249.279,143 290.558,214.5 "/>
<polygon fill-opacity="0.4" points="208,214.5 249.279,286 290.558,214.5 "/>
<polygon fill-opacity="0.5" points="166.718,286 208,214.5 249.279,286 "/>
<polygon fill-opacity="0.1" points="249.279,143 290.558,71.5 331.84,143 "/>
</g>
<g display="inline">
<polygon fill="#9F499B" points="373.121,71.5 249.279,286 331.843,286 414.4,143 "/>
<polygon fill-opacity="0.2" points="331.843,143 373.121,214.5 414.4,143 "/>
<polygon fill-opacity="0.3" points="290.558,214.5 331.843,143 373.121,214.5 "/>
<polygon fill-opacity="0.4" points="290.558,214.5 331.843,286 373.121,214.5 "/>
<polygon fill-opacity="0.5" points="249.279,286 290.558,214.5 331.843,286 "/>
<polygon fill-opacity="0.1" points="331.843,143 373.121,71.5 414.4,143 "/>
</g>
<g display="inline">
<polygon fill="#9F499B" points="166.718,0 42.878,214.5 84.16,286 249.279,0 "/>
<polygon fill="#FFFFFF" fill-opacity="0.2" points="166.718,0 208,71.5 249.279,0 "/>
<polygon fill="#FFFFFF" fill-opacity="0.1" points="125.439,71.5 166.718,0 208,71.5 "/>
<polygon fill="#FFFFFF" fill-opacity="0" points="125.439,71.5 166.718,143 208,71.5 "/>
<polygon fill-opacity="0.2" points="84.16,143 125.439,214.5 166.718,143 "/>
<polygon fill-opacity="0.3" points="42.878,214.5 84.16,143 125.439,214.5 "/>
<polygon fill-opacity="0.4" points="42.878,214.5 84.16,286 125.439,214.5 "/>
<polygon fill-opacity="0.1" points="84.16,143 125.439,71.5 166.718,143 "/>
</g>
<g display="inline">
<polygon fill="#9F499B" points="84.157,0 1.6,143 42.878,214.5 166.721,0 "/>
<polygon fill="#FFFFFF" fill-opacity="0.2" points="84.157,0 125.439,71.5 166.721,0 "/>
<polygon fill="#FFFFFF" fill-opacity="0.1" points="42.878,71.5 84.157,0 125.439,71.5 "/>
<polygon fill="#FFFFFF" fill-opacity="0" points="42.878,71.5 84.157,143 125.439,71.5 "/>
<polygon fill-opacity="0.2" points="1.6,143 42.878,214.5 84.157,143 "/>
<polygon fill-opacity="0.1" points="1.6,143 42.878,71.5 84.157,143 "/>
</g>
<rect y="-65" display="inline" fill="none" width="416" height="416"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB