Distance Field Generation Demo Suppose we have a vector shape such as here I am using a simple rhombus for simplicity. The rhombus has four line segments So in order to generate distance field we calculate the distance of a point to the nearest edage of the shape. And we do this for each pixel in the image and the radius of the circle is used as the distance field value for each pixel.
Here is the actual distance field generated using msdfgen


Original on left. Generated on right

The only problem with this method is that they produce round corners while rendering. Here is an image showing this issue.
source
So in order to solve this Chlumsky suggested to use multiple color channel and divide the shape into multiple shapes. He has a detailed description on how this works in his paper which can also be found on his github page.