The current logo design
After graduation (April 2024), I redesigned the latest logo (the fifth one), consisting of yellow “m” and blue “w” from my name: Mingwen, symbolizing mountains and oceans. The vibrant colors combined with flexible lines expressed my longing for the future.
The origin of the logo comes from the first character of my Chinese name, meaning “to remember.” However, many people do not know Chinese, it was quickly abandoned.
Then I start with the spelling of my name. “M” and “W” are the most significant sounds in my name, so I combined the uppercase “MW” to create this distinctive symbol.
On the basis of the original pattern, colours and shadows were added, enhancing the overall logo with a sense of depth.
To facilitate animations, digital versions, and enhance visual presentation, a minimalist design with pure colours and polylines was adopted.
First of all, we need a logo, which not only requires a strong recognition, but also easy to make. In this way, it is easy and convenient for us to make digital animation.
Logo loading animation production
In the second part, I need to draw a vector image on the ai, then convert it to svg format, find the path of its lines (by coding in polylines or path) through coding software, and copy it into the html and css files I created. There are some websites that share animations that can help us achieve better css animations.
Select some effects we like, copy their html and css code, and integrate animations with the help of chatcpt.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.html">
<title>SVG Path</title>
</head>
<body>
<div class="loading">
<div class="loader">
<svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg" class="loader">
<path id="logo1" pathLength="360" d="M14.2,43.75 L47.5,103.65 62.7,76.25 77.8,103.65 111.1,43.75" stroke="#2ea8e0" fill="none"></path>
<path id="logo2" pathLength="360" d="M14.2,76.25 47.5,16.35 62.7,43.75 77.8,16.4 111.1,76.3" stroke="#f18904" fill="none"></path>
<path id="logo3" pathLength="360" d="M14.2,43.75 L47.5,103.65 62.7,76.25 77.8,103.65 111.1,43.75" stroke="#2ea8e0" fill="none"></path>
<path id="logo4" pathLength="360" d="M14.2,76.25 47.5,16.35 62.7,43.75 77.8,16.4 111.1,76.3" stroke="#f18904" fill="none"></path>
</svg>
</div>
<div class="ui">
<div class="ui-text">
Mingwen is trying to open the web
<div class="ui-dot"></div>
<div class="ui-dot"></div>
<div class="ui-dot"></div>
</div>
</div>
</div>
<script>
$(window).on("load",function(){
$("loading"). fadeOut("slow");
});
</script>
</body>
</html>
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.loader {
stroke-width: 8px;
stroke-linecap: bevel;
stroke-linejoin: bevel;
animation: anime 4s linear infinite;
fill: none;
}
.loader svg path#logo1 {
fill: none;
stroke: #2ea8e073;
}
.loader svg path#logo2 {
fill: none;
stroke: #f18a0490;
}
.loader svg path#logo3 {
fill: none;
stroke: #2ea8e0;
stroke-dasharray: 65, 135;
animation: anim1 2s linear infinite;
}
.loader svg path#logo4 {
fill: none;
stroke: #f18904;
stroke-dasharray: 65, 135;
animation: anim2 2s -1s linear infinite;
}
@keyframes anim1 {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 200;
}
}
@keyframes anim2 {
from {
stroke-dashoffset: 200;
}
to {
stroke-dashoffset: 0;
}
}
.ui {
--primary: #000000;
--secondary: rgba(255, 255, 255, 0.3);
--shadow-blur: 3px;
--text-shadow-blur: 3px;
--animation-duration: 2s;
--size: 1;
}
.ui {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 30px;
scale: var(--size);
}
.ui .ui-text {
color: var(--primary);
text-shadow: 0 0 var(--text-shadow-blur) var(--secondary);
font-family: Menlo, sans-serif;
display: flex;
align-items: baseline;
column-gap: 3px;
}
.ui-dot {
content: "";
display: block;
width: 3px;
height: 3px;
animation: dots var(--animation-duration) infinite linear;
animation-delay: .4s;
background-color: var(--primary);
border-radius: 50%;
}
.ui-dot:nth-child(2) {
animation-delay: .8s;
}
.ui-dot:nth-child(3) {
animation-delay: 1.2s;
}
.ui-dot + .ui-dot {
margin-left: 3px;
}
@keyframes dots {
0% {
background-color: var(--secondary);
}
30% {
background-color: var(--primary);
}
70%, 100% {
background-color: var(--secondary);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.html">
<title>MW + Mingwen</title>
</head>
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
position: relative;
}
.logo1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.logo2 {
z-index: 5;
}
.text {
font-size: 3em;
position: absolute;
top: 49%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 10px;
z-index: 4;
background-color: white;
border-radius: ;
}
.text span:nth-child(1) {
color: #EB6100;
}
.text span:nth-child(2) {
color: #036EB8;
}
@media screen and (max-width: 768px) {
.loading {
transform: scale(1.2);
}
}
</style>
<body>
<div class="loading">
<div class="loader">
<svg class="logo1" xmlns="http://www.w3.org/2000/svg" width="433" height="364" fill="none">
<path d="M302.5 0L279.167 41.6667L239.167 114.167L192.917 113.75L216.25 72.0833L256.25 0H302.5Z" fill="#EB6100"/>
<path d="M216.25 72.0833L192.917 113.75L152.917 41.6667L176.25 0L216.25 72.0833Z" fill="#F18904"/>
<path d="M176.25 0L152.917 41.6667L176.25 0Z" fill="#EB6100"/>
<path d="M176.667 363.333H130L193.333 249.167H239.583" fill="#036EB8"/>
<path d="M279.583 321.667L256.25 363.333L216.25 291.25L239.583 249.167L279.583 321.667Z" fill="#2EA7E0"/>
<path d="M52.5003 139.583L23.3337 87.5L0.416992 129.167L29.5837 181.25L52.5003 139.583Z" fill="#2EA7E0"/>
<path d="M153.333 321.667L75.8333 181.25L52.5 223.333L130 363.333" fill="#2EA7E0"/>
<path d="M380 140L302.5 0L279.167 41.6667L357.084 181.667L380 140Z" fill="#F18904"/>
<path d="M380 223.333L409.167 275.417L432.083 233.75L402.917 181.667L380 223.333Z" fill="#F18904"/>
<path d="M176.25 0L152.917 41.6667L23.3333 276.25L0 234.583L130 0H176.25Z" fill="#EB6100"/>
<path d="M432.5 128.75L302.5 363.333H256.25L279.583 321.667L409.167 87.0835L432.5 128.75Z" fill="#036EB8"/>
</svg>
<svg class="logo2" xmlns="http://www.w3.org/2000/svg" width="433" height="364" fill="none">
<path d="M302.5 0L279.167 41.6667L239.167 114.167L192.917 113.75L216.25 72.0833L256.25 0H302.5Z" fill="#EB6100"/>
<path d="M216.25 72.0833L192.917 113.75L152.917 41.6667L176.25 0L216.25 72.0833Z" fill="#F18904"/>
<path d="M176.25 0L152.917 41.6667L176.25 0Z" fill="#EB6100"/>
<path d="M176.667 363.333H130L193.333 249.167H239.583" fill="#036EB8"/>
<path d="M279.583 321.667L256.25 363.333L216.25 291.25L239.583 249.167L279.583 321.667Z" fill="#2EA7E0"/>
<path d="M52.5003 139.583L23.3337 87.5L0.416992 129.167L29.5837 181.25L52.5003 139.583Z" fill="#2EA7E0"/>
<path d="M153.333 321.667L75.8333 181.25L52.5 223.333L130 363.333" fill="#2EA7E0"/>
<path d="M380 140L302.5 0L279.167 41.6667L357.084 181.667L380 140Z" fill="#F18904"/>
<path d="M380 223.333L409.167 275.417L432.083 233.75L402.917 181.667L380 223.333Z" fill="#F18904"/>
<path d="M176.25 0L152.917 41.6667L23.3333 276.25L0 234.583L130 0H176.25Z" fill="#EB6100"/>
<path d="M432.5 128.75L302.5 363.333H256.25L279.583 321.667L409.167 87.0835L432.5 128.75Z" fill="#036EB8"/>
</svg>
</div>
<p class="text"><span>M</span>ing<span>w</span>en</p>
</div>
</body>
</html>
.text {
font-weight: bolder;
color: black;
position: absolute;
text-align: center;
}
.logo2 {
animation: anime 1.5s infinite;
}
@keyframes anime {
0% {
transform: scale(1);
opacity: 0.6;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
Mingwen
Reference：
https://uiverse.io/loaders
https://code.visualstudio.com/
ChatGPT3.5
Top bar design
Applies only to computers.
Reference:
https://www.bilibili.com/read/cv18763773/
ChatGPT3.5 helps me write the code as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" >
<title>2rd top bar</title>
<style>
*{
list-style: none;
padding: 0;
margin: 0;
text-decoration: none;
}
.nav{
width: 101%;
height: 70px;
position: relative;
top: 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
background-color: #fff;
}
.nav ul{
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.nav ul .nav-box{
position: absolute;
bottom: 0;
left: 0;
width: calc((100% / 8)*1);
height: 10px;
border-radius: 2px;
transition: .4s;
padding: 0 2%;
justify-content: space-between;
}
.nav ul li{
text-align: center;
display: flex;
align-items: center;
width: calc(100% / 8);
justify-content: certer; /
}
.nav ul li a{
color: rgb(70, 100, 180);
font: 100 30px;
display: inline-block;
width: 100%;
height: 100%;
line-height: 70px;
font: 100 18px
}
.nav ul li:nth-child(4):hover~.nav-box{
left: calc(100% / 8 *3);
background-color: #48A0F2;
}
.nav ul li:nth-child(5):hover~.nav-box{
left: calc(100% / 8 *4);
background-color: #48A0F2;
}
.nav ul li:nth-child(6):hover~.nav-box{
left: calc(100% / 8 *5);
background-color: #48A0F2;
}
.nav ul li:nth-child(7):hover~.nav-box{
left: calc(100% / 8 *6);
background-color: #48A0F2;
}
.nav ul li:nth-child(8):hover~.nav-box{
left: calc(100% / 8 *7);
background-color: #48A0F2;
}
.nav ul li a.link {
text-decoration: none; /*
color: inherit;
.nav ul li a.link:hover {
color: inherit; /*
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li style="margin-top: 1em;" >
<h3 style="white-space: nowrap;">This is the Second generation page bar</h3>
</li>
<li></li>
<li></li>
<li><b><a href="../index.html" class="link">Logo design
</a></b></li>
<li><b><a href="../index.html" class="link">Load animation</a></b></li>
<li><b><a href="../index.html" class="link">Top bar design</a></b></li>
<li><b><a href="../index.html" class="link">Web content</a></b></li>
<li><b><a href="../index.html" class="link">New think</a></b></li>
<div class="nav-box"></div>
</ul>
</div>
</body>
</html>
Quick way to adapt to mobile terminal (rotate screen)
Reference：https://www.cnblogs.com/good10000/p/10598152.htmlR