Kevin Powell - Community•14mo ago

i want to know how i can make this design

every thing else i think i can pull off but the curves in the middle can someone explain how i can make that m not good with photoshop is there any other way

24 Replies

Mannix•14mo ago

you don't need to be good with photoshop you just need to find a proper brush 🙂

Anonymous DEVOP•14mo ago

so ill need photoshop correct i cant avoid it? or do it with css or smth

Mannix•14mo ago

well a graphic editing software it doesn't need to be photoshop something where you can choose different brushes. But yeah with css you would need a clip-path and to recreate something like that would be a nightmare.

MarkBoots•14mo ago

you could google for black and white grunge/jagged edge textures. and use those as a mask-image in css it just hit me, I think they are using an svg of some sort of island. think you could find something like that

MarkBoots•14mo ago

here the svg

Asset_2.svg

Anonymous DEVOP•14mo ago

how did u find the exact image that they were using

MarkBoots•14mo ago

i am just that good... ... or i found a downloadable theme which included an adobe illustrator file: https://www.freepik.com/free-vector/gradient-texture-travel-agency-landing-page_24492952.htm

Freepik

Free Vector | Gradient texture travel agency landing page

Download this Free Vector about Gradient texture travel agency landing page, and discover more than 82 Million Professional Graphic Resources on Freepik. #freepik #vector #travellandingpage #travelwebsite #travelagency

vince•14mo ago

Texturelabs also may be of assistance This design screams someone who has no idea about web design though 😂

Anonymous DEVOP•14mo ago

where do i learn designing from👀

vince•14mo ago

lots of reading, watching, practicing, doing

Anonymous DEVOP•14mo ago

reading what

<svg width="605" height="701" viewBox="0 0 605 701" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.4">
<path d="M381.87 434.92C381.87 481.507 388.691 498.89 367.495 539.235C346.298 579.581 329.19 581.781 292.477 605.075C255.764 628.368 245.476 643.551 203.084 643.551C160.691 643.551 150.404 628.368 113.691 605.075C76.9778 581.781 59.8696 579.581 38.6733 539.235C17.477 498.89 24.2978 481.507 24.2978 434.92C24.2978 388.332 17.477 370.95 38.6733 330.605C59.8696 290.259 76.9778 288.059 113.691 264.765C150.404 241.472 160.691 226.289 203.084 226.289C245.476 226.289 255.764 241.472 292.477 264.765C329.19 288.059 346.298 290.259 367.495 330.605C388.691 370.95 381.87 388.332 381.87 434.92Z" fill="#0A0A0A"/>
</g>
<g opacity="0.4">
<path d="M446.755 410.091C446.755 465.996 454.94 486.854 429.504 535.269C404.069 583.684 383.539 586.324 339.483 614.276C295.427 642.229 283.083 660.448 232.211 660.448C181.34 660.448 168.995 642.229 124.94 614.276C80.8841 586.324 60.3543 583.684 34.9187 535.269C9.48318 486.854 17.6681 465.996 17.6681 410.091C17.6681 354.186 9.48318 333.327 34.9187 284.912C60.3543 236.497 80.8841 233.857 124.94 205.905C168.995 177.952 181.34 159.733 232.211 159.733C283.083 159.733 295.427 177.952 339.483 205.905C383.539 233.857 404.069 236.497 429.504 284.912C454.94 333.327 446.755 354.186 446.755 410.091Z" fill="#1B1B1B"/>
</g>
<g opacity="0.4">
<path d="M602.478 350.5C602.478 428.767 613.937 457.969 578.327 525.75C542.718 593.531 513.976 597.226 452.298 636.36C390.62 675.493 373.337 701 302.118 701C230.898 701 213.615 675.493 151.937 636.36C90.2594 597.226 61.5176 593.531 25.9078 525.75C-9.70195 457.969 1.757 428.767 1.757 350.5C1.757 272.233 -9.70195 243.031 25.9078 175.25C61.5176 107.469 90.2594 103.774 151.937 64.6402C213.615 25.5067 230.898 0 302.118 0C373.337 0 390.62 25.5067 452.298 64.6402C513.976 103.774 542.718 107.469 578.327 175.25C613.937 243.031 602.478 272.233 602.478 350.5Z" fill="#292929"/>
</g>
</svg>

<svg width="605" height="701" viewBox="0 0 605 701" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.4">
<path d="M381.87 434.92C381.87 481.507 388.691 498.89 367.495 539.235C346.298 579.581 329.19 581.781 292.477 605.075C255.764 628.368 245.476 643.551 203.084 643.551C160.691 643.551 150.404 628.368 113.691 605.075C76.9778 581.781 59.8696 579.581 38.6733 539.235C17.477 498.89 24.2978 481.507 24.2978 434.92C24.2978 388.332 17.477 370.95 38.6733 330.605C59.8696 290.259 76.9778 288.059 113.691 264.765C150.404 241.472 160.691 226.289 203.084 226.289C245.476 226.289 255.764 241.472 292.477 264.765C329.19 288.059 346.298 290.259 367.495 330.605C388.691 370.95 381.87 388.332 381.87 434.92Z" fill="#0A0A0A"/>
</g>
<g opacity="0.4">
<path d="M446.755 410.091C446.755 465.996 454.94 486.854 429.504 535.269C404.069 583.684 383.539 586.324 339.483 614.276C295.427 642.229 283.083 660.448 232.211 660.448C181.34 660.448 168.995 642.229 124.94 614.276C80.8841 586.324 60.3543 583.684 34.9187 535.269C9.48318 486.854 17.6681 465.996 17.6681 410.091C17.6681 354.186 9.48318 333.327 34.9187 284.912C60.3543 236.497 80.8841 233.857 124.94 205.905C168.995 177.952 181.34 159.733 232.211 159.733C283.083 159.733 295.427 177.952 339.483 205.905C383.539 233.857 404.069 236.497 429.504 284.912C454.94 333.327 446.755 354.186 446.755 410.091Z" fill="#1B1B1B"/>
</g>
<g opacity="0.4">
<path d="M602.478 350.5C602.478 428.767 613.937 457.969 578.327 525.75C542.718 593.531 513.976 597.226 452.298 636.36C390.62 675.493 373.337 701 302.118 701C230.898 701 213.615 675.493 151.937 636.36C90.2594 597.226 61.5176 593.531 25.9078 525.75C-9.70195 457.969 1.757 428.767 1.757 350.5C1.757 272.233 -9.70195 243.031 25.9078 175.25C61.5176 107.469 90.2594 103.774 151.937 64.6402C213.615 25.5067 230.898 0 302.118 0C373.337 0 390.62 25.5067 452.298 64.6402C513.976 103.774 542.718 107.469 578.327 175.25C613.937 243.031 602.478 272.233 602.478 350.5Z" fill="#292929"/>
</g>
</svg>

i want to rotate this but cant figure out how to calculate the orign can u help me out

MarkBoots•14mo ago

you want to animate the rotation? or just have the whole thing in another orientation?

Anonymous DEVOP•14mo ago

all of then rotating from their center

Anonymous DEVOP•14mo ago

like this one should rotate from here

Anonymous DEVOP•14mo ago

i tried

.ring{
    transition: all 1s ease-in-out;
}

.ring:hover{
    transform: rotate(360deg);
    transform-origin: center;

}

.ring{
    transition: all 1s ease-in-out;
}

.ring:hover{
    transform: rotate(360deg);
    transform-origin: center;

}

but it dont work

MarkBoots•14mo ago

try this

.ring {
  transform-box: fill-box;
  transform-origin: center;
  transition: all 1s ease-in-out
  
}
.ring:hover {
  transform: rotate(45deg);
}

.ring {
  transform-box: fill-box;
  transform-origin: center;
  transition: all 1s ease-in-out
  
}
.ring:hover {
  transform: rotate(45deg);
}

Anonymous DEVOP•14mo ago

i dint get it why was it not working before what was hapening before using transform box

vince•14mo ago

Design stuff. There isn't 1 source that will make u a designer

MarkBoots•14mo ago

Can not check now, but i think it was centered in the viewbox

Anonymous DEVOP•14mo ago

do u know any good tutorials for seo?

Jochem•13mo ago

please keep posts to a single topic, and don't @ people for unrelated questions. Make a fresh post, probably in #discussions if you want people's input about SEO

clevermissfox•13mo ago

I second using an svg. Think of it like a page separator but rotated

vince•13mo ago

Found this last night, looks really good https://www.learningseo.io/ But yea discussions topic if you haven't yet

Gaming

Programming

i want to know how i can make this design