SVG Noise over gradient Experiment
How do I make an svg noise over gradient experiment?
Experimenting with noise over the top of gradients on my SVGs. This file is 15kb in size. I added a noise filter in the SVG markup, and applied it to a duplicated object. You can see it in both the base and the handle of the macbook.. What is a svg noise over gradient experiment? How do you make a svg noise over gradient experiment? This script and codes were developed by Chris Wright on 12 July 2022, Tuesday.
SVG Noise over gradient Experiment - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Noise over gradient Experiment</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<body> <div class="animated fadeInLeft">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1080px" height="648px" viewBox="0 0 1080 648" enable-background="new 0 0 1080 648" xml:space="preserve">
<filter id="noise"> <feTurbulence type="fractalNoise" baseFrequency=".9" stitchTiles="noStitch"></feTurbulence> <feComponentTransfer> <feFuncR type="linear" intercept="-.5" slope="2"></feFuncR> <feFuncG type="linear" intercept="-.5" slope="2"></feFuncG> <feFuncB type="linear" intercept="-.5" slope="2"></feFuncB> </feComponentTransfer> <feColorMatrix type="saturate" values="0"></feColorMatrix> <feComponentTransfer> <feFuncA type="table" tableValues="0 .3"></feFuncA> </feComponentTransfer>
</filter>
<g id="Layer_13"> <g> <image overflow="visible" enable-background="new " width="903" height="80" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4cAAABQCAYAAACqPgCcAAAACXBIWXMAAAsSAAALEgHS3X78AAAA
GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABUxJREFUeNrs3dFu4joUQNFjSuf/
/7dA7gvRuO6xKaPbxKRrSVaA0oFG87Jlx4kAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgETxnQEAAP53i9ASfwAA
AC8Xj2Xi7yESAQCA3xCFU4Rimejzi2AEAAB+WQgus0RimeBzs8fliWAEAAB4hThcOscpIrHs+Hll
cCzfjEUAAIDZ4zA7Lk8G46HisBeGpfO8PAjFPSMXAABgFHG9IGxHdJ5vHojnHU5cLwRPD55H81gU
AgAAs0biMgjDW/K8/r0SOywtLRt/Tht6p+SYPR7NJIpEAABgpijMgrAOwVvncR2KvZnEH7PlzGEb
c20EruMtea2dSYxwHSIAADBfIGZx2MbgOq73nlmD8HbvnlvVOodaVtpGYRaEdRi+JY/bUBSIAADA
q4RhG4TX++NSBWJJQnHZMhK3mjksg1GH4Nv9O70lQyACAACvGobXZlyqrrlWv9teThdxkGWl2X0K
e7OF52S0sdgGojgEAABmjMM2DC/V8dIJwDYCN5093GpZ6WjW8FRF4HvnmM0gjjaoAQAA2DoOs1nD
eqbwI76uhFzff6oeZxtyvvSy0vLgZ71Zwz/3KHyv4vBRIIpDAABgljjMwjDrmCXG9z/MOurHInHr
3Up7s4b1zOE6/jwIxPXfCIEIAADsHIYRn3cmzcKwt5R0jcl1p9K2nQ51K4vSicQ2ENfRC8R29jC7
WDOEIgAA8MNBGEnk1bG3xmEWhut76r65Rr6cNOIgu5W2yz7LIBCzUKyXm75Hf2mpGAQAAPaMxWwW
8JTE4zW+d9u+upuWOMiGNFkwRow3qDnF1/sdZjuX2pQGAACYJQzXjWVuVZu0u5bWLXOKfLaw7NE2
551OYnnifc+Mf/0cAACA78Zg3RvLkx3zqFV2a5jzJCd19L7v7uCzJCdy8f8XAAD44a5ZnhiPWmW3
hjlPdgLbKdf1mK3Xdc0hAAAwWyC2t7GoR9059c6mbTwue0TieaMTVTp/bBuE7Um8xOfp1/p9disF
AAD2isH2td5upZdmtLFYj2x2cRl87kvFYf1HlUEYtkX9EV+3ea139XGfQwAAYJZQfHSfw8u9ceqR
zSo+uwT1JeOwV9P1stF2lrANw0vkt7EQhgAAwAyB2JsE6wXiR/ydTbx1AnGz5aXnHz5JZfCz9WRl
u/e0J3QUhuIQAACYKQ57gfjRHNulpnUgjj7r5eIw+wNGJ6xddrq+fo78JpFtFIpDAABgzziM6G+2
eYn+NYjZdYebzx5usSFNtky0dk3isb7G8NIJQ3EIAADMGodZILabb442p2lnEA+1IU0kEVjHYv1a
vfnMSRgCAAAHCMRbfL2txaPrDQ9xzWF9okpzsrIgrMcpPm9WU4QhAADwwoHYC8VstnDzWcOt4rAX
ibcqAtuTt8Zgu/FMbwMagQgAAOwdhr04zGYSl04Q3raOwj2iKpvxq8fpwfOIr7e6EIUAAMCskTja
yXT0PJLjIeOwF4hZMH53GalIBAAAZojC6MTd6HrCXhgeNg5HgZgFY4TrCwEAgNePxl4ojt6zaRju
GVvlyWDc+/sCAAD8axw+isVdo3CW2BpdP2j5KAAAcKQ4HAXjblE4W2wJQQAAQDCKQ1EIAAD8+kgU
YuIRAAAQfwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAADz+U+AAQAIQngdFvkhyAAAAABJRU5ErkJggg==" transform="matrix(0.9989 0 0 0.9875 84.1826 527.9287)"> </image> </g>
</g>
<g id="Metal_hood">
</g>
<g id="Curtain">
</g>
<g id="Groove">
</g>
<g id="Bottom"> <linearGradient id="Bttom_1_" gradientUnits="userSpaceOnUse" x1="364.2437" y1="524.3574" x2="364.2437" y2="534.5" gradientTransform="matrix(1 0 0 1 168 37)"> <stop offset="0" style="stop-color:#898989"/> <stop offset="0.1371" style="stop-color:#7B7B7B"/> <stop offset="0.4877" style="stop-color:#5D5D5D"/> <stop offset="0.7876" style="stop-color:#4B4B4B"/> <stop offset="1" style="stop-color:#444444"/> </linearGradient> <path id="Bttom" fill="url(#Bttom_1_)" d="M89.75,561.357c-3.75,0.25,885,0,885,0S962,571.5,942,571.5s-804.75,0-819.75,0 S94.5,563.607,89.75,561.357z"/> <linearGradient id="For_Noise_1_" gradientUnits="userSpaceOnUse" x1="364.2437" y1="524.3574" x2="364.2437" y2="534.5" gradientTransform="matrix(1 0 0 1 168 37)"> <stop offset="0" style="stop-color:#898989"/> <stop offset="0.1371" style="stop-color:#7B7B7B"/> <stop offset="0.4877" style="stop-color:#5D5D5D"/> <stop offset="0.7876" style="stop-color:#4B4B4B"/> <stop offset="1" style="stop-color:#444444"/> </linearGradient> <path id="For_Noise" fill="url(#For_Noise_1_)" d="M89.75,561.357c-3.75,0.25,885,0,885,0S962,571.5,942,571.5s-804.75,0-819.75,0 S94.5,563.607,89.75,561.357z"/>
</g>
<g id="Frame_1_">
</g>
<g id="Layer_14"> <path fill="#D8D8D8" stroke="#A8A8A8" stroke-miterlimit="10" d="M189.163,62.25h676.5c11.046,0,22.714,11.954,22.714,23v439.5 c0,11.046,0.046,27-11,27H177.663c-11.046,0-10-18.454-10-29.5v-435C167.663,76.204,178.117,62.25,189.163,62.25z"/> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="360.0054" y1="522.5" x2="360.0053" y2="28.5005" gradientTransform="matrix(1 0 0 1 168 37)"> <stop offset="0" style="stop-color:#282828"/> <stop offset="0.1052" style="stop-color:#1F1F1F"/> <stop offset="0.3614" style="stop-color:#0F0E0E"/> <stop offset="0.6438" style="stop-color:#050404"/> <stop offset="1" style="stop-color:#020101"/> </linearGradient> <path fill="url(#SVGID_1_)" stroke="#2C2C2C" stroke-width="2" stroke-miterlimit="10" d="M191.078,65.5h672.855 c11.048,0,21.571,10.74,21.571,21.786V539.5c0,11.046-0.454,20-11.5,20h-691.5c-11.046,0-12-8.954-12-20V87.286 C170.507,76.24,180.032,65.5,191.078,65.5z"/>
</g>
<g id="Base_1_"> <linearGradient id="Base_3_" gradientUnits="userSpaceOnUse" x1="-79" y1="517" x2="806.5" y2="517" gradientTransform="matrix(1 0 0 1 168 37)"> <stop offset="0" style="stop-color:#CACBCE"/> <stop offset="7.383307e-04" style="stop-color:#CDCED1"/> <stop offset="0.0134" style="stop-color:#FDFEFF"/> <stop offset="0.0161" style="stop-color:#E9EAEB"/> <stop offset="0.0246" style="stop-color:#ADAEB2"/> <stop offset="0.0286" style="stop-color:#96979B"/> <stop offset="0.0536" style="stop-color:#BBBCBF"/> <stop offset="0.082" style="stop-color:#E0E1E2"/> <stop offset="0.0971" style="stop-color:#EEEFF0"/> <stop offset="0.2125" style="stop-color:#F5F6F6"/> <stop offset="0.445" style="stop-color:#FFFFFF"/> <stop offset="0.4773" style="stop-color:#FBFBFC"/> <stop offset="0.5735" style="stop-color:#F5F5F6"/> <stop offset="0.6161" style="stop-color:#EFF0F1"/> <stop offset="0.6939" style="stop-color:#E9EAEB"/> <stop offset="0.7383" style="stop-color:#E1E2E3"/> <stop offset="0.797" style="stop-color:#DCDDDF"/> <stop offset="0.7972" style="stop-color:#DCDDDF"/> <stop offset="0.8873" style="stop-color:#DCDDDF"/> <stop offset="0.9025" style="stop-color:#D3D4D6"/> <stop offset="0.9276" style="stop-color:#BABBBE"/> <stop offset="0.958" style="stop-color:#939498"/> <stop offset="0.9651" style="stop-color:#95969A"/> <stop offset="0.9689" style="stop-color:#9D9EA2"/> <stop offset="0.9719" style="stop-color:#ABACAF"/> <stop offset="0.9744" style="stop-color:#BEBFC2"/> <stop offset="0.9767" style="stop-color:#D7D8DA"/> <stop offset="0.9788" style="stop-color:#F5F6F7"/> <stop offset="0.9793" style="stop-color:#FDFEFF"/> <stop offset="1" style="stop-color:#CACBCE"/> </linearGradient> <rect id="Base_2_" x="89" y="546" fill="url(#Base_3_)" stroke="#545454" stroke-width="0.5" stroke-miterlimit="10" width="885.5" height="16"/> <g id="ExprimentNoise" filter="url(#noise)"> <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-0.3633" y1="517.3496" x2="736.166" y2="517.3496" gradientTransform="matrix(1 0 0 1 168 37)"> <stop offset="0" style="stop-color:#CACBCE"/> <stop offset="7.383307e-04" style="stop-color:#CDCED1"/> <stop offset="0.0134" style="stop-color:#FDFEFF"/> <stop offset="0.0161" style="stop-color:#E9EAEB"/> <stop offset="0.0246" style="stop-color:#ADAEB2"/> <stop offset="0.0286" style="stop-color:#96979B"/> <stop offset="0.0536" style="stop-color:#BBBCBF"/> <stop offset="0.082" style="stop-color:#E0E1E2"/> <stop offset="0.0971" style="stop-color:#EEEFF0"/> <stop offset="0.2125" style="stop-color:#F5F6F6"/> <stop offset="0.445" style="stop-color:#FFFFFF"/> <stop offset="0.4773" style="stop-color:#FBFBFC"/> <stop offset="0.5735" style="stop-color:#F5F5F6"/> <stop offset="0.6161" style="stop-color:#EFF0F1"/> <stop offset="0.6939" style="stop-color:#E9EAEB"/> <stop offset="0.7383" style="stop-color:#E1E2E3"/> <stop offset="0.797" style="stop-color:#DCDDDF"/> <stop offset="0.7972" style="stop-color:#DCDDDF"/> <stop offset="0.8873" style="stop-color:#DCDDDF"/> <stop offset="0.9025" style="stop-color:#D3D4D6"/> <stop offset="0.9276" style="stop-color:#BABBBE"/> <stop offset="0.958" style="stop-color:#939498"/> <stop offset="0.9651" style="stop-color:#95969A"/> <stop offset="0.9689" style="stop-color:#9D9EA2"/> <stop offset="0.9719" style="stop-color:#ABACAF"/> <stop offset="0.9744" style="stop-color:#BEBFC2"/> <stop offset="0.9767" style="stop-color:#D7D8DA"/> <stop offset="0.9788" style="stop-color:#F5F6F7"/> <stop offset="0.9793" style="stop-color:#FDFEFF"/> <stop offset="1" style="stop-color:#CACBCE"/> </linearGradient> <rect x="167.637" y="548.699" fill="url(#SVGID_2_)" width="736.529" height="11.301"/> <rect x="167.637" y="548.699" fill="none" stroke="#545454" stroke-width="0.5" stroke-miterlimit="10" width="736.529" height="11.301"/> </g>
</g>
<g id="Handle"> <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="302.1836" y1="513.6992" x2="425.8164" y2="513.6992" gradientTransform="matrix(1 0 0 1 168 37)"> <stop offset="0" style="stop-color:#5D5E5F"/> <stop offset="0.0263" style="stop-color:#848588"/> <stop offset="0.0444" style="stop-color:#919295"/> <stop offset="0.0838" style="stop-color:#A7A8AB"/> <stop offset="0.1302" style="stop-color:#B8B9BC"/> <stop offset="0.1876" style="stop-color:#C3C4C7"/> <stop offset="0.2682" style="stop-color:#CACBCE"/> <stop offset="0.4918" style="stop-color:#CCCDD0"/> <stop offset="0.716" style="stop-color:#CACBCE"/> <stop offset="0.7967" style="stop-color:#C3C4C7"/> <stop offset="0.8543" style="stop-color:#B8B9BC"/> <stop offset="0.9008" style="stop-color:#A7A8AB"/> <stop offset="0.9402" style="stop-color:#919295"/> <stop offset="0.9584" style="stop-color:#848588"/> <stop offset="0.9708" style="stop-color:#7F8083"/> <stop offset="0.9854" style="stop-color:#727375"/> <stop offset="1" style="stop-color:#5D5E5F"/> </linearGradient> <path fill="url(#SVGID_3_)" d="M478.979,555.399c4,0,98.666,0,105.268,0c6.601,0,10.533-9.399,9.366-9.399s-122,0-123.166,0 C469.278,546,471.979,554.8,478.979,555.399z"/> <g id="ExP_Noise" filter="url(#noise)"> <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="314.1836" y1="514.3164" x2="413.3867" y2="514.3164" gradientTransform="matrix(1 0 0 1 168 37)"> <stop offset="0" style="stop-color:#5D5E5F"/> <stop offset="0.0263" style="stop-color:#848588"/> <stop offset="0.0444" style="stop-color:#919295"/> <stop offset="0.0838" style="stop-color:#A7A8AB"/> <stop offset="0.1302" style="stop-color:#B8B9BC"/> <stop offset="0.1876" style="stop-color:#C3C4C7"/> <stop offset="0.2682" style="stop-color:#CACBCE"/> <stop offset="0.4918" style="stop-color:#CCCDD0"/> <stop offset="0.716" style="stop-color:#CACBCE"/> <stop offset="0.7967" style="stop-color:#C3C4C7"/> <stop offset="0.8543" style="stop-color:#B8B9BC"/> <stop offset="0.9008" style="stop-color:#A7A8AB"/> <stop offset="0.9402" style="stop-color:#919295"/> <stop offset="0.9584" style="stop-color:#848588"/> <stop offset="0.9708" style="stop-color:#7F8083"/> <stop offset="0.9854" style="stop-color:#727375"/> <stop offset="1" style="stop-color:#5D5E5F"/> </linearGradient> <path fill="url(#SVGID_4_)" d="M489.241,555.632c3.209,0,79.17,0,84.466,0S582.16,547,581.223,547c-0.936,0-97.893,0-98.828,0 C481.457,547,483.624,555.08,489.241,555.632z"/> </g>
</g>
<g id="Screen"> <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="636.7578" y1="549.25" x2="83.2576" y2="-4.2502" gradientTransform="matrix(1 0 0 1 168 37)"> <stop offset="0" style="stop-color:#191919"/> <stop offset="0.0931" style="stop-color:#191919"/> <stop offset="1" style="stop-color:#191919"/> </linearGradient> <rect x="191.007" y="93" fill="url(#SVGID_5_)" stroke="#282828" stroke-width="2" stroke-miterlimit="10" width="674" height="433"/>
</g>
<g id="Layer_12"> <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="360.0073" y1="45.5269" x2="360.0073" y2="38.8062" gradientTransform="matrix(1 0 0 1 168 37)"> <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.2"/> <stop offset="0.0852" style="stop-color:#F6F6F6;stop-opacity:0.183"/> <stop offset="0.2272" style="stop-color:#DCDCDC;stop-opacity:0.1546"/> <stop offset="0.4087" style="stop-color:#B2B2B2;stop-opacity:0.1183"/> <stop offset="0.6225" style="stop-color:#797878;stop-opacity:0.0755"/> <stop offset="0.8607" style="stop-color:#302F2F;stop-opacity:0.0279"/> <stop offset="1" style="stop-color:#020101;stop-opacity:0"/> </linearGradient> <path fill="#191919" stroke="url(#SVGID_6_)" stroke-width="0.5" stroke-miterlimit="10" d="M528.007,76.056 c1.718,0,3.11,1.393,3.11,3.11c0,1.719-1.395,3.111-3.11,3.111c-1.719,0-3.109-1.393-3.109-3.111S526.289,76.056,528.007,76.056z" /> <path fill="#0F1E32" d="M527.833,77.611c0.859,0,1.555,0.697,1.555,1.556s-0.694,1.556-1.555,1.556 c-0.858,0-1.556-0.696-1.556-1.556C526.278,78.308,526.975,77.611,527.833,77.611z"/> <path opacity="0.5" fill="#FFFFFF" enable-background="new " d="M528.007,78.854c0.399,0,0.722,0.274,0.722,0.611 s-0.321,0.611-0.722,0.611c-0.397,0-0.722-0.273-0.722-0.611S527.608,78.854,528.007,78.854z"/>
</g>
<g id="Glare"> <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="713.4844" y1="33.4287" x2="517.3201" y2="373.1953" gradientTransform="matrix(1 0 0 1 168 37)"> <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.2"/> <stop offset="0.0852" style="stop-color:#F6F6F6;stop-opacity:0.183"/> <stop offset="0.2272" style="stop-color:#DCDCDC;stop-opacity:0.1546"/> <stop offset="0.4087" style="stop-color:#B2B2B2;stop-opacity:0.1183"/> <stop offset="0.6225" style="stop-color:#797878;stop-opacity:0.0755"/> <stop offset="0.8607" style="stop-color:#302F2F;stop-opacity:0.0279"/> <stop offset="1" style="stop-color:#020101;stop-opacity:0"/> </linearGradient> <path fill="url(#SVGID_7_)" d="M888.5,527.5c0,0-162-182.5-274.5-463c13.5,0,253.5,0,253.5,0S889,68,889,86.5 S888.5,527.5,888.5,527.5z"/>
</g>
</svg> </div>
</body>
</html>
</body>
</html>
SVG Noise over gradient Experiment - Script Codes CSS Codes
html { height:100%;
}
body { height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed;
background-image: linear-gradient(#8b9da9, #fff6e4);
}
div { padding:4em 0 0 0; width:1080px; margin:0 auto;
}
.animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;
}
@-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-20px); } 100% { opacity: 1; -moz-transform: translateX(0); }
}
@-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-20px); } 100% { opacity: 1; -o-transform: translateX(0); }
}
@keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); }
}
.fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft;
}
Developer | Chris Wright |
Username | chriswrightdesign |
Uploaded | July 12, 2022 |
Rating | 4 |
Size | 6,168 Kb |
Views | 24,288 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Inline SVG hamburger animation | 2,826 Kb |
SVG iMac | 5,932 Kb |
SVG Noise blended radial | 2,946 Kb |
Experiments with nth-of-type animation | 3,015 Kb |
SVG Reflection | 8,859 Kb |
Typography SVG experiment | 3,472 Kb |
Flexbox responsive navigation | 4,272 Kb |
Background Noisy Radial Gradient | 3,207 Kb |
Grid - More complex grids with span | 3,695 Kb |
Offscreen zoom nav | 5,205 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by Alex Bergin | Abergin | 3,347 Kb |
LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
Ball Physics | Getsetbro | 3,149 Kb |
IE11 Test | Boostnewmedia | 4,998 Kb |
SVG Icons Template | Legofsalmon | 2,618 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
Header | Er40 | 1,542 Kb |
SVG Scalable Text | Said_FD | 1,451 Kb |
Bootstrap Carousel Fade Transition | Rowno | 2,484 Kb |
Google Chrome Icon using Pure CSS in one DIV | Grssam | 3,627 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!