Millet new logo is recently caused a new round of ridicule and revelry, the value of two million design logo charges, sense of life and hyperelliptic, although it said know “knock a hammer is not valuable, know where to knock the rare”, but the effect of the similar desktop theme ICONS or make some netizen “I I also go on”, so, On April 1, when you can dream about anything, try making $2 million. Want to know how to make 2 million generators? Go to the bottom, how could I lie to you and put the code involved here: CodePen

Fishing in the flow

Stay true to your roots and go back to the days of Chituza, regardless of browser compatibility differences,imgJust one word. I’ll type it once

CSS flow

Use the rounded



The reason of life, radius between, so useborder-radiusImplementing this philosophy is the best choice, according toThe discovery of station VWhen the new logo was just released, the official website was simply added a rounded corner on the basis of the old one, which reflects the philosophy of relaxation and moderation, wonderful wonderful

Using a mask

According to the designers, the new icon’s superellipse comes from|X|^n+|y|^n=1This formula, it seems that it is really difficult to draw directly, so use mask to solve it on the basis of the design drawing

This time the mask will look like this:

What is a maskMDNIf you want to know how to use it better, you can readFantastic CSS MASKMask is a CSS property that can be cropped using an image or SVG, that is, if you want the image to be cropped like this, you can use itmask-imageTo import the mask, and then setmask-sizeMake it fit

#img-mask{
    position: relative;
  width: 100px;
  height: 100px;
  background-image: url("https://i.loli.net/2021/04/01/E8Rk27LPWNIbwBH.png");
  background-size:100% 100%;
  background-position: center;
  -webkit-mask-image: url("data:image/svg+xml; base64,PHN2ZyB3aWR0aD0iMzAxIiBoZWlnaHQ9IjMwMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkP SJNMTUwLjUyNyAzMDAuMjY4Yy0yMy44MDktLjMtNDcuNTg4LS40OC03MS4wOTctNS40ODdhOTIuMjcgOTIuMjcgMCAwMS03My4wNzYtNzQuMjc2IDM3OS4xM TYgMzc5LjExNiAwIDAxLjA2LTEzOC41MzZjNy43NjYtNDAuOTAxIDMzLjcwNC02NS45NyA3NC4xNTUtNzQuOTY2QzExNi40OTMtLjg4MyAxNTIuOTI2LjU4N iAxODkuNDIgMi41NjVjMjAuNzUxIDEuMTQgNDAuODcxIDUuMDY4IDU5LjQ2MyAxNS4yMzMgMjQuNDk4IDEzLjQ5NCAzOC42NTIgMzQuNzU0IDQ0Ljc5OSA2M S41MDIgOC4wNjYgMzUuMjA0IDYuNjU3IDcxLjAwNyA1LjE4OCAxMDYuNzIxYTE2NC45NDIgMTY0Ljk0MiAwIDAxLTguNjk2IDQ4LjU0NyA4OC4wNCA4OC4wN CAwIDAxLTU1LjQ0NSA1NS45MjVjLTIxLjYyIDcuOTQ2LTQ0LjE2OSA4Ljk5NS02Ni44MzkgOS43NzUtNS43ODcuMTUtMTEuNTc0IDAtMTcuMzYyIDB6IiBma WxsPSIjMDAwIi8+PC9zdmc+");
  -webkit-mask-size:100% 100%;
}
Copy the code

Using pseudo-elements

In order to save your traffic, we can also use the flow saving master to provide you with hd and save traffic experience, next try using CSS only to draw the middle MI word, code from stevenlei first, to achieve the outline of the letter M, and then solve the two I.



Because it’s like a rectangle, it can be usedborderTo implement. use::beforeTo draw on the element, draw the arch by setting the size of the four edges, then for the radian in the upper right corner, useborder-top-right-radiusSeparate, of course, for the upper left Angle.

#div-box-shadow::before {
  content: ' ';
  display: block;
  position: absolute;
  width: 45px;
  height: 41px;
  top: 30px;
  left: 18px;
  
  box-sizing: border-box;
  
  border-color: #fff;
  border-style: solid;
  
  border-left-width: 10px;
  border-right-width: 10px;
  border-top-width: 8px;
  border-radius: 2px;
  border-top-right-radius: 10px;
  border-top-left-radius: 0px;
  border-bottom-width: 0;
}
Copy the code

Next, implement two lines.



But these two lines have different lengths, so how do you represent them with a pseudo-element? (after all,::beforeWe turn our eyes to nbox-shadow

box-shadowIntroduction to seeMDNThe basic syntax is as follows

/ * x offset | y offset | shadow color * /
box-shadow: 60px -16px teal;

/ * x offset | y offset | | fuzzy shadow radius shadow color * /
box-shadow: 10px 5px 5px black;

/ * x offset | y offset | | | fuzzy shadow radius shadow diffusion radius of the shadow color * /
box-shadow: 2px 2px 2px 1px rgba(0.0.0.0.2);

/ * insert (shadow) inward offset | y | x offset | shadow color * /
box-shadow: inset 5em 1em gold;

/* Any number of shadows separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4 em olive;

/* Global keyword */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
Copy the code

Therefore, once we set the width and height to draw a small pseudo square, we can splice two rectangles by drawing multiple shadows without blurring (shadow duplicates) and setting offsets

#div-box-shadow::after {
  content: ' ';
  display: block;

  position: absolute;
  width: 12px;
  height: 17px;
  top: 47px;
  left: 35px;
  background-color: #fff;
  
  border-radius: 2px;
  
  box-shadow: 0px 7px 0px 0px #fff.35px -17px 0px 0px #fff.35px -4px 0px 0px #fff.35px 8px 0px 0px #fff;
}
Copy the code

The combined effect is as follows

SVG flow

For this simple logo, let’s try drawing in SVG. See MDN for an introduction to SVG. To learn how to draw Paths in SVG elements, read MDN-Paths. It’s essentially moving the brush around to connect, to get a geometric outline. For the “superellipse” outside, there are two ways to implement it. First of all, given the generated formula | | X ^ 3 + | y | ^ 3 = 1, then you can calculate the multiple points for fitting first, and then in turn connected, but because not enough grace, we use the bezier curve to draw, if interested, strongly recommend reading this introduction, copied below some key parts

  • The control point is not always on the curve
  • The order of the curve is equal to the number of control points minus one. For two points we can get a linear curve (straight line), three points – a second-order curve, and four points – a third-order curve.
  • The curve is always inside the convex hull of the control point



How do I get a curve from a control point? The process is as follows

  1. Draw control points. In the demo above, they are labeled: 1, 2, and 3.

  2. Create a line segment between control points 1 → 2 → 3. They are brown in the above demo.

  3. The parameter t varies from 0 to 1. Value 0.05 in the demo above: loop through 0, 0.05, 0.1, 0.15… 0.95, 1.

  4. For each t: for each brown line segment we take a point, the distance from the starting point is proportional to t. And since we have two line segments, we get two points.

    For example, when t=0 — all points are at the beginning of the segment, when t=0.25 — the distance from the point to the beginning is 25% of the segment length, when t=0.5 — 50% (middle), when t=1 — the end of the segment. Connect the dots, and in the figure below the connected lines are drawn in blue.

  5. Now I’m going to take a point on the blue segment, and I’m going to take t of the same magnitude. That is, when t=0.25 (left image), we get the point at the left quarter of the end of the segment, and when t=0.5 (right image) — the middle of the segment. This point is red in the figure above.

  6. As t goes from 0 to 1, each value of t adds a point to the curve. The collection of these points forms the Bezier curve. It is red in the diagram above and has a parabolic shape.

Going back to the front, if we want to draw a simple arc, we create the path element and then use the quadratic Bezier curve command Q to draw it. The first two terms are the difference in position relative to the previous point, so before drawing the first Q, we need to move to a starting point.

 Q x1 y1, x y
 (or)
 q dx1 dy1, dx dy
Copy the code



The code is as follows, from:hyrious

  <svg viewBox="0 0 100 100" style="width: 100px; height: 100px">
        <path fill="#ff6700" d="M 50,10 q 40,0 40,40 q 0, 40-40, 40-40, 0-40,-40 q 0,-40 40,-40 40,-40" />
        <path fill="transparent" stroke="white" stroke-width="6" d="M 31,36 v 30 M 31,39 h 17 a 8,8,90,0,1,8,8 v 19 M 43.5,48 v 18 M 68,36 v 30" />
    </svg>
Copy the code

Among them,50, 10 MThat’s 50,10,Q 40, 0 40, 40That is, the control point is 40px difference in x based on the previous point, and40, 40As the end of this curve. So you can plot one50, 10->40, 40, the control point is90,And so on. For other instructions to draw a straight lineLook it up when you need it

It looks like this (which is pretty neat and nice) :

CANVAS flow

This is very rough, and export in mapping the press table, how to inject the soul, you can use the CTX. GlobalCompositeOperation to set up the image overlay mapping logic, such as using

ctx.globalCompositeOperation = "destination-in";
Copy the code

You can keep only the pixels on the old layer that do not correspond to the transparent pixels on the new layer, similar to a mask, along with various other options to achieve a multi-bell blending effect. The code is as follows:

let c,ctx;
function handlePicUpload(e){
    const file  = e.files[0];// When the image is uploaded
    url = URL.createObjectURL(file);
    console.log(url)//blob:
    let img = new Image();
    c=document.getElementById("canvas-logo");// This is a canvas
    ctx=c.getContext("2d");
	img.onload = function(){
		ctx.drawImage(img,0.0.100.100);// Draw the original image first
        ctx.globalCompositeOperation = "destination-in";// Change to mask mode
        let mask = document.getElementById("mask");// Get a mask worth $2 million
        ctx.drawImage(mask,0.0.100.100);
        let exportBtn = document.getElementById("export-btn");
        exportBtn.disabled = false;
	}
    img.src=url;
    e.value=' ';
}
function handlePicExport(){// Export the canvas content
    console.log(c)
    c.toBlob(function(blob) {
        console.log(blob)
      let link = document.createElement('a');
      link.download = 'two_million.png';
      link.href = URL.createObjectURL(blob);
      link.click();
      URL.revokeObjectURL(link.href);// Destroy the bloB to free memory
    }, 'image/png');
}
Copy the code

And you’re done! Now you can upload your avatar, and then make it instantly worth millions, isn’t that the two million generator we all like? (No) But if you rub heat to do a small program, is to give avatar a 200W Buff, maybe accidentally popular…