Search code examples
svgcurve

Can someone create this SVG curve please?


Anybody able to replicate this image into a SVG curve please? Been trying for hours (never used SVG paths before).

The image to replicate is here:

enter image description here

We have some code, however it is round the wrong way...

    <svg width="1300" height="303" viewbox="0 0 100 100" preserveAspectRatio="none">
    <path d="M0,0 
    L100,0
    C25,50 50,75 0,100z" fill="#760032" />
    </svg>

Solution

  • If you have access to Adobe Illustrator you can convert jpeg's and png's in to SVG very easily.

    • Open the image in Illustrator
    • Click on it to select it
    • Click the Image Trace button found on the toolbar (you may need to change the settings to diferent quality)
    • Click Expand (where Image Trace button was)
    • Voila! you have an SVG version of your image, you can edit the vectors
    • Click off of the image, a button should appear in the toolbar called Document Setup
    • Within it's options is the Edit Artboards button
    • Expand the artboard to fit the size of your image
    • Save as SVG
    • Open the SVG file in a text editor and you'll get code similar to this:

    <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="1305.933px" height="245.063px" viewBox="0 0 1305.933 245.063" style="enable-background:new 0 0 1305.933 245.063;"
         xml:space="preserve">
    <g>
        <path style="fill:#FEFEFE;" d="M5,173.072C5,116.746,5.039,60.42,4.903,4.094C4.894,0.669,5.576-0.001,8.999,0
            c430.946,0.099,861.892,0.099,1292.838,0c3.423-0.001,4.101,0.67,4.096,4.093c-0.124,80.323-0.124,160.646,0,240.97
            c0.005,3.424-0.673,4.094-4.096,4.093c-430.946-0.099-861.892-0.093-1292.838-0.153c-1.296,0-3.1,1.127-4-0.94
            c431.394,0,862.788,0,1294.182,0.005c3.054,0,5.812,0.848,5.795-4.414c-0.211-66.483-0.166-132.967-0.068-199.451
            c0.006-3.812-0.469-4.877-4.568-3.495c-64.031,21.6-128.741,41.007-193.75,59.414c-69.635,19.717-139.676,37.901-210.195,54.192
            c-73.948,17.084-148.261,32.372-223.145,44.816c-40.895,6.796-81.888,12.93-123.044,17.865
            c-36.375,4.361-72.838,7.873-109.391,10.511c-41.724,3.011-83.499,4.614-125.303,4.201c-52.828-0.522-105.498-3.704-157.718-12.471
            c-39.49-6.629-78.29-15.824-115.677-30.332C29.584,184.041,17.363,178.372,5,173.072z"/>
        <path style="fill:#760A34;" d="M5,173.072c12.363,5.3,24.584,10.968,37.117,15.832c37.388,14.508,76.187,23.703,115.677,30.332
            c52.22,8.766,104.889,11.948,157.718,12.471c41.804,0.413,83.579-1.19,125.303-4.201c36.554-2.638,73.017-6.149,109.391-10.511
            c41.157-4.935,82.15-11.069,123.044-17.865c74.884-12.444,149.197-27.732,223.145-44.816
            c70.519-16.292,140.559-34.476,210.195-54.192c65.009-18.407,129.719-37.814,193.75-59.414c4.099-1.383,4.574-0.317,4.568,3.495
            c-0.098,66.484-0.143,132.968,0.068,199.451c0.017,5.263-2.74,4.414-5.795,4.414C867.788,248.063,436.394,248.063,5,248.063
            C5,223.066,5,198.069,5,173.072z"/>
    </g>
    </svg>
    

    See this pen too