Leader: Jen, there is an important task for you to perform. Jen: What task is so important? Leader: recently we have a new park opening, but also invited a writer to write a soft article to hype, “cloud broken month to spend shadow -SVG a variety of technology combination realization”, unfortunately this writer in addition to handsome, the article is not good, there is no reading, so the decision to send you undercover to this park, probe. Jen: Is there a problem with this park, is there a gang doing business there, or is there a foreign force with a base there? Leader: More important than that. The main reason is the poor popularity of the park. I hope you can pretend to be a tourist to help understand the thoughts of other tourists. In addition, you can talk about the benefits of our park to encourage tourists to participate in and activate the atmosphere. A Ren: leadership, this work is not actually called undercover, there is a more familiar name leadership: is it, what name? A ren: this calls water army on the line, the line calls shull… Leader: You won’t go? Jen: Leader, I graduated from computer science. What do you do? Leader: Please use ten reasons to convince all programmers that PHP is the best language in the world. Ren: leader, what’s the name of your park? Leader: called SVG Campus.
1. Oktoberfest neon lights
Jen went to the SVG campus in disguise (mostly by changing out of a plaid shirt and wearing a shoulder bag). Coincidentally, I saw the neon sign of the park, which was holding the Beer festival.
Here’s the code for oktoberfest neon
<style>
body {
background: #1d2b29;
width: 100vw;
height: 100vh;
margin: 0;
overflow: hidden;
}
.svg-beerglass {
animation: flicker 4.1s infinite;
}
@keyframes flicker {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<svg width="2000px" height="670px">
<defs>
<filter id="beerbottleblur" x="100%" y="100%" width="300%" height="300%">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
<svg id="beerbottle" t="1565578109000" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="7275" width="128" height="128">
<path stroke="#29ABE2" stroke-width="25"
d="M571.907998 79.770028H452.090002c-10.226 0-17.731999-9.612-15.25-19.532 l5.874-23.4999a27.725999 27.725999 00 1 23.813999 8.66 26.897999 21.001999 26.897999 21.001999 h84.771998 c12.724 0 l5.874 c2.482 9.92 5.022 23.499999 19.531999 15.248 19.532 z"
fill="none" p-id="7276"></path>
<path stroke="#009D00" stroke-width="25"
d="M591.767998 1008.268 h - 159.539996 - c - 35.515999-0-64.308998-28.789999-64.308998-64.307998 V530.552014 a521.779985 521.779985 001 48.024999-218.658993l0.002-0.002A521.769985 521.769985 00 463.970001 93.234027 V79.768028 h96.049998 v13.463999 a521.797985 521.797985 to 48.025998 218.660994 521.783985 521.783985 0 0 0 0 0 to 1 48.026999 218.660993 v413.407988 c0.002 35.515999 28.788999 64.305998 64.304998 64.305998 z"
fill="none" p-id="7277"></path>
<path stroke="#00CA65" stroke-width="25"
d="M607.025997 311.893021 c - 31.639999-68.551998-47.207999-143.155996-47.207998-218.659994 V80.607028 H511.56 v12.623999 c0 75.504998 16.618 150.108996 48.257999 218.660994 31.639999 68.551998 48.257999 143.156996 48.257998 218.660993 35.515999 28.815999 64.031998 64.333998 64.031998 V943.960002 c0 h48.025999 c35.515999 0, 62.466998 to 28.515999 62.466998 64.031998 V530.554014 c0-75.501998-15.569-150.106996-47.208999-218.659993 - z"
fill="none" p-id="7278"></path>
<path stroke="# 008442" stroke-width="25"
d="M416.094003 c31.639999 311.893021 68.551998 47.207999 143.155996 47.207998 218.659994 V80.607028 h48.257999 v12.623999 c0 75.504998-15.568 150.108996-47.207999 218.660994s-47.207999 143.156996-47.207998 218.660993V943.960002c0 35.515999 27.591999 64.031998 63.109998 64.031998 h - 48.025999-35.515999 c 0-63.339998-28.515999-63.339998-64.031998 V530.554014 c - 0.003-75.501998 15.566 150.106996 47.205999 218.659993 z"
fill="none" p-id="7279"></path>
<path stroke="#29ABE2" stroke-width="25"
d="M592.039998 271.871022 H431.954002 l16.01 80.041998 h128.067996 zM367.927004 832.167006 h288.159992 v48.025998 h - 288.159992 - z"
fill="none" p-id="7280"></path>
<path stroke="#FFFFFF" stroke-width="25" d="M367.927004 608.064012 h288.159992 V832.190006 h - 288.159992 - z"
fill="none" p-id="7281"></path>
<path stroke="#C7B299" stroke-width="25"
d="M431.964002 608.064012a80.043998 80.043998 01 0 160.087996 0 80.043998 80.043998 01 0-160.087996 0z"
fill="none" p-id="7282"></path>
<path stroke="#29ABE2" stroke-width="25"
d="M367.927004 560.038014 h64.034998 v48.025998 h - 64.034998 - z m224.124994 0 h64. 034998 v48. 025998 h - 64.034998 zM479.990001 608.064012a32.017999 32.017999 01 0 64.035998 0 32.017999 32.017999 01 0-64.035998 0z"
fill="none" p-id="7283"></path>
<path stroke="#29ABE2" stroke-width="25"
d="M511.998 655.807011 26.331999 0-47.753999 - c - 21.422999-47.753999-47.754999 s21.421999 47.753999 47.753999 to 47.753998 47.753999 21.421999 47.753999 47.753998-21.423999 47.754999 47.754999 Z m0-64.034998c-8.978 0-16.282 7.304-16.282 16.281999s7.304 16.282 16.282 16.282 16.282-7.304 16.282-7.306-16.282-16.281999 zM417.150003 768.805007 h190.929994 v31.472 H417.150003 z m29.373999 48.257998 h130.083996 v31.471999 H446.524002 z"
fill="none" p-id="7284"></path>
<path stroke="#C7B299" stroke-width="25"
d="M479.990001 271.880022a32.017999 32.017999 01 0 64.035998 0 32.017999 32.017999 01 0-64.035998 0z"
fill="none" p-id="7285"></path>
<path stroke="white" stroke-width="10"
d="M622.335997 305.301021 C-30.187999-65.411998-46.251999-137.99396-46.547999-210.042994 A31.217999 31.217999 0 0 596.699998 83.410028a31.269999 31.269999 00 5.723999-26.988 L -5.873999-23.499999A43.399999 43.399999 00 554.383999 0.00003 h-84.7798 a43.397999 43.397999 00 -42.163999 32.919999l-5.873999 23.499999a31.255999 31.255999 00 5.723999 26.988 31.213999 31.213999 0 0 20.914 11.847999 C-0.296 72.049998-16.362 144.636996-46.549999 210.042994-32.366999 70.125998-49.474999 148.018996-49.474998 225.250993v413.407988c0 44.135999 35.908999 80.041998 80.042997 80.041998 h159.539996 c44.135999 0, 80.042998 to 35.905999 80.042997 80.041998 V530.554014 c - 0.002-77.235998-17.109999-155.128995-49.476998-225.252993 z M - 65.017998-48.447999 - c - 6.312-18.991999-24.235999-32.735999-45.319999-32.735999-39.007999-13.74-45.319999 s H - 32.735999 12.585999 12.987999 48.257998 h89.837998 a543.389984 543.389984 0 0 0 a543.759984 0 0 0, 12.987999 543.759984 48.257998h-12.587999z m-29.039999 15.018c0 8.976-7.304 16.282-16.282 16.282s-16.282-7.304-16.282-16.282 7.304-16.282 16.282-16.281999c8.978 0.002 16.282 7.308 16.282 16.281999z m16.015999-176.362995c0.12 27.259999 2.404 54.586998 6.698 81.616998 c4.292 h - 77.985998-27.031999 6.58 54.356998 6.7 m - 74.681998-64.035998-81.616998 h64.587998 z h84.771998 a11.974 11.974 00 1 11.633999 9.082l5.93 23.475999-0.038 0.002h-119.799996l5.87-23.477999a11.972 11.972 00 1 11.631999-9.082z M - 39.377999-287.014992 c4.57 9.902 8.8 19.973999 12.756 30.159999 h24.175999 c6.718 18.249999 24.279999 31.299999 44.829999 31.299999 20.551999 38.111999 13.05 44.829999 31.299999 H580.999998 a529.687984 0 0 0, 12.756 529.687984 30.161999c30.471999 66.019998 46.575999 139.352996 46.575998 212.066993 V544.300014 h - 56.943998 - c - 17.549999-19.635999-43.049999-32.025999-71.397998-32.025999-53.845998-12.39-71.397998 s H - 56.943998 v - 13.748 c0.01-32.025999 72.709998 16.116 146.041996 46.585998 212.064993 zM383.658004 817.060006 V624.030012 h33.919999 c7.63 s86.789997-79.802997 45.232999 47.051999 79.802998 94.419997 34.573999 94.419997 79.802997 h33.919999 v193.029994 m256.679992 h - 256.679992 - z 31.471999 v14.688 h - 256.679992 v - 14.688 h256.679992 zM417.490003 592.556013 h - 33.833999 V575.770013 h38.173999 a95.157997 95.157997 0 0-4.34 16.786z m30.199999 15.497999c0-35.457999 28.847999-64.305998-64.305998 s64.305998 28.847999 64.305998-28.847999 64.305998-64.306998 64.306998-64.305998-28.847999-64.305998- 64.305998- 64.305998-64.306998 Z M158.813995-15.497999 a94.769997 94.769997 0 0-4.342-16.786h38.173999v16.786h-33.831999z m-14.735999 399.975988 h - 159.539996 - c - 26.781999-0-48.569999-21.789999-48.569998-48.569999 v - 49.268998 h256.679992 v49.268998 c0 26.779999 21.789999 48.569999 48.569998 48.569999 z"
fill="none" p-id="7286"></path>
</svg>
<svg id="beerglass" t="1565581315581" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="8508" width="70" height="70">
<path
d="M804.352 406.016 L-82.432 0-48.64 0 0 473.6-97.792 0L575.488 408.064c-17.408 11.776-14.848 19.968-36.864 23.552l0 447.488L435.2 879.104 435.2 430.08c-19.968-4.608-20.992-12.8-36.864-24.064 L0 473.6L294.4 879.616 294.4 406.016 250.88 406.016l0 445.952c0 45.568 36.864 82.432 82.432l304.128 0c45.568 0 86.528-36.864 86.528-82.432l0-64 80.384 0C36.352 0 66.048-29.696 66.048-66.048L870.4 472.064C870.4 435.712 841.216 406.016 804.352 406.016zM825.856 742.912l -101.88880l723.968 450.0481l101.88880l825.856 742.912z"
p-id="8509" fill="#60B9EE"></path>
<path class="svg-beerglass"
d="M485.376 403.456 C-39.424 0-75.776-16.384-102.4-45.056-19.968 14.336-43.52 22.016-68.096 22.016-53.248 0-99.84-36.352-112.64-87.552-16.896-12.8-26.624-32.768-26.624-54.272 0-37.888 30.72-69.12 69.12-69.12 1.024 0 2.048 0 3.072 0 16.896-12.288 36.352-19.456 56.32-21.504 14.848-32.768 47.616-54.784 83.968-54.784 27.136 0 52.736 11.776 70.144 32.256 18.944-4.096 36.352-4.096 55.808 0.512 17.408-20.48 43.008-32.768 70.656-32.768 35.328 0 67.584 20.48 82.944 52.224 60.928 4.096 109.056 54.272 109.056 116.224 0 64-52.224 116.224-116.224 116.224-25.088 0-49.152-8.192-69.12-23.04C564.224 385.536 525.824 403.456 485.376 403.456zM386.56 319.488l8.704 11.776c22.016 28.672 54.784 45.056 90.112 45.056 36.352 0 71.168-17.92 92.672-48.128 L9.216-12.8 11.264 10.752c16.896 16.384 38.912 25.088 54.784 45.056 90.112 45.056 36.352 0 71.168-17.92 92.672-48.128l9.216-12.8 11.264 10.752c16.896 16.384 38.912 25.088 61.952 25.088 49.152 0 89.6-39.936 89.6-89.6 0-49.152- 39.936-89.088-89.088-89.9.6-0.512 0-1.024 0-2.048 0L -9.728 0-3.072-9.216 - c - 9.728-25.6-34.304-43.008-61.44-43.008-21.504 0-41.984 10.752 54.272 28.672 l - 5.632 7.68-9.216-2.56 - c - 21.504-6.144-38.4-6.144-59.392-0.512 l - 9.216 2.56 L441.856 148.48 c-12.288-17.408-32.256-28.16-28.16 0-52.736 17.92-61.952 45.056L323.072 174.08l-9.216 0c-19.456 0.512-37.888 7.168-53.76 19.968 L-4.608 3.584-7.68-1.024c-1.024 0-2.048-0.512-3.072-0.512-23.04 0-41.984 18.944-41.984 41.984 0 14.336 7.168 27.136 18.944 35.328 L4.608 3.072 1.024 5.632C236.032 323.584 272.896 353.28 314.88 353.28c22.528 0 44.032 8.704 60.416 24.064 319.488 z L386.56"
p-id="8510" fill="#60B9EE"></path>
<path
style="fill:#60b9ee; fill-opacity:1; stroke:#60b9ee; Stroke - width: 38.5823288; stroke-linecap:butt; stroke-linejoin:miter; stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1"
d="470.1288 m 250.87999, 406.01599 h" id="path1387" inkscape:connector-curvature="0" />
</svg>
<g id="beerbottleneon">
<use xlink:href="#beerbottle" filter="url(#beerbottleblur)" />
<use xlink:href="#beerbottle" opacity="0.9" />
</g>
<g id="beerbottleneon1">
<use xlink:href="#beerbottleneon">
<animateTransform attributeName="transform" id="f1" attributeType='XML' begin='0s; t1.end' dur='2s'
type="rotate" from="0 0 0" to="0 0 0" />
<animateTransform attributeName="transform" id="s1" attributeType='XML' begin='f1.end' dur='s 0.1'
type="rotate" from="0, 64, 64" to="70, 64, 64" />
<animateTransform attributeName="transform" id="t1" attributeType='XML' begin='s1.end' dur='2s'
type="rotate" from="70, 64, 64" to="70, 64, 64" />
</use>
</g>
<g id="beerglassneon">
<use xlink:href="#beerglass" filter="url(#beerbottleblur)" />
<use xlink:href="#beerglass" opacity="0.5" />
</g>
<path id="beerpath" d="M-20.501285,20 A 97.750643,50 0 0 175,20" />
<text id="beerday" fill-opacity="0.4" stroke="white" stroke-width="1" fill="none" font-size="25">
<textPath xlink:href="#beerpath" startOffset="40">SVG Campus Beer festival </textPath> </text> <g id="beerdayneon">
<use xlink:href="#beerday" filter="url(#beerbottleblur)" />
<use xlink:href="#beerday" opacity="0.9" />
</g>
<circle id="beercircleback" r="110" fill="black" />
<circle id="beercircle" r="110" stroke="#31FF98" stroke-width="8" fill="none" >
<animate attributeName="stroke" id="f2" begin="0s; t2.end" from="#FFFFFF" to="#A8A8FF" dur="2s" />
<animate attributeName="stroke" id="s2" begin="f2.end" from="#A8A8FF" to="#FFFF00" dur="2s" />
<animate attributeName="stroke" id="t2" begin="s2.end" from="#FFFF00" to="#FFFFFF" dur="2s" />
</circle>
<g id="beercircleneon">
<use xlink:href="#beercircle" filter="url(#beerbottleblur)" />
<use xlink:href="#beercircle" opacity="0.9" />
</g>
<g id="beerdayboard">
<use xlink:href="#beercircleback" x="110" y="110" />
<use xlink:href="#beerbottleneon1" x="10" y="20" />
<use xlink:href="#beerglassneon" x="110" y="78" />
<use xlink:href="#beerdayneon" x="30" y="120" />
<use xlink:href="#beercircleneon" x="110" y="110" />
</g>
</defs>
<use xlink:href="#beerdayboard" x="10" y="10"/>
</svg>Copy the codeFor neon articles, you can see my previous articles “decadent light -CSS+SVG to achieve neon effects” and “bright your Kryptonian eye -CSS+SVG to achieve neon animation”, here mainly used before some knowledge points.
Opacity: 0; opacity: 0; opacity: 0; opacity: 0; } 49% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; }}... SVG animation effect with Rotate making a beer bottle tilt 70 degrees <animateTransform attributeName="transform" id="f1" attributeType='XML' begin='0s; t1.end' dur='2s'
type="rotate" from="0 0 0" to="0 0 0" />
<animateTransform attributeName="transform" id="s1" attributeType='XML' begin='f1.end' dur='s 0.1'
type="rotate" from="0, 64, 64" to="70, 64, 64" />
<animateTransform attributeName="transform" id="t1" attributeType='XML' begin='s1.end' dur='2s'
type="rotate" from="70, 64, 64" to="70, 64, 64" />Copy the codeGenerally CSS animation and SVG animation are smooth motion, but in order to show the effect of neon flash switching, I set the switch in the keyframe suddenly, so that the change is not changed at 49%, and suddenly displayed at 50%, and then with SVG animation effect, quickly rotate an Angle at a certain point in time. It creates the neon effect of the beer bottle suddenly switching over and pouring. The same is true of the foam that comes and goes from a beer mug.
SVG Campus Oktoberfest uses textPath from SVG
<path id="beerpath" d="M-20.501285,20 A 97.750643,50 0 0 175,20" />Copy the codeSo let’s draw a path that actually looks like this
The “SVG Campus Beer Festival” is arranged along its path, but from the top left corner, so we use the startOffset parameter to adjust the starting position of the text, and the resulting code is
<text id="beerday" fill-opacity="0.4" stroke="white" stroke-width="1" fill="none" font-size="25">
<textPath xlink:href="#beerpath" startOffset="40"</textPath> </text>Copy the codeAnother way to adjust the position is to change the coordinates of the text. Setting a value to the x of the text can also adjust the position of the text
<text id="beerday" fill-opacity="0.4" stroke="white" stroke-width="1" fill="none" font-size="25" x="40">
<textPath xlink:href="#beerpath"</textPath> </text>Copy the codeThis single effect can be seen online here: take a look
2, WC logo
O Ren in order to complete the leadership of the task, take the lead to drink up the beer, fried the tourists atmosphere, in the oktoberfestival atmosphere reached the climax, O Ren suddenly felt the beer’s reaction, urine turbulent shop up, there is just a wall in the distance, writing the LOGO of WC, O Ren helped the wall tottering in the past.
In order to do old, I do the WC processing, so that the logo is broken, the code is as follows:
<svg id="wc" t="1565534122398" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="5989" width="32" height="32">
<path stroke="black" stroke-width="25" stroke-dasharray="910324"
d="M326.8 408.7c-22.1 79.5-44.2 159-66.2 238.6-16.4 59.3-16.3 59.3-83.6 54.6C143.9 577.3 110.4 451.4 75.9 322h62.4c23.5 103.4 47.1 206.8 72.4 318.2 21.7-82 41.5-156.9 61.3-231.9 3.2-12 5.9-24 9-36 14.5-55.6 14.5-55.6 78.6-50.3 27.7 104.2 55.7 209.8 86.4 325.6 22.1-100.7 41.5-190.7 61.7-280.5 11.3-50.6 11.8-50.5 71.3-44.3-33.6 126.6-66.9 252.3-100 377-61.1 9.4-61-9.3-75.5-44.8-22-82.1-44.3-164.1-66.4-246.1-3.4 0-6.8-0.1-10.3-0.2 c0 zM170 278.5 h - 53.6-46.7-3.7-92.5-1.1-137.4 4.3-39.7 41.2-69.9 81.3-75.9 15.8-2.4 32.1-3.1 48.1-3.2 180.8-0.2 361.7-0.3 542.5-0.1 99 0.2 134.1 35.7 134.1 134.4 v82.1 c0 h - 57.1-31.9-0.5-62.5-0.1-93-0.9-47.1-16.4-63.7-62-63.8-190.7-0.4-381.5-0.4-572.2 0-45.5-0.1-61.2-17-62 63.8-0.5 29.6-0.1 59.2-0.1 93.1zM112.9 745.1H170c0 31.9-0.4 62.5 0.1 93 0.8 46.8 16.5 63.8 62 63.9 190.7 0.4 381.5 0.4 572.2 0 45.6-0.1 61-16.7 62.2-63.8 0.7-28.4 0.9-56.9 1.4-85.3 0-1.2 0.7-2.3 2.1-6.4 H50.1 C0 45.3 3.6 91.1-1.1 136-4.1 39.4-41 69.8-81.4 75.9-17.1 2.6-34.5 3.2-51.8 3.2-178.3 0.2-356.7 0.3-535 0.1-103.9-0.1-137.8-34.3-137.8-138.2-0.1-25.7-0.1-51.4-0.1-78.4 zM898.7 c17.5 569.2 4.3 33.8 8.3 49.7 12.1 0.4 59.4 46.1 111.1 109.8 122.9 69.4 12.9 136.4 4.5-183.4-52.5-54.9-66.7-58.1-145.2-30.2-224.9 24.4 69.7 86.5 111.7 163.1 113.3 73.7-1.6 131.3 37.8 162 114.1-17.4 4.9-34.3 9.7-53.3 15-3.4-5.6-7-10.2-9.3-15.4-17.7-40.5-49.7-62.6-92.7-63.2-23-101.2-63.9-45.9-0.7-80.6 and 53.7 29.5 109.2 6.7 165.2 18.2 44.9 57.7 73 102.2 73.4 45.3 0.4 81.7-26.5 100.5-74.5 2.6-6.6 5.3-13.3 9.1-22.8z"
p-id="5990" fill="none"></path>
</svg>
Copy the codeIt’s mainly stroke-da harray, see here
Another broken object is the symbol of the finger. In order to reflect the appearance of swinging in the wind, animation effect is used. The code is as follows:
<use id="finger" xlink:href="#finger">
<animateTransform attributeName="transform" id="first1" begin="0s; second1.end" dur="0.5 s"
type="rotate" from="80" to="100"></animateTransform>
<animateTransform attributeName="transform" id="second1" begin="first1.end" dur="0.8 s" type="rotate"
from="100" to="80"></animateTransform>
</use>Copy the codeThis one uses the animateTransform. In SVG animation, the core is three swordsmen: animate,animateTransform and animateMotion.
- Animate is used to change the numeric properties of an element, such as width,height, and color
- The animateTransform is used to Transform elements. It is used with the Transform property to zoom in and out and rotate. This example is used with the rotate property
- AnimateMotion mainly does path changes, which will be explained in more detail below.
3. Thick urine
A Ren was confused by the SIGN of WC, do not know the meaning of the finger arrow, looking at the swinging fingers pointing to the ground, he suddenly realized, the original is an open toilet, signage means to let him solve here, the lower body of emergency has not allowed him to think more, he untied the zipper…
In fact, I first thought of using the filter combination, feTurbulence+feDisplacementMap, which was used in “a cloud in the sky – Creating a cloud with HTML by hand, very real”. They change the graph through noise and distortion, but the effect is too long to explain. This is the original urinary tract map:
I created it in inkscap, and it looks like it was drawn by someone with life experience. This curve, this wave feeling, how could it be done without decades of experience of standing up and peeing. Then I made the first version with filter and animate
<filter id="filter-suibian" width="350%" height="250%" x="100%" y="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.015" numOctaves="1" seed="1" />
<feDisplacementMap in="SourceGraphic" scale="0">
<animate attributeName="scale" id="first2" begin="0s; second2.end" from="5" to="15" dur="0.5 s">
</animate>
<animate attributeName="scale" id="second2" begin="first2.end" from="15" to="5" dur="1s"></animate>
</feDisplacementMap>
</filter>
...
<use xlink:href="#suibian" filter="url(#filter-suibian)"/>Copy the codeThe final effect is as follows:
This effect is quite strange, look for a long time, feel I still need to go to Guangzhou men’s hospital, to solve the problem of the urology department, in the lower body of the strong discomfort, I gave up, decided to go on the second version.
<filter id="shock2">
<feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="1" seed="2" result="noise" id="noise">
<animate attributeType="XML" attributeName="seed" from="2" to="120" dur="10s"
repeatCount="indefinite" />
</feTurbulence>
<feMorphology id="morph3" in="SourceGraphic" operator="dilate" radius="1" result="morph1" />
<feMorphology id="morph4" in="morph1" operator="erode" radius="1" result="morph2" />
<feComposite operator="out" in="morph2" in2 ="morph1" result="strokeText" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="strokeText" in2 ="noise"
result="displacementMap" color-interpolation-filters="auto" scale="10" />
<feGaussianBlur stdDeviation="1" result="coloredBlur" />
<feMerge>
<feMergeNode in="coloredBlur" />
<feMergeNode in="displacementMap" />
</feMerge>
</filter>
<filter id="blur-suibian">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<g id="suibian1">
<use xlink:href="#suibian" width="310" filter="url(#blur-suibian)" />
</g>
<use xlink:href="#suibian1" filter="url(#shock2)" />Copy the codeIn fact, the filter combination is not used here. If you have read my article “Lighting up your Ktonian eye -CSS+SVG to achieve Neon animation”, you know that the filter is used for neon effect. I tried it with some feGaussianBlur. Not trying). Do not try not to know, try after….
At least it doesn’t seem to be a urology problem, but Jen’s beer must have been drunk a lot. It’s a bit big.
The fly crawls and crawls
A Ren was carefree eventually, but the move of this not civilization also caused the change of surroundings environment, a fly that is very sensitive to SAO taste came here, intoxicated in this smell (is Qingdao or pure unripe?)
I’m going to use the animateMotion that I talked about earlier. To bring the animateMotion to the stage, I’m going to use a fly. Is that easy for me?
This is the road map I sketching with Inkscap, with a tiny fly ——- here it is —–>
<g id="fly">
<image xlink:href="fly.png" filter="url(#shadow)" width="8">
<animateMotion
path="M-54.38608,206.12261 34.03516,7.36844 38.94745,-3.50878 48.070278,-12.63161 26.315844,-21.40355 35.438668,18.24565 47.7194,-14.38599 43.50886,-31.22814 9.82459, -23.15794-6.31581, -16.84214-17.54389, -7.01756-22.10531,0.70176 -9.82458, 21.40355-8.42107, 23.50882-35.78955, 1.75439-23.50883, -14.73687-34.035154, 16.49126-29.824624,28.42111 20.7018 25.9649658, 46.3158872, 14.38599-16.491265, 12.28072 z"
dur="10s" rotate="auto" repeatCount="indefinite" />
</image>
</g>Copy the codeNote the rotate parameter. If it is not set to auto, the fly will rotate along the path. It looks like this.
I decided to add the Rotate attribute in order to dispel the suspicion that this was an alien base. Rotate =auto and the image will automatically rotate along the path
That’s a lot more real.
5, three shadows
In fact, before ahren came, he carefully read the article “Cloud broken moon to Flower Shadow -SVG technology combination realization”, in order to prove that he came, he directed the water at the flower…
Story: as mentioned in the last article, zhang Xian, the author of the cloud breaking moon, has a nickname of “Zhang SAN Ying”. In honor of him, I put together the shadow of the flower, the shadow of Ahren and the shadow of the beer bottle, this is also three shadows…
Shadow code:
<image id="huazhi" xlink:href="huazhi.png" width="100">
<animateTransform attributeName="transform" id="first" begin="0s; third.end" dur="0.5 s" type="rotate"
from="0, 73, 199" to="- 5, 73, 199"></animateTransform>
<animateTransform attributeName="transform" id="second" begin="first.end" dur="0.2 s" type="rotate"
from="- 5, 73, 199" to="- 7, 73, 199"></animateTransform>
<animateTransform attributeName="transform" id="third" begin="second.end" dur="0.4 s" type="rotate"
from="- 7, 73, 199" to="0, 73, 199"></animateTransform>
</image>
<use id="huazhiyin" xlink:href="#huazhi" filter="url(#huazhishadow)" transform="skewX(29)" />
<use xlink:href="#huazhiyin" x="225" y="390" />
Copy the codeFigure code:
<image xlink:href="by.png" x="140" y="368" width="150" filter="url(#blur-moon)" transform="skewX(10)" />Copy the codeBeer bottle shadow code (bottle is drawn in SVG, not PNG)
<svg id="jiupin" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="210mm" height="297mm"
viewBox="0 0 210 297" version="1.1" id="svg5721" inkscape:version="0.92.4 (5 da689c313, 2019-01-14)." "
sodipodi:docname="jiuping.svg">
<defs id="defs5715" />
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="# 666666" borderopacity="1.0"
inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.35" inkscape:cx="112.85714"
inkscape:cy="560" inkscape:document-units="mm" inkscape:current-layer="layer1" showgrid="false"
inkscape:window-width="1920" inkscape:window-height="1000" inkscape:window-x="11"
inkscape:window-y="11" inkscape:window-maximized="1" />
<metadata id="metadata5718">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1">
<path style="fill:#000000; Stroke - width: 0.12662637" inkscape:connector-curvature="0"
d="M 96.940112,135.10889 c-1.332179, -1.77624-4.440595, -4.44060894, -5.77278-2.220298, -1.33218-3.108418,-4.88465 -3.108418,-5.77277 0,-0.88812 0.44406,-4.4406 0.44406,-6.21684 0, -1.77623-1.332178, -5.32871-1.332178,-6.66089 0.44406, 0.88812-0.888119, -3.99654-0.888119,-6.21683 0,0 1.332179,0.44405 1.332179, -1.3322v 91.146988c 0,0 0.444058, -0.88812-1.332179, -1.332179-1.776239, -0.44406-4.440597, -0.888119-6.660894, -0.888119-2.220299,0 -5.328715, 0.444059-6.660894, 0.888119-1.776239, 0.444059-1.776239, 0.888119-1.776239, 0.888119v 11.989612c 0,1.77624 1.776239,1.77624 1.776239,1.77624 0, 2.22029-0.44406, 5.32871-0.88812, 6.21683-0.444059, 1.33218-1.332179,4.88466 -1.332179,6.66089,1.77624 0.44406,5.32872 0.44406,6.21684, 0.88812-0.44406, 4.44059-3.108416,5.77277 2.664359, 1.33218-5.328717, 3.99654-6.660895, 5.77278-1.332179, 1.77624-0.888119, 5.77277-0.888119, 5.77277V 48.84656C 0,0,16.4302 0.44406,20.42674,3.99654 2.664357,7.54902 2.664357,7.54902 h 32.41635c,0 2.664358,-3.55248 2.664358,-7.54902 0,-3.99654 0.44406,-20.42674 0.44406,-20.42674 V-48.84656 C-0.44406,0, -3.99653-1.332179,-5.77277 z"
p-id="5216" id="path5700" />
<path style="fill:#000000; Stroke - width: 0.12662637" inkscape:connector-curvature="0"
d="M 100.93664, 215.48368c 1.77624,-1.33218 4.4406,-4.4406 5.77278,-6.6609 1.33218,-2.22029 4.88465,-3.10841 5.77277,-3.10841 0.88812,0 4.4406,0.44406 6.21684,0.44406 1.77623,0 5.77277,-1.33218 6.66089,-1.33218 0.88812,-0.44406 3.99654,-0.88812 6.66089,-0.44406 0, 0-0.44406,1.33218 1.33218,1.33218 h 11.98961c 0,0 0.88812,0.44406 1.33218,-1.33218 0.44406,-1.77624 0.44406,-4.4406 0.44406,-6.6609 0, -2.22029-0.44406, -4.88465-0.44406, -6.66089-0.44406,-1.77624 -1.33218, -1.33218-1.33218, -1.33218-1.33218, -1.33218-1.33218, -1.33218-2.66435,0 -5.32871, -0.44406-6.66089, -0.44406-0.88812, -0.44406-4.88466, -1.33218-6.66089, -1.33218-1.77624, 0-5.32872,0.44406 -6.21684, 0.44406-0.88812, 0-4.44059, -0.44406-5.77277, -3.10842-1.33218, -2.66435-3.99654, -5.32871-5.77278,-6.66089 -1.776237, -1.33218-5.772767, -0.88812-5.772767, -0.88812h 46.317299C 0, 0-16.430195, 0-20.426735, 0.44406-3.99654,0 -7.54902, 2.66436-7.54902,2.66436 V 32.41635C 0, 2.66436 7.54902,2.66436 3.99654,0 20.426735,0.44406 20.426735, 0.44404h 48.84657c 0, -1.332233.99653, -1.88812 5.772767, -2.2203z"
p-id="5217" id="path5702" />
</g>
</svg>
<use id="jiupinshadow" xlink:href="#jiupin" width="80" filter="url(#blur-moon)" transform="skewX(10)" />
<use xlink:href="#jiupinshadow" x="40" y="0" />Copy the codeThe final full screen looks like this
Source code address
Online watch
Leader: Jen, I heard that you worked very hard at the beer festival to stir up the atmosphere
Ren: Yes, in order to promote the popularity of the park, I drank a lot and brought along a lot of people. Are you satisfied with the leadership?
Leader: yes, the young man has a future, but there is a matter to you to close the end.
Jen: What’s up
Leader: The people at the park said that when you finally left the oktoberfest you called out, ‘This round is on me.’ They sent the bill.
A ren: leadership, that is I drink much, can’t calculate….