SVG neon effect

The rendering is as follows:

It’s like a circle of ants crawling on it. . . . . emmmmm strange metaphor

fill:none; can prevent the graphics from being filled. If this attribute is not added, the default fill color is black. This effect

finds that the stroke attributes are all It’s very interesting, there are fill, transparency and stroke-linecap, but the most commonly used effects are stroke-dasharray and stroke-dashoffset.

• stroke-miterlimit Indicates the expression of stroke intersection (acute angle). The default size is 4. What does the angle loss of bevel to bevel mean? The larger the value, the smaller the loss. Exactly what it does, I'm not sure. You can check other information.

• stroke-dasharray represents a dashed stroke. Optional values ​​are: none, <dasharray>, inherit. Among them, none means not a dashed line; < dasharray> is a comma or space separated list of values. Indicates the length of each dotted line end. It can be a fixed length value or a percentage value; inheritTable inheritance.

• stroke-dashoffset represents the starting offset of the dashed line. Optional values ​​are: <percentage>, <length>, inherit. Percentage value, length value, inheritance.

• stroke-opacity represents stroke transparency. The default is 1.

I particularly admire the vivid example listed by the author:

A ham sausage is 12 cm long and needs to be painted on it Dotted line, the interval between the dotted lines is 15cm. If there is no dashoffset, the front 15cm of the ham sausage will be covered with chili sauce! It's actually only 12 centimeters, so what we're seeing is the whole sausage with chili sauce. Now, dashoffset is also 15 centimeters, that is, the dotted line should be shifted back 15 centimeters. As a result, the chili sauce should be applied outside the ham sausage, which means there is no chili sauce on the ham sausage. If you change it to the straight line SVG above, the straight line will no longer be visible. When we gradually make the dashoffset value smaller, we will find that the chili sauce on the ham sausage appears little by little, as if the chili sauce is 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: 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="100">   
 <text text-anchor="middle" x="50%" y="50%" class="text text-1" > Happy birthday to you❤ </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 birthday to you❤ </text>
 <text text-anchor="middle" x="50%" y="50%" class="text text-4" > Happy birthday to you❤ </text>
</svg>

The above is the detailed content of SVG neon effect. For more information, please follow other related articles on the PHP Chinese website!