Cymk logo generator
How do I make an cymk logo generator?
Inspiered by irene hilber's http://www.benniweiss.ch/ logo. What is a cymk logo generator? How do you make a cymk logo generator? This script and codes were developed by David A. on 28 November 2022, Monday.
Cymk logo generator - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>cymk logo generator</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="logo"> <input type="color" v-bind:value="color" @change="setColor"/> <div class="scene"> <div class="logo__inner"> <div class="side c" v-bind:style="styleC"> <stonrg>c</stonrg> <div class="side y" v-bind:style="styleY"> <stonrg>y</stonrg> <div class="side m" v-bind:style="styleM"> <stonrg>m</stonrg> <div class="side k" v-bind:style="styleK"> <stonrg>k</stonrg> </div> </div> </div> </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.1.1/chroma.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Cymk logo generator - Script Codes CSS Codes
@import "https://fonts.googleapis.com/css?family=Space+Mono:700";
body { font-family: 'Space Mono', monospace; font-size: 6vw; line-height: 1; text-transform: uppercase;
}
input { position: absolute; left: 50%; top: 2rem; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.bg { width: 25vw; height: 25vw; position: absolute; top: 50%; left: 50%; border-radius: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.scene { -webkit-perspective: 1600; perspective: 1600; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-20vw, -10vw); transform: translate(-20vw, -10vw);
}
.logo__inner { position: relative; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate3d(0, 10vw, -1000px) rotateX(-5deg); transform: translate3d(0, 10vw, -1000px) rotateX(-5deg);
}
.side { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; left: 100%; top: 0; height: 10vw; width: 20vw; -webkit-transform-origin: 3px 50% 0; transform-origin: 3px 50% 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; border: solid currentColor; border-width: 6px 0; margin-top: -6px; border-left: 6px dashed currentColor; background: white; -webkit-transition: -webkit-transform 200ms cubic-bezier(0.25, 0.25, 0.525, 1.365); transition: -webkit-transform 200ms cubic-bezier(0.25, 0.25, 0.525, 1.365); transition: transform 200ms cubic-bezier(0.25, 0.25, 0.525, 1.365); transition: transform 200ms cubic-bezier(0.25, 0.25, 0.525, 1.365), -webkit-transform 200ms cubic-bezier(0.25, 0.25, 0.525, 1.365);
}
.side.y { -webkit-transition-delay: 200ms; transition-delay: 200ms;
}
.side.m { -webkit-transition-delay: 300ms; transition-delay: 300ms;
}
.side.k { -webkit-transition-delay: 400ms; transition-delay: 400ms;
}
.side:after { content: ''; position: absolute; right: -6px; top: -6px; bottom: -6px; border-left: 6px dashed currentColor;
}
.side.c { left: 0; -webkit-transform-origin: 100% 50% 0; transform-origin: 100% 50% 0; border-left: 6px solid currentColor;
}
.side.k { border-right: 6px solid currentColor;
}
.side.k:after { display: none;
}
.side strong { -webkit-transform-style: flat; transform-style: flat;
}
Cymk logo generator - Script Codes JS Codes
'use strict';
function translate(value, low1, high1, low2, high2) { return low2 + (high2 - low2) * ((value - low1) / (high1 - low1));
}
var logo = new Vue({ el: '.logo', data: { color: '#5c203e' }, computed: { cmyk: function cmyk() { return chroma(this.color).cmyk(); }, styleC: function styleC() { return this.getStyle('c'); }, styleY: function styleY() { return this.getStyle('y'); }, styleM: function styleM() { return this.getStyle('m'); }, styleK: function styleK() { return this.getStyle('k'); } }, methods: { setColor: function setColor(e) { this.color = e.target.value; }, getCMYK: function getCMYK(component) { var index = 'cmyk'.split('').indexOf(component); return { val: this.cmyk[index], i: index }; }, getRotationFromComponent: function getRotationFromComponent(component) { var cmyk = this.getCMYK(component); var rotation = translate(cmyk.val, 0, 1, -300, 300); return rotation + 'deg'; }, getStyle: function getStyle(component) { return { color: this.color, transform: 'rotateY(' + this.getRotationFromComponent(component) + ')' }; } }
});
Developer | David A. |
Username | meodai |
Uploaded | November 28, 2022 |
Rating | 3.5 |
Size | 4,415 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Color palette distribution for different color spaces | 10,909 Kb |
Textmask over random clouds animation | 3,929 Kb |
Animated scroll timeline | 5,222 Kb |
Easy Parallax, 9 lines of vanilla JS | 156,603 Kb |
Color Watch | 7,929 Kb |
Better Grrif Player | 8,512 Kb |
DOM explosions | 8,919 Kb |
Color fan | 117,778 Kb |
Trippy perlin | 3,161 Kb |
Pseudo 3d css clouds | 5,199 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by lizz | Lizz | 10,068 Kb |
BSP Dungeon Generation | Xgundam05 | 5,326 Kb |
Single element checkbox | Ivijaygupta | 1,996 Kb |
Drag and Drop Quiz | Cgspicer | 3,837 Kb |
Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
A Pen by Tosh | Panev | 2,586 Kb |
Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
BenU Maintenance Site | Ksherman | 4,893 Kb |
Test | Dviate | 2,668 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!