Save Expand icon

Ron Valstar
front-end developer

Logo

I really just wanted to update my WordPress core.

But I got a little overexcited and redesigned my site. One thing let to another and I decided to redesign my logo. Then I thought: you know what would be freaking cool, a logo made of one HTML element and pure CSS.

Which worked out just fine if I may say so myself:

#logo {
    width: 67px;
    height: 108px;
}
#logo:before, #logo:after {
    content: '';
    position: relative;
    top: 14px;
    left: 4px;
    display: block;
    width:56px;
    height:28px;
    background-color: #000;
    border-radius: 0 28px 0 28px;
    transform: rotate(40deg) skewx(-3deg) skewy(-3deg);
}
#logo:after {
    top: 29px;
    left: -6px;
    width:80px;
    height:32px;
    transform:rotate(46deg) skewx(-9deg) skewy(-9deg);
}

Now the only problem is: how the hell do I turn this into vector?