Morphing Logo Concept
How do I make an morphing logo concept?
A proof of concept for a logo with a morphing component, made with GSAP's MorphSVG plugin. . What is a morphing logo concept? How do you make a morphing logo concept? This script and codes were developed by Tiffany Stoik on 28 November 2022, Monday.
Morphing Logo Concept - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Morphing Logo Concept</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='http://s3-us-west-2.amazonaws.com/s.cdpn.io/80729/helpers.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Montserrat:700);
body { background: #0e112d; color: white; font-family: 'Montserrat', sans-serif;
}
.wrapper { display: flex; align-items: center; height: 100vh;
}
h1 { order: 2; margin-left: -20vw; text-transform: uppercase; letter-spacing: 0.15em; font-size: 5.5vmin;
}
.frame-hidden { display: none;
}
svg { width: 100%; max-width: 50vw; max-height: 50vh;
}
.dot-pink { fill: #ff0084;
}
.dot-purple { fill: #a340b1;
}
.dot-turquoise { fill: #00f4e2;
}
.dot-blue { fill: #00b3fd;
}
.base { fill: none; stroke: url(#linear); stroke-miterlimit: 10; stroke-width: 4px;
}
.wordmark { fill: white;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrapper"> <h1>FakeCompany</h1> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 485"> <defs> <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#ff0084"/> <stop offset="25%" stop-color="#00afff" /> <stop offset="50%" stop-color="#00f4e2" /> <stop offset="75%" stop-color="#00afff" /> <stop offset="100%" stop-color="#ff0084"/> </linearGradient> </defs> <title>hologram AD concept D</title> <g id="Frame_5" class="frame-hidden"> <circle id="Frame_5_Dot_7" cx="266.54" cy="63.88" r="11.33"/> <circle id="Frame_5_Dot_6" cx="409.53" cy="63.88" r="11.33"/> <circle id="Frame_5_Dot_6copy" cx="409.53" cy="63.88" r="11.33"/> <circle id="Frame_5_Dot_5" cx="500.05" cy="172.67" r="11.33"/> <circle id="Frame_5_Dot_4" cx="468.05" cy="309.67" r="11.33"/> <circle id="Frame_5_Dot_3" cx="340.59" cy="370.67" r="11.33"/> <circle id="Frame_5_Dot_2" cx="214.54" cy="309.67" r="11.33"/> <circle id="Frame_5_Dot_1" cx="181.21" cy="172.67" r="11.33"/> <polygon id="Frame_5_Base" data-name="Frame 1 Base" class="base" points="412.61 57.5 502.4 170.1 470.35 310.51 340.6 373 210.84 310.51 178.79 170.1 268.58 57.5 412.61 57.5"/> </g> <g id="Frame_4" class="frame-hidden" data-name="Frame 4"> <circle id="Frame_4_Dot_1" cx="84.19" cy="180.05" r="11.33"/> <circle id="Frame_4_Dot_7" cx="539.19" cy="220.24" r="11.33"/> <circle id="Frame_4_Dot_4" cx="527.86" cy="417.38" r="11.33"/> <circle id="Frame_4_Dot_3" cx="373.96" cy="472.69" r="11.33"/> <circle id="Frame_4_Dot_2" cx="111.18" cy="349.81" r="11.33"/> <polygon id="Frame_4_Base" class="base" points="459.96 37.49 84.19 183.07 538.5 218.76 374.78 473.67 115.18 352.63 525.3 414.86 260.75 191.54 459.96 37.49"/> <circle id="Frame_4_Dot_6" cx="260.75" cy="191.54" r="11.33"/> <circle id="Frame_4_Dot_5" cx="464.36" cy="35.33" r="11.33"/> </g> <g id="Frame_3" class="frame-hidden" data-name="Frame 3"> <circle id="Frame_3_Dot_2" cx="11.33" cy="279.33" r="11.33"/> <circle id="Frame_3_Dot_1" cx="137.83" cy="189.33" r="11.33"/> <circle id="Frame_3_Dot_6" cx="332.83" cy="11.33" r="11.33"/> <circle id="Frame_3_Dot_5" cx="610.88" cy="22.67" r="11.33"/> <circle id="Frame_3_Dot_7" cx="429.06" cy="162" r="11.33"/> <circle id="Frame_3_Dot_3" cx="389.95" cy="425.97" r="11.33"/> <polygon id="Frame_3_Base" class="base" points="333.12 11.33 135.78 188.47 599.55 440.27 426.09 162.81 599.55 29.31 11.33 276.62 391.35 428.94 333.12 11.33"/> <circle id="Frame_3_Dot_4" cx="599.55" cy="440.27" r="11.33"/> </g> <g id="Frame_2" class="frame-hidden" data-name="Frame 2"> <polygon id="Frame_2_Base" class="cls-2" points="452.41 343.38 229.74 41.38 145.08 365.38 510.41 44.71 309.08 398.05 59.74 168.38 558.41 142.09 452.41 343.38"/> <circle id="Frame_2_Dot_2" cx="229.74" cy="41.38" r="11.33"/> <circle id="Frame_2_Dot_6" cx="59.74" cy="168.38" r="11.33"/> <circle id="Frame_2_Dot_1" cx="145.08" cy="365.38" r="11.33"/> <circle id="Frame_2_Dot_4" cx="309.08" cy="398.05" r="11.33"/> <circle id="Frame_2_Dot_7" cx="515.08" cy="38.71" r="11.33"/> <circle id="Frame_2_Dot_3" cx="452.41" cy="342.71" r="11.33"/> <circle id="Frame_2_Dot_5" cx="558.41" cy="142.09" r="11.33"/> </g> <g id="Frame_1" data-name="Frame 1"> <polygon id="Frame_1_Base" class="base" points="412.61 57.5 502.4 170.1 470.35 310.51 340.6 373 210.84 310.51 178.79 170.1 268.58 57.5 412.61 57.5"/> <circle id="Frame_1_Dot_8" class="dot-blue" cx="266.54" cy="63.88" r="11.33"/> <circle id="Frame_1_Dot_7" class="dot-blue" cx="409.53" cy="63.88" r="11.33"/> <circle id="Frame_1_Dot_6" class="dot-blue" cx="409.53" cy="63.88" r="11.33"/> <circle id="Frame_1_Dot_5" class="dot-pink" cx="500.05" cy="172.67" r="11.33"/> <circle id="Frame_1_Dot_4" class="dot-purple" cx="468.05" cy="309.67" r="11.33"/> <circle id="Frame_1_Dot_3" class="dot-turquoise" cx="340.59" cy="370.67" r="11.33"/> <circle id="Frame_1_Dot_2" class="dot-purple" cx="214.54" cy="309.67" r="11.33"/> <circle id="Frame_1_Dot_1" class="dot-pink" cx="181.21" cy="172.67" r="11.33"/> </g> </svg>
</div><!-- /.wrapper --> <script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TimelineMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Morphing Logo Concept - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
body { background: #0e112d; color: white; font-family: 'Montserrat', sans-serif;
}
.wrapper { display: flex; align-items: center; height: 100vh;
}
h1 { order: 2; margin-left: -20vw; text-transform: uppercase; letter-spacing: 0.15em; font-size: 5.5vmin;
}
.frame-hidden { display: none;
}
svg { width: 100%; max-width: 50vw; max-height: 50vh;
}
.dot-pink { fill: #ff0084;
}
.dot-purple { fill: #a340b1;
}
.dot-turquoise { fill: #00f4e2;
}
.dot-blue { fill: #00b3fd;
}
.base { fill: none; stroke: url(#linear); stroke-miterlimit: 10; stroke-width: 4px;
}
.wordmark { fill: white;
}
Morphing Logo Concept - Script Codes JS Codes
MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");
var colors = { pink: '#ff0084', purple: '#a340b1', turquoise: '#00f4e2', blue: '#00b3fd' }, duration = 3, easeFx = Power0.easeNone, tl = new TimelineMax({ repeat: -1, });
tl // frame 1 .add([ TweenLite.to("#Frame_1_Dot_1", duration, { ease: easeFx, morphSVG:"#Frame_2_Dot_1", fill: colors.blue }), TweenLite.to("#Frame_1_Dot_2", duration, { ease: easeFx, morphSVG:"#Frame_2_Dot_2", fill: colors.turquoise }), TweenLite.to("#Frame_1_Dot_3", duration, { ease: easeFx, morphSVG:"#Frame_2_Dot_3", fill: colors.blue }), TweenLite.to("#Frame_1_Dot_4", duration, { ease: easeFx, morphSVG:"#Frame_2_Dot_3", fill: colors.blue }), TweenLite.to("#Frame_1_Dot_5", duration, { ease: easeFx, morphSVG:"#Frame_2_Dot_5"}), TweenLite.to("#Frame_1_Dot_6", duration, { ease: easeFx, morphSVG:"#Frame_2_Dot_6", fill: colors.pink }), TweenLite.to("#Frame_1_Dot_7", duration, { ease: easeFx, morphSVG:"#Frame_2_Dot_4", fill: colors.turquoise }), TweenLite.to("#Frame_1_Dot_8", duration, { ease: easeFx, morphSVG:"#Frame_2_Dot_7", fill: colors.purple }), TweenLite.to("#Frame_1_Base", duration, { ease: easeFx, morphSVG:"#Frame_2_Base"}) ]) // frame 2 .add([ TweenLite.to("#Frame_1_Dot_1", duration, { ease: easeFx, morphSVG:"#Frame_3_Dot_6", fill: colors.turquoise }), TweenLite.to("#Frame_1_Dot_2", duration, { ease: easeFx, morphSVG:"#Frame_3_Dot_1", fill: colors.blue }), TweenLite.to("#Frame_1_Dot_3", duration, { ease: easeFx, morphSVG:"#Frame_3_Dot_4", fill: colors.pink }), TweenLite.to("#Frame_1_Dot_4", duration, { ease: easeFx, morphSVG:"#Frame_3_Dot_7"}), TweenLite.to("#Frame_1_Dot_5", duration, { ease: easeFx, morphSVG:"#Frame_3_Dot_5"}), TweenLite.to("#Frame_1_Dot_6", duration, { ease: easeFx, morphSVG:"#Frame_3_Dot_2"}), TweenLite.to("#Frame_1_Dot_7", duration, { ease: easeFx, morphSVG:"#Frame_3_Dot_3"}), TweenLite.to("#Frame_1_Dot_8", duration, { ease: easeFx, morphSVG:"#Frame_3_Dot_6", fill: colors.turquoise }), TweenLite.to("#Frame_1_Base", duration, { ease: easeFx, morphSVG:"#Frame_3_Base"}) ]) // frame 3 .add([ TweenLite.to("#Frame_1_Dot_1", duration, { ease: easeFx, morphSVG:"#Frame_4_Dot_5", fill: colors.blue }), TweenLite.to("#Frame_1_Dot_2", duration, { ease: easeFx, morphSVG:"#Frame_4_Dot_6", fill: colors.turquoise }), TweenLite.to("#Frame_1_Dot_3", duration, { ease: easeFx, morphSVG:"#Frame_4_Dot_4" }), TweenLite.to("#Frame_1_Dot_4", duration, { ease: easeFx, morphSVG:"#Frame_4_Dot_2", fill: colors.purple}), TweenLite.to("#Frame_1_Dot_5", duration, { ease: easeFx, morphSVG:"#Frame_4_Dot_3", fill: colors.turquoise }), TweenLite.to("#Frame_1_Dot_6", duration, { ease: easeFx, morphSVG:"#Frame_4_Dot_7"}), TweenLite.to("#Frame_1_Dot_7", duration, { ease: easeFx, morphSVG:"#Frame_4_Dot_1", fill: colors.pink }), TweenLite.to("#Frame_1_Dot_8", duration, { ease: easeFx, morphSVG:"#Frame_4_Dot_5"}), TweenLite.to("#Frame_1_Base", duration, { ease: easeFx, morphSVG:"#Frame_4_Base"}) ]) // frame 4 .add([ TweenLite.to("#Frame_1_Dot_1", duration, { ease: easeFx, morphSVG:"#Frame_5_Dot_6", fill: colors.blue }), TweenLite.to("#Frame_1_Dot_2", duration, { ease: easeFx, morphSVG:"#Frame_5_Dot_7", fill: colors.blue }), TweenLite.to("#Frame_1_Dot_3", duration, { ease: easeFx, morphSVG:"#Frame_5_Dot_1", fill: colors.pink }), TweenLite.to("#Frame_1_Dot_4", duration, { ease: easeFx, morphSVG:"#Frame_5_Dot_2", fill: colors.purple }), TweenLite.to("#Frame_1_Dot_5", duration, { ease: easeFx, morphSVG:"#Frame_5_Dot_3", fill: colors.turquoise }), TweenLite.to("#Frame_1_Dot_6", duration, { ease: easeFx, morphSVG:"#Frame_5_Dot_4", fill: colors.purple }), TweenLite.to("#Frame_1_Dot_7", duration, { ease: easeFx, morphSVG:"#Frame_5_Dot_5", fill: colors.pink }), TweenLite.to("#Frame_1_Dot_8", duration, { ease: easeFx, morphSVG:"#Frame_5_Dot_6", fill: colors.blue }), TweenLite.to("#Frame_1_Base", duration, { ease: easeFx, morphSVG:"#Frame_5_Base"}) ]);
Developer | Tiffany Stoik |
Username | tstoik |
Uploaded | November 28, 2022 |
Rating | 3 |
Size | 4,693 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 |
ATC Vintage Radio Flip Clock | 9,722 Kb |
One element four color loader | 2,765 Kb |
Twirling Flower | 4,081 Kb |
Rainbow Infinity Loader | 3,639 Kb |
Chevron BG Pattern | 2,374 Kb |
Hexagon Grid | 5,712 Kb |
8-bit Hovers | 146,179 Kb |
ATC Throwback Packs | 9,363 Kb |
Hexagon Loader | 3,261 Kb |
Animated Logo | 3,203 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 |
Particle Motion trajectories | Sniejadlik | 5,899 Kb |
My Interests | Anshusaxenaarora | 2,015 Kb |
Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Whyutils | LeYvan | 3,752 Kb |
CSS background-size - GSAP | Jonathan | 2,209 Kb |
A Pen by Brendan Skousen | Bskousen | 2,954 Kb |
A Pen by panstable | Panstable | 2,940 Kb |
A Pen by Anoop | Anoopjohn | 330,760 Kb |
Improve | Gavra | 1,652 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!