|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354 |
- <html>
- <head>
- <title>Logos & Brands</title>
- <link rel="icon" type="image/png" href="../favicon.png">
- <style>
- body {
- font-family: 'Segoe UI', Arial;
- background-color: #aaa;
- padding: 0;
- margin: 0;
- }
- .bg-0 {
- background-image: url("https://github.com/benc-uk/icon-collection/raw/master/_tools/background.png")
- }
- .bg-1 {
- background-color: #333;
- }
- .bg-2 {
- background-color: #fff;
- }
- .imgbox img {
- width: 10.5rem;
- height: 10.5rem;
- object-fit: contain;
- cursor: pointer;
- }
- .imgbox {
- margin: 0.6rem;
- padding: 0.5rem;
- text-align: center;
- width: 12rem;
- height: 12rem;
- background-color: #e0e0e0;
- }
- h1 {
- font-size: 2.6rem;
- }
- .find, .find input {
- font-size: 1.5rem;
- }
- .top {
- position: -webkit-sticky;
- position: sticky;
- top: 0;
- background-color: #aaa;
- padding: 1rem;
- box-shadow: 0px 5px 18px 3px rgba(0,0,0,0.59);
- }
- .top button {
- float: right;
- position: relative;
- top: -2rem;
- font-size: 1.5rem;
- }
- .pngbox {
- position: absolute;
- top: 2rem;
- right: 1rem;
- font-size: 1.5rem;
- }
- input[type="checkbox"] {
- width: 1.6em;
- height: 1.6em;
- }
- .label {
- height: 2.5em;
- line-height: 1em;
- overflow: hidden;
- font-size: 0.9rem;
- }
- .grid {
- display: flex;
- flex-wrap: wrap;
- width: 100%;
- }
- h1 {
- display:inline;
- }
- .home {
- font-size: 3rem;
- text-decoration: none
- }
- </style>
- </head>
-
- <body>
-
- <div class="top">
- <a href=".." class="home">🡅</a> <h1>Logos & Brands</h1>
- <br/><br/>
- <span class="find">Finder: <input onkeyup="search()" id="finder"><br></span>
- <div class="pngbox"><input type="checkbox" id="pngcheck"><label for="pngcheck">Download as PNG</label></div>
- <button onclick="toggleBg()">Change Background</button>
- </div>
-
- <div class="grid">
-
- <div id="android-1.svg" class="imgbox"><img src="android-1.svg" class="bg-0" onclick="download('android-1.svg', this)"/><div class="label">android-1.svg</div></div>
-
- <div id="android-mono.svg" class="imgbox"><img src="android-mono.svg" class="bg-0" onclick="download('android-mono.svg', this)"/><div class="label">android-mono.svg</div></div>
-
- <div id="angular.svg" class="imgbox"><img src="angular.svg" class="bg-0" onclick="download('angular.svg', this)"/><div class="label">angular.svg</div></div>
-
- <div id="ansible.svg" class="imgbox"><img src="ansible.svg" class="bg-0" onclick="download('ansible.svg', this)"/><div class="label">ansible.svg</div></div>
-
- <div id="apache.svg" class="imgbox"><img src="apache.svg" class="bg-0" onclick="download('apache.svg', this)"/><div class="label">apache.svg</div></div>
-
- <div id="atom.svg" class="imgbox"><img src="atom.svg" class="bg-0" onclick="download('atom.svg', this)"/><div class="label">atom.svg</div></div>
-
- <div id="azure-logo.svg" class="imgbox"><img src="azure-logo.svg" class="bg-0" onclick="download('azure-logo.svg', this)"/><div class="label">azure-logo.svg</div></div>
-
- <div id="azure-offical.svg" class="imgbox"><img src="azure-offical.svg" class="bg-0" onclick="download('azure-offical.svg', this)"/><div class="label">azure-offical.svg</div></div>
-
- <div id="bash.svg" class="imgbox"><img src="bash.svg" class="bg-0" onclick="download('bash.svg', this)"/><div class="label">bash.svg</div></div>
-
- <div id="bit-bucket.svg" class="imgbox"><img src="bit-bucket.svg" class="bg-0" onclick="download('bit-bucket.svg', this)"/><div class="label">bit-bucket.svg</div></div>
-
- <div id="c-lang.svg" class="imgbox"><img src="c-lang.svg" class="bg-0" onclick="download('c-lang.svg', this)"/><div class="label">c-lang.svg</div></div>
-
- <div id="c-plusplus.svg" class="imgbox"><img src="c-plusplus.svg" class="bg-0" onclick="download('c-plusplus.svg', this)"/><div class="label">c-plusplus.svg</div></div>
-
- <div id="canonical.svg" class="imgbox"><img src="canonical.svg" class="bg-0" onclick="download('canonical.svg', this)"/><div class="label">canonical.svg</div></div>
-
- <div id="chef-1.svg" class="imgbox"><img src="chef-1.svg" class="bg-0" onclick="download('chef-1.svg', this)"/><div class="label">chef-1.svg</div></div>
-
- <div id="chef-2.svg" class="imgbox"><img src="chef-2.svg" class="bg-0" onclick="download('chef-2.svg', this)"/><div class="label">chef-2.svg</div></div>
-
- <div id="cncf-icon.svg" class="imgbox"><img src="cncf-icon.svg" class="bg-0" onclick="download('cncf-icon.svg', this)"/><div class="label">cncf-icon.svg</div></div>
-
- <div id="cncf.svg" class="imgbox"><img src="cncf.svg" class="bg-0" onclick="download('cncf.svg', this)"/><div class="label">cncf.svg</div></div>
-
- <div id="containerd-icon-color.svg" class="imgbox"><img src="containerd-icon-color.svg" class="bg-0" onclick="download('containerd-icon-color.svg', this)"/><div class="label">containerd-icon-color.svg</div></div>
-
- <div id="coredns-icon-color.svg" class="imgbox"><img src="coredns-icon-color.svg" class="bg-0" onclick="download('coredns-icon-color.svg', this)"/><div class="label">coredns-icon-color.svg</div></div>
-
- <div id="csharp-1.svg" class="imgbox"><img src="csharp-1.svg" class="bg-0" onclick="download('csharp-1.svg', this)"/><div class="label">csharp-1.svg</div></div>
-
- <div id="csharp-2.svg" class="imgbox"><img src="csharp-2.svg" class="bg-0" onclick="download('csharp-2.svg', this)"/><div class="label">csharp-2.svg</div></div>
-
- <div id="curl.svg" class="imgbox"><img src="curl.svg" class="bg-0" onclick="download('curl.svg', this)"/><div class="label">curl.svg</div></div>
-
- <div id="dapr.svg" class="imgbox"><img src="dapr.svg" class="bg-0" onclick="download('dapr.svg', this)"/><div class="label">dapr.svg</div></div>
-
- <div id="docker-icon-wh.svg" class="imgbox"><img src="docker-icon-wh.svg" class="bg-0" onclick="download('docker-icon-wh.svg', this)"/><div class="label">docker-icon-wh.svg</div></div>
-
- <div id="docker-icon.svg" class="imgbox"><img src="docker-icon.svg" class="bg-0" onclick="download('docker-icon.svg', this)"/><div class="label">docker-icon.svg</div></div>
-
- <div id="docker-mono.svg" class="imgbox"><img src="docker-mono.svg" class="bg-0" onclick="download('docker-mono.svg', this)"/><div class="label">docker-mono.svg</div></div>
-
- <div id="docker-whale.svg" class="imgbox"><img src="docker-whale.svg" class="bg-0" onclick="download('docker-whale.svg', this)"/><div class="label">docker-whale.svg</div></div>
-
- <div id="dotnet-core.svg" class="imgbox"><img src="dotnet-core.svg" class="bg-0" onclick="download('dotnet-core.svg', this)"/><div class="label">dotnet-core.svg</div></div>
-
- <div id="duffle.svg" class="imgbox"><img src="duffle.svg" class="bg-0" onclick="download('duffle.svg', this)"/><div class="label">duffle.svg</div></div>
-
- <div id="dynamics.svg" class="imgbox"><img src="dynamics.svg" class="bg-0" onclick="download('dynamics.svg', this)"/><div class="label">dynamics.svg</div></div>
-
- <div id="eclipse.svg" class="imgbox"><img src="eclipse.svg" class="bg-0" onclick="download('eclipse.svg', this)"/><div class="label">eclipse.svg</div></div>
-
- <div id="envoy-icon-color.svg" class="imgbox"><img src="envoy-icon-color.svg" class="bg-0" onclick="download('envoy-icon-color.svg', this)"/><div class="label">envoy-icon-color.svg</div></div>
-
- <div id="etcd-icon-color.svg" class="imgbox"><img src="etcd-icon-color.svg" class="bg-0" onclick="download('etcd-icon-color.svg', this)"/><div class="label">etcd-icon-color.svg</div></div>
-
- <div id="flask.svg" class="imgbox"><img src="flask.svg" class="bg-0" onclick="download('flask.svg', this)"/><div class="label">flask.svg</div></div>
-
- <div id="git.svg" class="imgbox"><img src="git.svg" class="bg-0" onclick="download('git.svg', this)"/><div class="label">git.svg</div></div>
-
- <div id="github-1.svg" class="imgbox"><img src="github-1.svg" class="bg-0" onclick="download('github-1.svg', this)"/><div class="label">github-1.svg</div></div>
-
- <div id="github-2.svg" class="imgbox"><img src="github-2.svg" class="bg-0" onclick="download('github-2.svg', this)"/><div class="label">github-2.svg</div></div>
-
- <div id="go-lang-old.svg" class="imgbox"><img src="go-lang-old.svg" class="bg-0" onclick="download('go-lang-old.svg', this)"/><div class="label">go-lang-old.svg</div></div>
-
- <div id="go-lang.svg" class="imgbox"><img src="go-lang.svg" class="bg-0" onclick="download('go-lang.svg', this)"/><div class="label">go-lang.svg</div></div>
-
- <div id="gradle.svg" class="imgbox"><img src="gradle.svg" class="bg-0" onclick="download('gradle.svg', this)"/><div class="label">gradle.svg</div></div>
-
- <div id="gremlin.svg" class="imgbox"><img src="gremlin.svg" class="bg-0" onclick="download('gremlin.svg', this)"/><div class="label">gremlin.svg</div></div>
-
- <div id="helm-icon.svg" class="imgbox"><img src="helm-icon.svg" class="bg-0" onclick="download('helm-icon.svg', this)"/><div class="label">helm-icon.svg</div></div>
-
- <div id="helm-logo.svg" class="imgbox"><img src="helm-logo.svg" class="bg-0" onclick="download('helm-logo.svg', this)"/><div class="label">helm-logo.svg</div></div>
-
- <div id="html5.svg" class="imgbox"><img src="html5.svg" class="bg-0" onclick="download('html5.svg', this)"/><div class="label">html5.svg</div></div>
-
- <div id="ios.svg" class="imgbox"><img src="ios.svg" class="bg-0" onclick="download('ios.svg', this)"/><div class="label">ios.svg</div></div>
-
- <div id="istio.svg" class="imgbox"><img src="istio.svg" class="bg-0" onclick="download('istio.svg', this)"/><div class="label">istio.svg</div></div>
-
- <div id="java.svg" class="imgbox"><img src="java.svg" class="bg-0" onclick="download('java.svg', this)"/><div class="label">java.svg</div></div>
-
- <div id="javascript.svg" class="imgbox"><img src="javascript.svg" class="bg-0" onclick="download('javascript.svg', this)"/><div class="label">javascript.svg</div></div>
-
- <div id="jenkins.svg" class="imgbox"><img src="jenkins.svg" class="bg-0" onclick="download('jenkins.svg', this)"/><div class="label">jenkins.svg</div></div>
-
- <div id="jfrog.svg" class="imgbox"><img src="jfrog.svg" class="bg-0" onclick="download('jfrog.svg', this)"/><div class="label">jfrog.svg</div></div>
-
- <div id="kafka.svg" class="imgbox"><img src="kafka.svg" class="bg-0" onclick="download('kafka.svg', this)"/><div class="label">kafka.svg</div></div>
-
- <div id="kubernetes-horizontal.svg" class="imgbox"><img src="kubernetes-horizontal.svg" class="bg-0" onclick="download('kubernetes-horizontal.svg', this)"/><div class="label">kubernetes-horizontal.svg</div></div>
-
- <div id="kubernetes-stacked.svg" class="imgbox"><img src="kubernetes-stacked.svg" class="bg-0" onclick="download('kubernetes-stacked.svg', this)"/><div class="label">kubernetes-stacked.svg</div></div>
-
- <div id="kubernetes.svg" class="imgbox"><img src="kubernetes.svg" class="bg-0" onclick="download('kubernetes.svg', this)"/><div class="label">kubernetes.svg</div></div>
-
- <div id="linkedin.svg" class="imgbox"><img src="linkedin.svg" class="bg-0" onclick="download('linkedin.svg', this)"/><div class="label">linkedin.svg</div></div>
-
- <div id="linkerd-icon.svg" class="imgbox"><img src="linkerd-icon.svg" class="bg-0" onclick="download('linkerd-icon.svg', this)"/><div class="label">linkerd-icon.svg</div></div>
-
- <div id="linux-tux-colour.svg" class="imgbox"><img src="linux-tux-colour.svg" class="bg-0" onclick="download('linux-tux-colour.svg', this)"/><div class="label">linux-tux-colour.svg</div></div>
-
- <div id="linux-tux-mono.svg" class="imgbox"><img src="linux-tux-mono.svg" class="bg-0" onclick="download('linux-tux-mono.svg', this)"/><div class="label">linux-tux-mono.svg</div></div>
-
- <div id="logo_pluralsight_mono.svg" class="imgbox"><img src="logo_pluralsight_mono.svg" class="bg-0" onclick="download('logo_pluralsight_mono.svg', this)"/><div class="label">logo_pluralsight_mono.svg</div></div>
-
- <div id="logo_pluralsight_twotone.svg" class="imgbox"><img src="logo_pluralsight_twotone.svg" class="bg-0" onclick="download('logo_pluralsight_twotone.svg', this)"/><div class="label">logo_pluralsight_twotone.svg</div></div>
-
- <div id="logo_sql.svg" class="imgbox"><img src="logo_sql.svg" class="bg-0" onclick="download('logo_sql.svg', this)"/><div class="label">logo_sql.svg</div></div>
-
- <div id="microsoft-logo.svg" class="imgbox"><img src="microsoft-logo.svg" class="bg-0" onclick="download('microsoft-logo.svg', this)"/><div class="label">microsoft-logo.svg</div></div>
-
- <div id="microsoft-sq-1.svg" class="imgbox"><img src="microsoft-sq-1.svg" class="bg-0" onclick="download('microsoft-sq-1.svg', this)"/><div class="label">microsoft-sq-1.svg</div></div>
-
- <div id="microsoft-sq-2.svg" class="imgbox"><img src="microsoft-sq-2.svg" class="bg-0" onclick="download('microsoft-sq-2.svg', this)"/><div class="label">microsoft-sq-2.svg</div></div>
-
- <div id="microsoft.svg" class="imgbox"><img src="microsoft.svg" class="bg-0" onclick="download('microsoft.svg', this)"/><div class="label">microsoft.svg</div></div>
-
- <div id="nodejs-1.svg" class="imgbox"><img src="nodejs-1.svg" class="bg-0" onclick="download('nodejs-1.svg', this)"/><div class="label">nodejs-1.svg</div></div>
-
- <div id="nodejs-2.svg" class="imgbox"><img src="nodejs-2.svg" class="bg-0" onclick="download('nodejs-2.svg', this)"/><div class="label">nodejs-2.svg</div></div>
-
- <div id="nodejs-3.svg" class="imgbox"><img src="nodejs-3.svg" class="bg-0" onclick="download('nodejs-3.svg', this)"/><div class="label">nodejs-3.svg</div></div>
-
- <div id="oam.svg" class="imgbox"><img src="oam.svg" class="bg-0" onclick="download('oam.svg', this)"/><div class="label">oam.svg</div></div>
-
- <div id="octopus-deploy.svg" class="imgbox"><img src="octopus-deploy.svg" class="bg-0" onclick="download('octopus-deploy.svg', this)"/><div class="label">octopus-deploy.svg</div></div>
-
- <div id="openshift.svg" class="imgbox"><img src="openshift.svg" class="bg-0" onclick="download('openshift.svg', this)"/><div class="label">openshift.svg</div></div>
-
- <div id="powerbi-mono-black.svg" class="imgbox"><img src="powerbi-mono-black.svg" class="bg-0" onclick="download('powerbi-mono-black.svg', this)"/><div class="label">powerbi-mono-black.svg</div></div>
-
- <div id="prometheus-icon.svg" class="imgbox"><img src="prometheus-icon.svg" class="bg-0" onclick="download('prometheus-icon.svg', this)"/><div class="label">prometheus-icon.svg</div></div>
-
- <div id="puppet.svg" class="imgbox"><img src="puppet.svg" class="bg-0" onclick="download('puppet.svg', this)"/><div class="label">puppet.svg</div></div>
-
- <div id="python-colour.svg" class="imgbox"><img src="python-colour.svg" class="bg-0" onclick="download('python-colour.svg', this)"/><div class="label">python-colour.svg</div></div>
-
- <div id="python-mono.svg" class="imgbox"><img src="python-mono.svg" class="bg-0" onclick="download('python-mono.svg', this)"/><div class="label">python-mono.svg</div></div>
-
- <div id="r-lang.svg" class="imgbox"><img src="r-lang.svg" class="bg-0" onclick="download('r-lang.svg', this)"/><div class="label">r-lang.svg</div></div>
-
- <div id="raspberry-pi.svg" class="imgbox"><img src="raspberry-pi.svg" class="bg-0" onclick="download('raspberry-pi.svg', this)"/><div class="label">raspberry-pi.svg</div></div>
-
- <div id="red-hat-new.svg" class="imgbox"><img src="red-hat-new.svg" class="bg-0" onclick="download('red-hat-new.svg', this)"/><div class="label">red-hat-new.svg</div></div>
-
- <div id="red-hat.svg" class="imgbox"><img src="red-hat.svg" class="bg-0" onclick="download('red-hat.svg', this)"/><div class="label">red-hat.svg</div></div>
-
- <div id="ruby-1.svg" class="imgbox"><img src="ruby-1.svg" class="bg-0" onclick="download('ruby-1.svg', this)"/><div class="label">ruby-1.svg</div></div>
-
- <div id="ruby-mono.svg" class="imgbox"><img src="ruby-mono.svg" class="bg-0" onclick="download('ruby-mono.svg', this)"/><div class="label">ruby-mono.svg</div></div>
-
- <div id="rudr.svg" class="imgbox"><img src="rudr.svg" class="bg-0" onclick="download('rudr.svg', this)"/><div class="label">rudr.svg</div></div>
-
- <div id="saltstack.svg" class="imgbox"><img src="saltstack.svg" class="bg-0" onclick="download('saltstack.svg', this)"/><div class="label">saltstack.svg</div></div>
-
- <div id="sap.svg" class="imgbox"><img src="sap.svg" class="bg-0" onclick="download('sap.svg', this)"/><div class="label">sap.svg</div></div>
-
- <div id="slack.svg" class="imgbox"><img src="slack.svg" class="bg-0" onclick="download('slack.svg', this)"/><div class="label">slack.svg</div></div>
-
- <div id="spark.svg" class="imgbox"><img src="spark.svg" class="bg-0" onclick="download('spark.svg', this)"/><div class="label">spark.svg</div></div>
-
- <div id="stack-overflow.svg" class="imgbox"><img src="stack-overflow.svg" class="bg-0" onclick="download('stack-overflow.svg', this)"/><div class="label">stack-overflow.svg</div></div>
-
- <div id="suse.svg" class="imgbox"><img src="suse.svg" class="bg-0" onclick="download('suse.svg', this)"/><div class="label">suse.svg</div></div>
-
- <div id="terraform-full.svg" class="imgbox"><img src="terraform-full.svg" class="bg-0" onclick="download('terraform-full.svg', this)"/><div class="label">terraform-full.svg</div></div>
-
- <div id="terraform.svg" class="imgbox"><img src="terraform.svg" class="bg-0" onclick="download('terraform.svg', this)"/><div class="label">terraform.svg</div></div>
-
- <div id="trello.svg" class="imgbox"><img src="trello.svg" class="bg-0" onclick="download('trello.svg', this)"/><div class="label">trello.svg</div></div>
-
- <div id="twitter-1.svg" class="imgbox"><img src="twitter-1.svg" class="bg-0" onclick="download('twitter-1.svg', this)"/><div class="label">twitter-1.svg</div></div>
-
- <div id="twitter-2.svg" class="imgbox"><img src="twitter-2.svg" class="bg-0" onclick="download('twitter-2.svg', this)"/><div class="label">twitter-2.svg</div></div>
-
- <div id="ubuntu.svg" class="imgbox"><img src="ubuntu.svg" class="bg-0" onclick="download('ubuntu.svg', this)"/><div class="label">ubuntu.svg</div></div>
-
- <div id="virtualkubelet-icon.svg" class="imgbox"><img src="virtualkubelet-icon.svg" class="bg-0" onclick="download('virtualkubelet-icon.svg', this)"/><div class="label">virtualkubelet-icon.svg</div></div>
-
- <div id="vuejs.svg" class="imgbox"><img src="vuejs.svg" class="bg-0" onclick="download('vuejs.svg', this)"/><div class="label">vuejs.svg</div></div>
-
- <div id="windows.svg" class="imgbox"><img src="windows.svg" class="bg-0" onclick="download('windows.svg', this)"/><div class="label">windows.svg</div></div>
-
- <div id="xcode.svg" class="imgbox"><img src="xcode.svg" class="bg-0" onclick="download('xcode.svg', this)"/><div class="label">xcode.svg</div></div>
-
- <div id="youtube.svg" class="imgbox"><img src="youtube.svg" class="bg-0" onclick="download('youtube.svg', this)"/><div class="label">youtube.svg</div></div>
-
- </div>
-
- <script>
- var bgSetting = 0;
-
- function toggleBg() {
- bgSetting++
- if(bgSetting > 2) bgSetting = 0;
- for(let img of document.getElementsByTagName("img")) {
- img.className = `bg-${bgSetting}`;
- }
- }
-
- function search() {
- let query = document.getElementById('finder').value.trim().toLowerCase()
- if(query.length <= 0) {
- for(let imgbox of document.getElementsByClassName("imgbox")) {
- imgbox.style.display = "inline-block"
- }
- }
- for(let imgbox of document.getElementsByClassName("imgbox")) {
- imgbox.style.display = "inline-block"
- if(!imgbox.id.includes(query)) {
- imgbox.style.display = "none"
- }
- }
- }
-
- function download(f, e) {
- if(document.getElementById("pngcheck").checked) {
- var data = getBase64Image(e);
- let a = document.createElement('a')
- a.href = "data:application/octet-stream;base64," + data
- a.download = f.replace('.svg', '.png')
- a.click()
- } else {
- let a = document.createElement('a')
- a.href = f
- a.download = f
- a.click()
- }
- }
-
- // Actual magic
- function getBase64Image(img) {
- var canvas = document.createElement("canvas");
- canvas.width = img.naturalWidth;
- canvas.height = img.naturalHeight;
- console.log(canvas.width , canvas.height)
- var ctx = canvas.getContext("2d");
- ctx.drawImage(img, 0, 0);
- var dataURL = canvas.toDataURL("image/png");
- return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
- }
- </script>
- </body>
- </html>
|
