Adjust Width of linear gradient path HTML/CSS

Question

I'm trying to convert the below path obtained from this CodePen: https://codepen.io/ainalem/pen/EQXjOR

to double its width. What I mean by this is that my input form is double the width of the input form in the example and I need my path to accommodate this, however, I have little experience with this and I'm not sure how to proceed.

<svg viewBox="0 0 320 300">
                <defs>
                    <linearGradient
                            inkscape:collect="always"
                            id="linearGradient"
                            x1="13"
                            y1="193.49992"
                            x2="307"
                            y2="193.49992"
                            gradientUnits="userSpaceOnUse">
                        <stop
                                style="stop-color:#ff00ff;"
                                offset="0"
                                id="stop876" />
                        <stop
                                style="stop-color:#5c0931;"
                                offset="1"
                                id="stop878" />
                    </linearGradient>
                </defs>
                <path d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 239" />
            </svg>

What have you tried? How gradients work is clearly described in [the SVG specification](https://www.w3.org/TR/SVG/single-page.html#chapter-pservers) and many online tutorials. Please have a go working this out for yourself. Then come back and ask again if you get stuck. But I will give you a hint: `x1` and `y1` specify the start point of the gradient, and `x2` and `y2` specify the end of the gradient. — Paul LeBeau, Jun 23 '18 at 05:37
This isn't about `x1` and `y1`, its about the path. I've changed some of the 239 into 480 which kinda helped but idk what to do next. — Alk, Jun 23 '18 at 09:42
Possible duplicate of [css transition with linear gradient](https://stackoverflow.com/questions/7363141/css-transition-with-linear-gradient) — Ravi Kumar Yadav, Jun 24 '18 at 11:21

score 0 · Answer 1 · answered Jun 24 '18 at 11:20

I'm not clear on what you want exactly, since your path is completely different from the one in the codepen you link to.

But if you just want a horizontal gradient that spans the whole of your shape, you can just do the following:

<svg viewBox="0 0 320 300">
                <defs>
                    <linearGradient
                            id="linearGradient"
                            x1="0"
                            y1="0"
                            x2="1"
                            y2="0">
                        <stop
                                style="stop-color:#ff00ff;"
                                offset="0"
                                id="stop876" />
                        <stop
                                style="stop-color:#5c0931;"
                                offset="1"
                                id="stop878" />
                    </linearGradient>
                </defs>
                <path d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 239"
                      fill="url(#linearGradient)"/>
            </svg>

What I want is the exact same path as in the link, except I have one more text field and also each of the text fields is double the width of the example. — Alk, Jun 24 '18 at 12:08

Adjust Width of linear gradient path HTML/CSS

1 Answers1