SVG neon effect

As follows:

It's like a circle of ants crawling on it ... Emmmmm's peculiar metaphor

Fill:none, you can make the shape not be filled, if you do not add this property, the default fill color is black, this effect

It's fun to find a range of properties for the stroke, filled with transparency and stroke-linecap, but this effect is mostly Stroke-dasharray and Stroke-dashoffset.

• stroke-miterlimitRepresents how a stroke intersects (acute). The default size is 4 . What is the meaning of angle loss of inclined bevel, the larger the value, the less the loss. I'm not sure what I'm doing. We can check other information.

• stroke-dasharrayRepresents a dashed line stroke. The optional values are: none , <dasharray> , inherit . Where the none expression is not a dashed line; <dasharray> a list of values separated by a comma or a space. Represents the length of each dashed end. It can be a fixed length value or a percentage value; inherit table inheritance.

• stroke-dashoffsetRepresents the starting offset of a dashed line. The optional values are: <percentage> , <length> inherit . Percent value, length value, inheritance.

• stroke-opacityRepresents the stroke transparency. The default is 1 .

Particularly admire the example of a vivid image cited by the author:

A ham sausage 12 cm, to draw a dashed line, dotted between 15 centimeters, if not dashoffset , then the ham sausage front 15 centimeters will be covered with chili sauce! Actually only 12 centimeters, so what we see is that the whole ham sausage has chili sauce. Now, it dashoffset is also 15 centimeters, that is, the dashed line to offset 15 centimeters, the result, the chili sauce to be wiped out of ham sausage, that is, ham sausage what chili sauce is not. If you switch to the straight line SVG above, the line is not visible. As we dashoffset gradually get smaller, we will find that the chili sauce on the ham sausage appeared at 1.1, as if the chili sauce had been smeared from the root of the ham and intestines.

<style type= "Text/css" > Body{background-color: #00688B;         }. text{font-size:64px;         Font-weight:normal;         Text-transform:uppercase;       Fill:none;        Stroke: #B0E0E6;    stroke-width:2px;    STROKE-DASHARRAY:90 310;    Animation:stroke 6s Infinite linear;        }. Text-1{stroke: #FFEC8B;        animation-delay:-1.5s;        text-shadow:5px 5px 5px #FFEC8B;            }. Text-2{stroke: #AEEEEE;             animation-delay:-3s;        text-shadow:5px 5px 5px #7FFFD4;        }. Text-3{stroke: #EEE0E5; animation-delay:-4.5s;text-shadow:5px 5px 5px #7FFFD4;        }. Text-4{stroke: #FFC1C1; animation-delay:-6s;text-shadow:5px 5px 5px #7FFFD4; } @keyframes Stroke {to {stroke-dashoffset:-400;}} </style><svg width= "100%" height= "> <text text-anchor=" Middle "x=" 50% "y=" 50% "class=" Text text-1 "& Gt Happy Birthday to </text> <text text-anchor= "Middle" x= "50%" y= "50%" class= "text text-2" > HAppy Birthday to you</text> <text text-anchor= "Middle" x= "50%" y= "50%" class= "text text-3" > Happy Birthda Y to a </text> <text text-anchor= "Middle" x= "50%" y= "50%" class= "text text-4" > Happy birthday to you </t Ext></svg>