Cut-out discord profile effect.
I'm trying to get something like the discord profile picture, where the user status cuts the image. The code pen link contains what I've done so far. I'd like to know if there's an easy way to achieve this without svg shenanigans.
https://codepen.io/sum117/pen/vYVjeJe?editors=1100
31 Replies
There are no svgs in your codepen. You may have updated it since you posted it here.
What you have done looks fine to me.
They're not saying they have an SVG.
They're asking if it could be done without it.
They asked if it were posible to do it without a svg which implies that they had done it with one otherwise the question makes no sense.
I merely pointed out that there were no svgs in their code which lead me to assume that they had changed the code since they posted the question.
Not sure how you understood that, but I didn't assume that from the question 
The user posted some code and asked it it were possible to do it without SVG. By asking if it can be done without a SVG i that automatically implies that that they had done it with one, otherwise the question makes no sense.
How did you understand the question?
Well, they might know about it. Done by other people.
That doesn't imply they have done it in this specific CodePen.
But that makes no sense. In the codepen as it is that have achieved their goal of recreating what they wanted. And they have done so without using SVGs. Why ask a question if they already my have the answer?
Maybe @sum117 can chip in and let us know what they meant as clearly the question is not as clear as (I) thought.
I assumed they don't want to do it with SVG/clip-path (or perhaps they don't know about the latest).
Which adds a "transparent" border (reason a lot of people ask for this kind of thing, based on my experience).
What they have done here as demo, is a patch, in my opinion. Since it it's simply matching the BG's color.
Good morning! Thank you so much for checking in! @Chris @myntsu
Yes. What I did is a patch. I wanted to have it to be transparent. Sadly, I don't know how to achieve that. I used the background color but imo that's not optimal (I think)
Ah, ok. Thanks for clearing that up.
I too am now interested in knowing how this could be done with an alternative method. Using an svg wouldn’t have even crossed my mind so that is why I assumed that it was something that you had tried and moved on from.
Out of interest, why do you consider using the background image a not optimal? I suppose on a gradient background you might have issues but other than that…
Fascinating!
As I have never had to recreate something like this I was not aware of the potential issues and known methods to do this with SVGs, hence my incorrect interpretation of the question.
I have been reading an extensive article on this which may be of interest and give @sum117 the answer that you are looking for https://ishadeed.com/article/thinking-about-the-cut-out-effect/ it is from 2021 so, at the rate CSS is changing, even this may be out of date by now 😀
Thank you so much for this great article. It indeed catches everything. Will be fixing my code pen to use the SVG mask solution, which the author described as being the best.
I have been looking at it myself and couldn't resist having a play.
So far I have just been playing with the CSS mask solution. I will then extend it to add one using the SVG mask solution that you mention.
https://codepen.io/cbolson/pen/NWOMmg
For some reason I can't open your pen. Maybe it's set to private?
opps, I didn't copy the last letter of the url
https://codepen.io/cbolson/pen/NWOMmgj
looks excellent
I can't take any credit - just copied from that url that I sent you.
Before doing one with the SVG mask I am trying to work out the calculations so that it can be resized easily without hard-coded values
Just added Discord style hover effect 😆
hell yeah! hahaha! mind if I steal it 👀 ?
So easy, so subtle, yet so beautiful
of course not, as I say, it isn't mine. I am just playing around with the code from the url
I also love how it aligns perfectly with the status icon
and even if I had created it it wouldn't be an issue 😅
Also, Chris, you find the css mask solution to be better than the others?
On first glance it looks simpler and is certainly easier to understand. The only issue the author had with this solution wa if you wanted to use it for more complex shapes.
sorry, had to pop out for a bit.
I've added the SVG mask version. I am now just fine tuning the custom properties in an attempt to make it all dynamic.
Of these 2 versions, and for this use case, I defiantly prefer the CSS mask version - far less mark-up and easier to understand and manipulate.
Another problem with the SVG mask is if you want the animation on hover - that is going to be more complicated.
If you're using a mask-image, you can do it with gradients as well (since they are an image in CSS). https://codepen.io/kevinpowell/pen/JjmZPBb/e664c28e2554e2d3884f2635f605b8c8
I have updated my pen with the SVG method so that it can animate the border radius. Rather than using a circle as the mask I changed it to use a rectangle and animated it's "xr" and "xy" properties. I still want to fiddle with it a bit more to make it more scaleable but the concept is there.
I'm probably missing something here, but couldn't it be done with a psuedo element who has a border color of the background color and a higher z index than the actual element?
Could just be a border on the element too, if it matches the background 😁
That was my answer this morning. Since then I have learnt a lot! The issue is with changing background colors and/or gradient backgrounds.
I should have spent the day programming an api but instead have spent it make codepens 😆
For example with Kevin's pen a border color wouldn't work as he has used a gradient background.
Ah I never even thought about gradient backgrounds
I was thinking you could just use a variable so if the background color changes the border color changes too but yea a gradient would mess that up
Kevin I'm a very big fan! I love your videos, they helped me so much in my current job! Always wanted to say thank you to you 🙏
Hey, it was fun wasn't it? Now I know 3 different ways of doing this, and I'm pretty sure I'm now a certified user icon maker. 🤣
Thank you so much for all your answers! Great community. I had lots of fun! I mark this as resolved 🙂
Why am I not able to fork this?
I probably saved it as private