I am trying to add sharped cut effect on text. I have achieved this thing:
But I want to achieve this backplate/background sharped cut text effect:
My Code:
.wrapper {
background-color: #000;
}
.previewText {
text-shadow: var(--text-color) 0px 0px 10px, var(--text-color) 0px 0px 25px, #000 1px 1px 1px;
--text-color: #fff;
}
.previewText svg {
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
<div class="wrapper">
<div class="preview-items--item__text previewText cut-sharp" style="font-family: Amarila; font-size: 50px; --text-color:#30cbfd;">
<div style="filter: url("#cutSharpru5i2bye4iml4tvt6s0");">
<p>work <span style="font-family: PoiretOne;">HARD</span></p>
<p><span style="font-family: PoiretOne;">dream</span> big</p>
</div>
<svg viewBox="0 0 100 100">
<filter id="cutSharpru5i2bye4iml4tvt6s0">
<feMorphology in="SourceGraphic" result="dilated" operator="dilate" radius="2.5"></feMorphology>
<feFlood flood-color="#fff" flood-opacity="0.12" result="neon"></feFlood>
<feComposite in="neon" in2="dilated" operator="in" result="cutSharpru5i2bye4iml4tvt6s0"></feComposite>
<feMerge>
<feMergeNode in="cutSharpru5i2bye4iml4tvt6s0"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</svg>
</div>
</div>
Can someone help me to achieve that thing as shown in the image #2? I am stuck. I tried a lot but i just got a little bit of a stroke with svg, the stroke should be in the full background of texts as shown in the image #2.
You need to use lighting primitives to get those edge lighting effects. Lighting primitives are buggy and usually trigger some kind of weird cross-browser bug then when you try to run them on Safari. Even Chrome runs into issues with them because they're just not very well debugged.
That caveat provided - this is the basic structure of how you'd accomplish something like this. It's a painstaking process of trial and error to figure out the exact right combination of lighting effect attributes to get exactly what you want - so this is something in the right neighborhood but I would not claim this is professional quality yet.
I would probably recommend Photoshop rather than SVG filters for this kind of effect.
body {
background-color: black;
}
.meow {
font-family: 'Meow Script', cursive;
font-size: 11pt;
font-weight: light;
fill: #faf;
stroke: none;
}
.comfort {
font-family: 'Comfortaa', sans-serif;
font-size: 11pt;
font-weight: light;
fill: #FAF;
stroke: none;
}
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Meow+Script&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<svg width="800px" height="600px" viewBox="0 0 100 100">
<defs>
<filter id="shiny-filter" height="200%" color-interpolation-filters="sRGB">
<!-- Part 1 neon text -->
<feMorphology operator="dilate" radius="0.25" result="dilated-original"/>
<feGaussianBlur stdDeviation="0.75"/>
<feColorMatrix type="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1.1 0"
result="glow"/>
<feComposite operator="over" in2='SourceGraphic' result="neon-text"/>
<!-- Part 2 drop shadow -->
<feGaussianBlur stdDeviation="0.5" in="dilated-original" result="blurred-dil-orig"/>
<feFlood flood-color="#111"/>
<feComposite operator="in" in2="blurred-dil-orig"/>
<feOffset dy="4" result="drop-shadow-y"/>
<feComposite operator="over" in="neon-text" in2="drop-shadow-y" result="neon-text-and-shadow"/>
<!-- Part 3 backplate -->
<feMorphology radius="2" operator="dilate" in="dilated-original" result="super-dilated-original"/>
<feFlood x="9.5" y="4" width="72" height="30" flood-color="#111"/>
<feComposite operator="over" in="super-dilated-original"/>
<feGaussianBlur stdDeviation="1" result="combined-backdrop"/>
<feFlood flood-color="#222"/>
<feComposite operator="in" in2="combined-backdrop" result="combined-backdrop-grey"/>
<!-- Part 4 lighting -->
<feSpecularLighting in="combined-backdrop-grey" result="topOut" specularExponent="15" lighting-color="#FcF" surfaceScale="2">
<fePointLight x="50" y="-150" z="10"/>
</feSpecularLighting>
<feSpecularLighting in="combined-backdrop-grey" result="leftOut" specularExponent="15" lighting-color="#FcF" surfaceScale="2" >
<fePointLight x="-150" y="50" z="10"/>
</feSpecularLighting>
<feSpecularLighting in="combined-backdrop-grey" result="rightOut" specularExponent="15" lighting-color="#FcF" surfaceScale="2" >
<fePointLight x="150" y="50" z="10"/>
</feSpecularLighting>
<feMerge>
<feMergeNode in="combined-backdrop-grey"/>
<feMergeNode in="neon-text-and-shadow"/>
<feMergeNode in="leftOut"/>
<feMergeNode in="topOut"/>
<feMergeNode in="rightOut"/>
</feMerge>
</filter>
</defs>
<g transform="translate(0 3)" filter="url(#shiny-filter)">
<text class="meow" x="10" y="11">work</text>
<text class="comfort" x="38" y="14">HARD</text>
<text class="comfort" x="9" y="33">DREAM</text>
<text class="meow" x="73" y="33">big</text>
</g>
</svg>
Related
I'm trying to add some inset shadows to my svg, to make it look more like this
Instead of like this
I tried adding an inset shadow to every path (filter="url(#inset-shadow)"), using the filter pattern I got from this answer and have listed below, but all it ends up doing is kind of giving each path an outline. You can check the code at this fiddle to see what I'm talking about.
<filter id="inset-shadow">
<feComponentTransfer in="SourceAlpha" result="inset-selection">
<feFuncA type="discrete" tableValues="0 1 1 1 1 1" />
</feComponentTransfer>
<feComponentTransfer in="SourceGraphic" result="original-no-fill">
<feFuncA type="discrete" tableValues="0 0 1" />
</feComponentTransfer>
<feColorMatrix type="matrix" in="original-no-fill" result="new-source-alpha" values="0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0" />
<feGaussianBlur in="new-source-alpha" result="blur" stdDeviation="5" />
<feGaussianBlur in="new-source-alpha" result="blur2" stdDeviation="10" />
<feGaussianBlur in="new-source-alpha" result="blur3" stdDeviation="15" />
<feMerge result="blur">
<feMergeNode in="blur" mode="normal" />
<feMergeNode in="blur2" mode="normal" />
<feMergeNode in="blur3" mode="normal" />
</feMerge>
<feComposite operator="in" in="inset-selection" in2="blur" result="inset-blur" />
<feComposite operator="over" in="original-no-fill" in2="inset-blur" />
</filter>
How can I add inset shadows to my shapes, to make my svg look more like the image at the top of this post?
The one you are using may have been failing because it was intended for transparent paths. I didn't spend much time working out what is wrong.
In any case, here's one I've created, that might be a bit easier to understand and tinker with.
<svg viewBox="0 0 200 200" width="400">
<defs>
<filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%">
<!-- change this to desired inset blur colour -->
<feFlood x="0%" y="0%" width="100%" height="100%" flood-color="black" result="flood"/>
<!-- cut a hole out of the flood fill where out shape is -->
<feComposite operator="out" in="flood" in2="SourceAlpha" result="outside" />
<!-- stack blurs to get a better effect -->
<feGaussianBlur in="outside" result="blur" stdDeviation="5" />
<feGaussianBlur in="outside" result="blur2" stdDeviation="10" />
<feGaussianBlur in="outside" result="blur3" stdDeviation="15" />
<feMerge result="blur">
<feMergeNode in="blur" mode="normal" />
<feMergeNode in="blur2" mode="normal" />
<feMergeNode in="blur3" mode="normal" />
</feMerge>
<!-- clip the full blur against the shape to retain just the part inside our shape -->
<feComposite operator="in" in="blur" in2="SourceGraphic" result="inset-blur" />
<!-- blend with our original graphic to create the final result -->
<feBlend in="SourceGraphic" in2="inset-blur" mode="multiply"/>
</filter>
</defs>
<rect x="50" y="50" width="100" height="100" fill="linen" filter="url(#inset-shadow)"/>
</svg>
And here is a modified version of your fiddle with this filter applied.
You may want to tinker with the stdDeviation values to adjust the size of your inset blur.
So I was building a website using HTML and CSS along with some JS. My main browser has always been Firefox and the website looks perfect on it as well. However, after opening it in Chrome, I noticed a lot has changed.
The fonts appear different: I tried CSS resetting and other known techniques, but I do not know why the fonts appear to be changed. What would you guys suggest in solving this issue?
An entire element does not even appear on Chrome and I am totally confused as to why or how that can happen.
Code:
HTML
<div class="masked-copy texture-orange big-type">
<p><span class="firstline">Coffee </span><span class="secondline">'N'</span> <span class="thirdline">Code!</span></p>
<!--
-->
<div class="explanation">
<h1>
<div class="goo" contenteditable="true">Elected as a <i>Senior Project Lead</i> <br>at the Biggest Club<br> involved in Technology and Coding: <span id = 'newline'>Coffee</span> 'N' Code.</div>
</h1>
<!-- Filter: https://css-tricks.com/gooey-effect/ -->
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
</div>
</div>
CSS
.texture-orange {
color: #e5895f;
background-image: url('https://www.apple.com/v/iphone-xr/a/images/overview/copy_texture_4_large.jpg');
}
.big-type {
/* Copied almost wholesale from the Apple site CSS; changed the font-stack */
font-size: 60px;
height: 60vh;
line-height: 1.0625; /* The height Apple used to tighten up the spacing a bit. */
font-weight: 600; /* Nice, chunky, bold! */
font-family: "Helvetica Neue","Helvetica","Arial",sans-serif;
}
.masked-copy {
/* This is it! Magic: */
-webkit-background-clip: text;
color: transparent !important;
}
.project3 .goo{
position: relative;
top: -160px;
left: -30px;
}
.project3 .explanation .goo #newline::before{
content: '\a';
white-space: pre;
}
As seen on Firefox
As seen on Chrome
You have to nest the <h1> tag into the <div> tag:
<div class="masked-copy texture-orange big-type">
<p><span class="firstline">Coffee </span><span class="secondline">'N'</span> <span class="thirdline">Code!</span></p>
<!--
-->
<div class="explanation">
<div>
<h1 class="goo" contenteditable="true">Elected as a <i>Senior Project Lead</i> <br>at the Biggest Club<br> involved in Technology and Coding: <span id = 'newline'>Coffee</span> 'N' Code.</h1>
</div>
<!-- Filter: https://css-tricks.com/gooey-effect/ -->
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
</div>
</div>
Also, your code doesn't match the picture
I want to make an svg looks like it's on 3D by adding a small light in the top and left BORDER and a shadow in the bottom and right BORDER
something like this
#div1 {
background: #ddd;
}
#div1, #div2, #div3 {
width: 100px;
height: 100px;
position: relative;
}
#div2 {
box-shadow: inset -2px -2px 10px 1px #000;
position: absolute;
}
#div3 {
box-shadow: inset 2px 2px 14px 1px #fff;
position: absolute;
}
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
But I don't know how to do that with svg filter
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="1000">
<defs>
<filter id="filter1" x="0" y="0">
<feSpecularLighting result="specOut"
specularExponent="20" lighting-color="#bbbbbb">
<fePointLight x="-100" y="-100" z="600"/>
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="specOut"
operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
</filter>
</defs>
<path filter="url(#filter1)" fill="#fff" stroke="#000" d="M20,20 L220,20 L220,220 L20,220 L20,20 "></path>
</svg>
Help please and thanks
Firstly, you are trying to light a pure white rectangle with a dim white light. You aren't going to see anything.
If you make the rectangle darker, you'll start to see some effect.
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="300">
<defs>
<filter id="filter1" x="0" y="0">
<feSpecularLighting result="specOut"
specularExponent="20" lighting-color="#bbbbbb">
<fePointLight x="-100" y="-100" z="600"/>
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="specOut"
operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
</filter>
</defs>
<path filter="url(#filter1)" fill="#666" stroke="#000" d="M20,20 L220,20 L220,220 L20,220 L20,20 "></path>
</svg>
But in the above example we are only getting gradient of light over our rectangle. How do we make a sort-of bevel edge on the rectangle?
It is important to know that it is not really the RGB channels of an element that determine how the lighting filter components behave. The lighting components treat the alpha component of the colour as a bump map. Varying values of alpha become a topological map that effects the way the pixels are lit.
One way to create varying values of alpha is to use a gaussian blur filter. Here's what that looks like. Note that it is the alpha channel (SourceAlpha) of our shape that we are blurring.
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="300">
<defs>
<filter id="filter2">
<feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur1"/>
<feBlend in="SourceGraphic" in2="blur1" mode="multiply"/>
</filter>
</defs>
<path filter="url(#filter2)" fill="#666" stroke="#000" d="M20,20 L220,20 L220,220 L20,220 L20,20 "></path>
</svg>
Now if use that blurred alpha channel, we get something close to what you are after.
You can fiddle with the blur, the lighting filter values, and the feComposite values to adjust the effect.
Note that I've also switched to using an feDistantLight here. I think it is more appropriate for this purpose.
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="300">
<defs>
<filter id="filter2">
<feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur1"/>
<feSpecularLighting result="specOut" in="blur1" specularConstant="1.2" specularExponent="12" lighting-color="#fff">
<feDistantLight azimuth="225" elevation="45"/>
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
</filter>
</defs>
<path filter="url(#filter2)" fill="#666" stroke="#000" d="M20,20 L220,20 L220,220 L20,220 L20,20 "></path>
</svg>
Update
To handle the situation where shapes overlap (see comments), then you will need to clip away any parts of the blur that is outside the shape. You can do that with another feComposite operation.
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="300">
<defs>
<filter id="filter2">
<feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur1"/>
<feSpecularLighting result="specOut" in="blur1" specularConstant="1.2" specularExponent="12" lighting-color="#fff">
<feDistantLight azimuth="225" elevation="45"/>
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="result"/>
<feComposite operator="atop" in2="SourceGraphic"/>
</filter>
</defs>
<path filter="url(#filter2)" fill="#666" stroke="#000" d="M20,20 L220,20 L220,220 L20,220 L20,20 "></path>
<path filter="url(#filter2)" fill="#666" stroke="#000" d="M40,40 L200,40 L200,110 L40,110 L40,40 "></path>
<path filter="url(#filter2)" fill="#666" stroke="#000" d="M40,120 L200,120 L200,200 L40,200 L40,120 "></path>
</svg>
I have this problem, where I need to add box-shadow to a circle, but it seems it is not possible.
Why does it not work or how could I add circle shadow to the </circle> element in SVG path to have the glow effect with current specifications?
/*
circle {
fill: red; <-- works
box-shadow: 0 0 50px red; <-- does not work
}
*/
<svg width="450" height="450">
<path id="motionPath"
d="M 50 200 L 400 200 "
stroke="black" fill="transparent" />
<circle class="circle" r=5 fill=#45b6fe z-index=55>
<animateMotion dur="8s" repeatCount="indefinite" rotate="auto">
<mpath href="#motionPath" />
</animateMotion>
</circle>
</svg>
To add a box-shadow, you will need to work on feGaussianBlur attribute. Below is the code for you and it generates beautiful box-shadow. You can check the output for the same
Note: To see the shadow properly, I have increased the dimension of circle. You can keep as per your requirement.
<svg width="450" height="450">
<defs>
<filter id="f1" x="-40%" y="-40%" width="180%" height="180%" filterUnits="userSpaceOnUse">
<feGaussianBlur in="SourceAlpha" stdDeviation="8"/>
<feOffset dx="5" dy="5" result="offsetblur"/>
<feOffset dx="-5" dy="-5" result="offsetblur"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<path id="motionPath"
d="M 50 200 L 400 200 "
stroke="black" fill="transparent" />
<circle class="circle" r=10 fill=#45b6fe z-index=55 style="filter: url(#f1);">
<animateMotion dur="8s" repeatCount="indefinite" rotate="auto">
<mpath href="#motionPath" />
</animateMotion>
</circle>
</svg>
UPDATE:
As per your requirement, I have added desired background color to the box shadow.
<svg width="450" height="450">
<defs>
<filter id="f1" x="-40%" y="-30%" width="180%" height="180%" filterUnits="userSpaceOnUse" >
<feColorMatrix result="offsetblur" in="offOut" type="matrix"/>
<feGaussianBlur in="SourceAlpha" stdDeviation="10" />
<feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blur"/>
<feOffset in="blur" dx="5" dy="5" result="offsetBlur" stdDeviation="1.7"/>
<feFlood flood-color="red" flood-opacity="5" result="offsetColor"/>
<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<path id="motionPath"
d="M 50 200 L 400 200 "
stroke="black" fill="transparent" />
<circle class="circle" r=10 fill=white z-index=55 style="filter: url(#f1);">
<animateMotion dur="8s" repeatCount="indefinite" rotate="auto">
<mpath href="#motionPath" />
</animateMotion>
</circle>
</svg>
so I have this in one of my sites and it works fine for me
.booking-view-tariff-circle > img {
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 2px 2px 4px #000;
display: block;
height: 80px;
width: 80px;
margin-left: auto;
margin-right: auto;
object-fit: cover;
position: relative;
left: -45px;
top: -78px;
box-shadow: 0 8px 8px rgba(0,0,0,0.54);
I have a very fancy font I want to use in SVG so I can combine it with other things in an SVG for a final product. It clips off the overhangs and other fancy bits beyond the base font size. How do I get those to show again? For some reason, the snippet is not reading my font URL but my own file reads and displays it fine, so do whatever you need to do to get it to work enough for testing purposes.
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href="http://www.cafenocturne.com/fonts/FontPorcelain.css" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 500 300">
<defs>
<filter id="dropshadow" width="250px" height="250px">
<feOffset result="offOut" in="SourceAlpha" dx="3" dy="3" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<text x="80" y="80" style="font-family: PorcelainRegular;
font-size: 80px;
stroke: #000000;
fill: #ffffff;
filter: url(#dropshadow);">
Cafe
</text>
<text x="80" y="150" style="font-family: PorcelainRegular;
font-size : 80px;
stroke : #000000;
fill : #ffffff;
filter: url(#dropshadow);">
Nocturne
</text>
</svg>