A, the past
A few years ago, I was lucky enough to go to Dongguan on a business trip. Like a naive child, I looked out the window at the bright neon sign and felt restless. The scene, like the mysterious whirlpool, sucked me in. I licked my lips, picked up a business card from under the door, and dialed a number I’d never made before:……
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — to force line — — — — — — — — — — — — — — — — — — — — — — — — — –
Two, make the next word
Before we begin, we need to think about what makes neon lights tick. When I was in Dongguan, due to the lack of blood supply above, I only thought of two, one is to have words, the other is to shine. Let’s get the words out first.
body {
background: # 000000;
margin: 0;
font-family: Helvetica, sans-serif;
overflow: hidden;
}
.texta-front {
font-family: YouYuan;
font-size: 64px;
font-weight: normal;
text-transform: uppercase;
fill: #db94f7;
}
<svg width="600" height="250">
<text text-anchor="middle" x="30%" y="50%" class="texta-front"> </text> </ SVG >Copy the codeIn order to reflect the neon light, I changed the background to black and used the text of SVG with the following attributes:
- Text-anchor: Text anchor property, used to describe the alignment of the text with the given point (beginning, middle, end alignment).
- X, y: represents the x and y coordinates of the current element relative to SVG, which can be expressed as percentages.
- Class: You can set attributes directly in CSS and then class them into SVG
Let’s look at CSS. In order to reflect the neon effect, I chose a long and thin font. Here, in order to let most people see, I chose a small round font installed with Office. And this is what it looks like
Obviously, it’s not going to work, it’s not going to shine, it’s just plain text, start shining.
.texta-front {
font-family: YouYuan;
font-size: 64px;
font-weight: normal;
text-transform: uppercase;
stroke: #db94f7;
stroke-width: 2px;
text-shadow: 0px 0px 10px #e2b2f5;
}Copy the codeHere I added the text-shadow effect. In order to enhance the neon effect, I changed the word “fill” into “stroke”. For stroke, here’s a note:
- Stroke: Sets the color of the line that draws the object. I’m going to use it for stroke here.
- Stroke-width: The line width of the stroke.
There are other things that stroke does that we’ll use later. The end result is this.
Three, make a box
To avoid monotony, I decided to frame the words.
.rect-front {
stroke: #07eb93;
stroke-width: 5;
box-shadow: 0px 0px 10px #07eb93; /* invalid, text-shadow also invalid */
}
<svg width="600" height="250" >
<rect x="7%" y="25%" rx="30" ry="30" width="340" height="90" fill-opacity="1" class="rect-front" />
<text text-anchor="middle" x="35%" y="50%" fill-opacity="1" class="texta-front"> </text> </ SVG >Copy the codeSince we only need the box, not the fill, we use the stroke, and the result is as follows:
Unfortunately, there is no light in this green box, and neither text-shadow nor box-shadow has any effect on rect. It seems that the era of simple configuration is gone, so I have to find another way to emit light with my bare hands.
.rect-front {
stroke: #07eb93;
stroke-width: 2;
}
.rect-back {
stroke-width: 4;
filter:url(#filter-blur);
}
<svg width="600" height="250" >
<filter id="filter-blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="4" />
</filter>
<rect x="7%" y="25%" rx="30" ry="30" width="340" height="90" fill-opacity="1" class="rect-front rect-back" />
<rect x="7%" y="25%" rx="30" ry="30" width="340" height="90" fill-opacity="0" class="rect-front"/ >... </svg>Copy the codeFor those of you who have seen me making clouds before, I know that the filter of SVG is a good thing. Here I use feGaussianBlur to make the blurred effect as the bottom, and then lay a clear frame on the top. In this way, a frame with bright green light will come out. I set the fan-opacity of the front box to 0 in order to make the top rect transparent (the stroke is not affected by fan-opacity), so that the fuzzy light below can be seen. This is what you end up with
It looks a little reliable, but looks so ordinary, why bother writing so many words. But how can this perfect neon sign be in my eyes, in the magic of the neon, there is always the broken part more attractive, such as this:
Yes, neon is incomplete without its imperfections, so I decided to bring out the decadent side of neon.
Four, incomplete beauty
In a dark alley, a shabby bar, the door’s signature because of disrepair, trademark has been damaged, light also get some light some not bright, the boss is a middle-aged man stubble, he opens his mouth, with the vicissitudes of the tone said: “in those days when I was on a business trip to dongguan, temporarily not endure…”
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — again forced line — — — — — — — — — — — — — — — — — — — — — — — — — —
To achieve the effect of mutilation and breakage, I used two things, one is rotation and the other is breakage. Let’s start with a simple rotation effect.
<text text-anchor="middle" x="39%" y="50%" fill-opacity="1" rotate="0 0 0 0 40"class="texta-front"> </text>Copy the codeRotate is used here, and its rules are as follows:
The rotate parameter value is a sequence that specifies the number of degrees of rotation. The unit can be omitted. The default value is DEg.
Character application Angle rule:
(1). If there is only one argument, all the text is rotated at the same Angle.
(2). If multiple parameters are specified, the first parameter is used for the first character, the second parameter is used for the second character, and so on.
The effect is as follows:
Next, we need to fix the breakage. Since the rose is crooked and the natural power contact is not good, let it continue to be broken. And break the green box, too.
.textb-front {
font-family: YouYuan;
font-size: 64px;
font-weight: normal;
text-transform: uppercase;
stroke: #723c88;
stroke-width: 2px;
stroke-dasharray: 180 280;
text-shadow: 0px 0px 3px # 332638;
}
.rect-front {
stroke: #07eb93;stroke-width: 2; stroke-dasharray: 180 100; }... <text text-anchor="middle" x="35%" y="50%" fill-opacity="1" class="texta-front"> </text> <text text-anchor="middle" x="62%" y="50%" fill-opacity="1" rotate="40" class="textb-front"> rose < / text >Copy the codeThe key here is stroke-Dasharray, which controls the pattern pattern of dots and strokes used for stroke. Its value is a sequence of numbers, usually in pairs, the first value represents the length of the line, the second value represents the length of the gap, anyway, I try whoever I am, see the appropriate line. In addition, the color of “Rose” is dark, which looks like power supply shortage. The final effect is as follows
Let’s have a picture
So far, we’ve tried to build around words and regular graphics, but is the world of neon just dull words and shapes? No, I refuse. Since I tried the Rose of Paris, it would have been useless without Paris, and would have been too shabby without roses, I decided to add roses. But ordinary pictures are definitely not good, since it is an SVG article, it is natural to have an SVG picture. SVG pictures, I think of Jack Ma.
Alibaba vector icon library, you deserve to have, there are a large number of ICONS, can be downloaded with a variety of formats, I chose a rose, download into SVG format
What is SVG diagram, LET me copy a paragraph, please refer to the details by yourself
- SVG stands for Scalable Vector Graphics
- SVG is used to define vector-based graphics for networking
- SVG uses XML format to define graphics
- SVG images do not lose graphical quality when they are enlarged or resized
- SVG is the World Wide Web Consortium standard
- SVG is integrated with W3C standards such as DOM and XSL
It looks like this in content
The whole code is too long, so I’ll just cut it out to make sense of it. I also move to the appropriate position by the parameters of X and Y, and it looks something like this.
But if this rose doesn’t shine, what kind of neon is it? I’m shining again.
.svg-font1 {
fill:none;
stroke: red;
stroke-width: 10;
stroke-dasharray: 880 330;
}
.svg-font2 {
fill:none;
stroke: yellow;
stroke-width: 10;
stroke-dasharray: 700 1030;
}
.svg-font3 {
fill:none;
stroke: gold;
stroke-width: 10;
}
.svg-font4 {
fill:none;
stroke: rgb(243, 40, 165);
stroke-width: 10;
}
.svg-font5 {
fill:none;
stroke: rgb(7, 252, 117);
stroke-width: 10;
}
.svg-back {
filter: url(#filter-blur-svg);}... <filter id="filter-blur-svg">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
...
<svg x="60%" y="0%" t="1562754342698" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="1277" width="128" height="128" fill="1">
<path class="svg-font1 svg-back". <path class="svg-font3 svg-back". <path class="svg-font2 svg-back". <path class="svg-font4 svg-back". <path class="svg-font5 svg-back". <path class="svg-font5 svg-back". <path class="svg-font5 svg-back". <path class="svg-font5 svg-back". </svg> <svg x="60%" y="0%" t="1562754342698" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="1277" width="128" height="128" fill="1">
<path class="svg-font1". <path class="svg-font3". <path class="svg-font2". <path class="svg-font4". <path class="svg-font5". <path class="svg-font5". <path class="svg-font5 ... svg-font5 svg-back"... Copy the codeFilter =”url(#filter_id)” is used in SVG tags, but class=”classname” is invalid, while path tags are available. I just used a layer of SVG path with feGaussianBlur as the glow effect, put a layer of image on top as the light body, change the color, and the effect comes out. Then please play stroke-Da Harray again, make some defects beauty for the rose, and you are done. The final effect is as follows:
Six, the past – sequel
When I was infatuated with the masturbating code, a knock came, a delicate voice came out of the door of the hotel room, “pretty boy, is the room service you want?” . I quickly opened the door, saying hurriedly, “Quick, come in, close the door.” After pulling someone in, I quickly turned off the light and continued pulling them in. “Come to bed.” In bed, I took a deep breath, quickly opened my Thinkpad, pointed to the screen and said, “I made the neon sign and the window, is not the same…”