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 fan | 117,778 Kb |
We Simplify animation | 48,169 Kb |
Cubehelix ticktack.js | 5,643 Kb |
Social color-namer | 6,112 Kb |
Media Queries on Crack | 8,319 Kb |
Pseudo 3d css clouds | 5,199 Kb |
Easy Parallax, 9 lines of vanilla JS | 156,603 Kb |
All the 16k color names from the color-name-list API | 6,006 Kb |
Different centering methods | 7,504 Kb |
Trippy perlin | 3,161 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 |
Subtle site navigation with description | Necks | 3,206 Kb |
Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
Pure CSS Tooltip | APinix | 2,815 Kb |
Playing with transition timing | Mattgrosswork | 1,993 Kb |
We Simplify animation | Meodai | 48,169 Kb |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
A Pen by Miro Olma | Programiro | 2,342 Kb |
Heartbeat | Apetrov | 2,079 Kb |
CardMove | Thompsonemerson | 3,699 Kb |
Blog demo to use given styling | Andygirl | 2,412 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!