Three-color linear gradient SVG with a middle color expanding in width

I'm working with a linear gradient and here is the code:

<svg width="120" height="240" >
  <linearGradient id="dsp" x1="0" x2="0" y1="0" y2="1">
    <stop class="stop1" offset="0%"/>
    <stop class="stop2" offset="50%"/>
    <stop class="stop3" offset="100%"/>
  </linearGradient>
  <style type="text/css">
    .stop1 { stop-color: red; }
    .stop2 { stop-color: yellow; stop-opacity: 0.7; }
    .stop3 { stop-color: green; }
  </style>

My goal is to increase the height of the middle color, which is yellow. When I tried increasing the offset value for yellow, it shifted downwards instead of expanding in width. I would like the red and green colors to only occupy 10% of the SVG's height while adjusting the distribution as follows:

Red >> 15%
yellow >>  70%
green >> 15%

This is how I want the colors distributed.

htmlcsssvg

Answer №1

just insert two additional stops between the initial and final stop, right before the midpoint...

REVISION inspired by a comment from squeamish ossifrage

.stop1 { stop-color: red; }
    .stop2 { stop-color: yellow; stop-opacity: 0.7; }
    .stop3 { stop-color: green; }
<svg width="120" height="240" >
  <linearGradient id="dsp" x1="0" x2="0" y1="0" y2="1">
    <stop class="stop1" offset="0%"/>
    <stop class="stop2" offset="20%"/>
    <stop class="stop2" offset="80%"/>
    <stop class="stop3" offset="100%"/>
  </linearGradient>
  <rect x="0" y="0" width="240" height="120" fill="url(#dsp)"/>
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

perfecting the styling of a tab management system

For reference, please check out the following link: http://jsfiddle.net/XEbKy/3/ In my design, I have organized two layers of tabs. The top layer consists of two tabs while the bottom layer has three tabs. My goal is to have all these tabs neatly enclosed ...

css

Using a HTML value as an argument in a React component

Can someone help me figure out how to pass an HTML value as a parameter for my function? Here is the code snippet I have: <input type ="text" placeholder="Smart Contract Bytecode" name="name" id ="scbytecode" className="nice-textbox"/> <button i ...

htmlreactjsparameters

Error encountered in Azure DevOps pipeline: Unknown command line option detected: '--ext'

When working locally on a Mac, I have set up the following npm script in my package.json: npx @svgr/cli --template path/to/template.js --ext .tsx my-icon.svg This script functions correctly on my Mac. However, when running the script in an Azure DevOps ...

svgnpmazure-devops

The div element is not expanding as expected, causing the content to overlap

In my code, I have a portfolio-container div with two images and paragraphs inside a list element. The issue I'm facing is that the div is not expanding vertically, causing the images and paragraphs to overlap with the footer below. I've attempte ...

htmlcss

What does the HTML and JS code look like when using Next.Js?

Here's an illustration of the desired result: codepen.io/j0be/pen/jWGVvV How can I implement this HTML and JS in Next.js? I am looking to customize this code using TypeScript and SCSS in Next.js. However, I am unsure about how to convert the HTML an ...

javascripthtmlreactjssassnext.js

Updating an SVG after dynamically adding a group with javascript: a step-by-step guide

Currently, I am working on a circuit builder project using SVG for the components. In my HTML structure, I have an empty SVG tag that is scaled to full width and height. When I drag components from the toolbar into the canvas (screen), my JavaScript functi ...

javascripthtmlsvgdomxhtml

Issue with CSS 3 gradient compatibility in Internet Explorer 8

My CSS3 gradient button is working perfectly on all browsers except for IE8. To make it work on IE8, I am utilizing CSS3 Pie. You can see the search button in action by visiting: Upon inspecting my console, I noticed an error on this line: PIE.htc, lin ...

csscss3pie

CSS animation properties

Is it possible to animate only the div container and not the "p" inside? div { width: 100px; height: 100px; background-color: red; -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 4s; /* Safari 4.0 ...

htmlcss

The clip-path in Div: Css is malfunctioning and not displaying correctly

I am trying to create a chat bubble using CSS with rounded corners and a bottom-right arrow. However, I am having trouble getting the arrow to display correctly. https://i.stack.imgur.com/gVXOV.png The CSS styling for the chat bubble is as follows: ...

htmlcss

The Viadeo Social Toolbox seems to be encountering technical difficulties at the moment

I attempted to utilize a Viadeo Social Toolbox, specifically the Viadeo Share Button, but it seems to be malfunctioning in certain browsers? I came across some outdated viadeo share URLs like this: http://www.viadeo.com/shareit/share/?url=${url}&title ...

javascriptjqueryhtmlviadeo

Personalized CSS styling for Jquery Mobile version 1.3

Having trouble with styling a page in jquery using CSS, specifically aligning #navgroup to the center of the footer and removing an additional white counter from the slider. Here is my code: <!doctype html> <html lang="en> <head> < ...

jquerycssjquery-mobilejquery-mobile-navbar

"Escape the confines of traditional div sections with the dynamic features of

In the beginning, I have arranged two rows of three divs on my webpage, which is how I intend to use them later. However, when testing the 'mobile view', the divs in the section overflow and move into the next part below the section. This causes ...

htmlcssfullpage.js

Conversation panel text slipping out of <div>

I am currently working on creating a mock "chat" feature. The issue I am facing is that when I repeatedly click the "send" button, the text overflows from the div. Is there a way to prevent this by stopping the text near the border of the div or adding a s ...

javascriptjqueryhtmlcsschat

Ways to prompt a specific text value to generate varied responses

Whenever I try to input the letter "h", I expect a specific value in return but for some reason, it's not working as intended. Despite my best efforts to troubleshoot the issue, I have been unsuccessful in finding a solution. It's frustrating bec ...

javascripthtmltextboxrespond-to

The animation came to a halt after a brief period

Here is the code I wrote. When the button is clicked, the 3 containers should start flashing indefinitely, but they stop after a while. I can't figure out why. Any ideas? <!DOCTYPE html> <html> <head> <title></title> & ...

javascriptjqueryhtml

Troubleshooting: Why Isn't Jquery Hide/Show Function

I am currently working on enhancing my Jquery skills to toggle text visibility, but I am facing some issues. I am certain that it's something quite simple. Below is the HTML code I am working with: <script src="js/showhide.js"></script> ...

jqueryhtml

Avoiding overlapping in setTimeOut when using jQuery.hover()

Looking to trigger an effect one second after the page loads, and then every 3 seconds in a loop. When the user hovers over a specific element with the ID #hover, the effect should pause momentarily. It should then resume 2 seconds after the user stops hov ...

javascriptjqueryhtmlcsssettimeout

Transmit data from list items in the HTML to a form

Based on my understanding, there are limited options available to style an <option> tag within a <select> dropdown and it appears quite plain. So I was thinking about creating a more visually appealing dropdown using <ul> <li> tags ...

htmlcssselecthtml-lists

Unable to generate a navigation panel using HTML/CSS and jQuery

I recently completed the basic courses in HTML/CSS, JavaScript, jQuery, and PHP on Codecademy. I'm currently working on creating a website using HTML/CSS and jQuery in Codecademy's codebits. However, I'm facing some issues with my navigation ...

jquerycss

Achieving a centered SearchBar with a single button on the NativeBase header

I am trying to center the search bar with the menu button on the right side of the header using Nativebase. The code for this is provided below: <Header> <Body> <Button style={styles.searchButton} onPress={() => ...

cssreactjsreact-nativenative-base