SVG neon effect, svg neon

SVG neon effect, svg neon

When you visit segmentfault on the subway, you can see a very good effect achieved with pure css and SVG. I think it should be good to make some opening effect animations.

Address: https://segmentfault.com/a/1190000010963326

I think it is very interesting. As soon as 925 is approaching, I just got a happy birthday.

As follows:

 

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

Fill: none; this attribute prevents the image from being filled. If this attribute is not added, the default fill color is black.

It is found that stroke's series of attributes are very interesting. Fill, transparency, and stroke-linecap, but the most useful effect is stroke-dasharray and stroke-dashoffset.

Introduction: http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%84/

• stroke-miterlimitRepresents the expression of stroke intersection (acute angle. The default size is4The larger the value, the smaller the loss. I am not sure what it is. You can check other information.
• stroke-dasharrayVirtual Line stroke. Optional values:none,<dasharray>,inherit. Where,noneIt indicates that it is not a dotted line;<dasharray>A list of values separated by commas (,) or spaces. The length of each dotted line. It can be a fixed length value or a percentage value;inheritTable inheritance.
• stroke-dashoffsetThe starting offset of the dotted line. Optional values:<percentage>,<length>,inherit. Percentage value, length value, inherit.
• stroke-opacityIndicates the stroke transparency. The default value is1.

I particularly admire the vivid examples listed by the author:

Draw a dotted line on the top of a ham sausage with a interval of 12 cm. If there is nodashoffset, Then the first 15 cm of the ham sausage will be covered by chili sauce! In fact, there is only 12 cm, so we can see that the whole ham sausage has chili sauce. Now,dashoffsetIt is also 15 cm, that is, the dotted line needs to shift back to 15 cm. As a result, the chili sauce should be wiped out of the ham sausage, that is, there is no chili sauce on the ham sausage. If it is replaced with the above line SVG, that is, the line is invisible. We setdashoffsetThe value gradually decreases, and you will find that the chili sauce on the ham sausage appeared at, as if the chili sauce was smeared from the root of the ham sausage.

 

<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: 310;

Animation: stroke 6 s infinite linear;
}

. Text-1 {
Stroke: # FFEC8B;
Animation-delay:-1.5 s;
Text-shadow: 5px 5px 5px # FFEC8B;
}
. Text-2 {
Stroke: # AEEEEE;
Animation-delay:-3 s;
Text-shadow: 5px 5px 5px #7FFFD4;
}
. Text-3 {
Stroke: # EEE0E5;
Animation-delay:-4.5 s;
Text-shadow: 5px 5px 5px #7FFFD4;
}
. Text-4 {
Stroke: # FFC1C1;
Animation-delay:-6 s;
Text-shadow: 5px 5px 5px #7FFFD4;
}
@ Keyframes stroke {
To {
Stroke-dashhoffset:-400;
}
}

</Style>

<Svg width = "100%" height = "100">
<Text-anchor = "middle" x = "50%" y = "50%" class = "text-1">
Happy birthday to you
</Text>
<Text-anchor = "middle" x = "50%" y = "50%" class = "text-2">
Happy birthday to you
</Text>
<Text-anchor = "middle" x = "50%" y = "50%" class = "text-3">
Happy birthday to you
</Text>
<Text-anchor = "middle" x = "50%" y = "50%" class = "text-4">
Happy birthday to you
</Text>
</Svg>

 

You only need to use the stroke and fill in svg to achieve this. The debugging of various numeric patterns is surprising! ✿ ヽ (° ▽ °) ノ ✿

Put some links to SVG basic knowledge for your reference: http://www.w3cplus.com/svg/svg-fill-stroke.html