logo
Tags down

shadow

Is there a way to add an edge to the curve gradient?


By : mhamala
Date : September 16 2020, 08:00 AM
I hope this helps you . For shapes like this, I strongly recommend using SVG instead. SVG is a vector graphics format that uses XML syntax. SVG can be directly embedded into HTML, alternatively you can include SVG files via a regular tag.
You can create SVG by hand, but that's tedious. Personally, I use InkScape, which is free and open source software. However, the SVG files saved by InkScape are usually not well optimized for the web, so I recommend to then run your SVG file through an optimizer like SVGOMG.
code :
<svg xmlns="http://www.w3.org/2000/svg" width="367.6" height="197.1" viewBox="0 0 97.3 52.2"><g stroke="#000" stroke-width="1.1"><path d="M.5 26.5C.5 15 28.8 1.5 49.1.6 75.6-.6 97.2 12.2 96.7 30.8c-.3 11.7-7.2 20.6-14.3 20.8-11 .3-17.6-20-36.9-19.2-13.7.4-19.2 18.6-27.4 18.5C10 50.8.5 34.5.5 26.5z" fill="#22b14c"/><path d="M6.8 30.2C6.9 35 13 45.8 18.7 43.8c8-2.7 16.8-17.2 30.6-17.2 20.2 0 23.1 12.5 30 13.2 2.5.3 4.2-4.7 1-8a44 44 0 00-31-8.8c-9.5.7-21.7 10.3-26.3 11.2-3.3.6-8.2-2-7.7-5.3.7-4.8 22.4-10.8 34.6-11 20.3-.3 22 5.6 32 9 0 0 7 .8 6.9-3.7-.2-11-25.9-14.2-37.8-14-11.6.2-44.6 7.7-44.2 21z" fill="#00a2e8"/></g></svg>


Share : facebook icon twitter icon

Filled in R gradient curve


By : Luffy
Date : March 29 2020, 07:55 AM
around this issue To fill a gap (a 2-d shape) in 3-d you should not use lines, since they are 1-d objects. Fill the gap with triagles or quads (flat objects with four corners) instead.
code :
library(rgl)

y <- seq(-5,25,by=0.1)
x <- seq(5,20,by=0.2)
z <- outer(.3*x, y, function(my.sd, my.y) dnorm(my.y, mean=7.5, sd=my.sd))
z[z < .02] <- NA

col <- rainbow(length(x))[rank(x)]        
xn <- length(x)
yn <- length(y)

open3d()
persp3d(x, y, z, color=col, xlim=c(5,20), ylim=c(5,10), axes=F, box=F,
        xlab="exp", ylab="obs", zlab="p")
rgl.quads(rep(x[xn], (yn-1)*4),
          sapply(2:yn, function(i) y[i-c(0:1,1:0)]),
          sapply(2:yn, function(i) c(z[xn,i-0:1], 0, 0)),
          color=col[xn])

Reconstructing curve from gradient


By : Edwin
Date : March 29 2020, 07:55 AM
I hope this helps you . I found how to do it, by using numpy's trapz function (trapezoidal rule integration).
Following up on the code I presented on the question, to reproduce the input array test, we do:
code :
x = np.linspace(1, 30, 100)
integral = list()
for t in range(len(x)):
    integral.append(test[0] + np.trapz(numerical_grad[:t+1], x[:t+1]))

How to create a curve between two gradient using CSS?


By : nutana
Date : March 29 2020, 07:55 AM
may help you . Here is a solution using linearGradient with SVG.
code :
.container {
  width: 500px;
  height: 200px;
  background:linear-gradient(to bottom right, #de350b, #0065ff);
}
svg {
  width:100%;
}
<div class="container">
  <svg mlns='http://www.w3.org/2000/svg' viewBox="0 0 64 64">
    <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ad3" />
      <stop offset="100%" stop-color="#add" />
    </linearGradient>
  </defs>
    <path d='M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z'  fill="url(#grad)"/>
  </svg>
</div>
.container {
  width: 500px;
  height: 200px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="500" ><defs><linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%23ad3" /><stop offset="100%" stop-color="%23add" /></linearGradient></defs><path d="M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z"  fill="url(%23grad)"/></svg>'), 
  linear-gradient(to bottom right, #de350b, #0065ff);
  
  display:flex;
  justify-content:space-around;
  align-items:center;
  flex-direction:column;
  color:#fff;
}
<div class="container">
<p>TOP</p>
<p>BOTTOM</p>
</div>
.box {
  height:200px;
  position:relative;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:100%;
  background: linear-gradient(to bottom right, #ad3, #add);
}
.box:after {
  -webkit-mask:
    radial-gradient(100% 80% at top   ,white 79.5%,transparent 80%) left,
    radial-gradient(100% 80% at bottom,transparent 79.5%,white 80%) right;
  mask:
    radial-gradient(100% 80% at top   ,white 79.5%,transparent 80%) left,
    radial-gradient(100% 80% at bottom,transparent 79.5%,white 80%) right;
  -webkit-mask-size:50.1% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-size:50.1% 100%;
  mask-repeat:no-repeat;
  background:linear-gradient(to bottom right, #de350b, #0065ff);
}
<div class="box">

</div>
.box {
  height:200px;
  margin:10px;
  position:relative;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:100%;
  background: linear-gradient(to bottom right, #ad3, #add);
}
.box:after {
  -webkit-mask:
    radial-gradient(var(--r1,100%) var(--r2,80%) at top   ,white 79.5%,transparent 80%) left,
    radial-gradient(var(--r1,100%) var(--r2,80%) at bottom,transparent 79.5%,white 80%) right;
  mask:
    radial-gradient(var(--r1,100%) var(--r2,80%) at top   ,white 79.5%,transparent 80%) left,
    radial-gradient(var(--r1,100%) var(--r2,80%) at bottom,transparent 79.5%,white 80%) right;
  -webkit-mask-size:50.1% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-size:50.1% 100%;
  mask-repeat:no-repeat;
  background:linear-gradient(to bottom right, #de350b, #0065ff);
}
<div class="box">

</div>

<div class="box" style="--r1:82%;--r2:97%">

</div>

<div class="box" style="--r1:126%;--r2:72%">

</div>
.box {
  height:200px;
  margin:10px;
  position:relative;
  background:linear-gradient(to right,blue,black);
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:calc(100% - var(--b,10px)); /*control the gap here*/
  -webkit-mask:
    radial-gradient(var(--r1,100%) var(--r2,80%) at var(--p1,top)   ,white 79.5%,transparent 80%) var(--d1,right),
    radial-gradient(var(--r1,100%) var(--r2,80%) at var(--p2,bottom),transparent 79.5%,white 80%) var(--d2,left);
  mask:
    radial-gradient(var(--r1,100%) var(--r2,80%) at var(--p1,top)   ,white 79.5%,transparent 80%) var(--d1,right),
    radial-gradient(var(--r1,100%) var(--r2,80%) at var(--p2,bottom),transparent 79.5%,white 80%) var(--d2,left);
  -webkit-mask-size:50.1% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-size:50.1% 100%;
  mask-repeat:no-repeat;
}
.box:before {
  top:0;
  background:linear-gradient(to bottom right, #de350b, #0065ff);
}
.box:after {
  bottom:0;
  background: linear-gradient(to bottom right, #ad3, #add);
  --p1:bottom;
  --p2:top;
  --d1:left;
  --d2:right;
}
<div class="box">

</div>

<div class="box" style="--r1:82%;--r2:97%;--b:20px">

</div>

<div class="box" style="--r1:126%;--r2:72%;--b:5px">

</div>

Complex border-radius Issue (different edge curve to corner curve) in CSS


By : Josh
Date : March 29 2020, 07:55 AM
wish of those help I believe the shape you're using may be called a "squircle." Regardless, if you can create it as a vector, then you can create an avatar mask using an SVG.
For example, you could make a squircle shape in a vector editing program and use it as a clip path.
code :
<img class="clip-svg" src="https://picsum.photos/450" alt="Lorem Picsum">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 450"><title>squircle</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1">
  <clipPath id="squircle">
  <path d="M225,449.5c-38.23,0-74.86-3.95-105.92-11.43-33.37-8-58.59-19.87-72.94-34.21S20,364.29,11.93,330.92C4.45,299.86.5,263.23.5,225s4-74.86,11.43-105.92C20,85.71,31.8,60.49,46.14,46.14S85.71,20,119.08,11.93C150.14,4.45,186.77.5,225,.5s74.86,4,105.92,11.43c33.37,8,58.59,19.87,72.94,34.21S430,85.71,438.07,119.08c7.48,31.06,11.43,67.69,11.43,105.92s-3.95,74.86-11.43,105.92c-8,33.37-19.87,58.59-34.21,72.94S364.29,430,330.92,438.07C299.86,445.55,263.23,449.5,225,449.5Z"/><path d="M225,1c38.19,0,74.78,4,105.8,11.42,33.29,8,58.42,19.8,72.7,34.08s26.07,39.41,34.08,72.7c7.47,31,11.42,67.61,11.42,105.8s-3.95,74.78-11.42,105.8c-8,33.29-19.8,58.42-34.08,72.7s-39.41,26.07-72.7,34.08C299.78,445.05,263.19,449,225,449s-74.78-3.95-105.8-11.42c-33.29-8-58.42-19.8-72.7-34.08s-26.07-39.41-34.08-72.7C5,299.78,1,263.19,1,225s4-74.78,11.42-105.8c8-33.29,19.8-58.42,34.08-72.7s39.41-26.07,72.7-34.08C150.22,5,186.81,1,225,1m0-1C150.66,0,76.31,15.26,45.79,45.79c-61,61.05-61,297.37,0,358.42C76.31,434.74,150.66,450,225,450s148.69-15.26,179.21-45.79c61.05-61,61.05-297.37,0-358.42C373.69,15.26,299.34,0,225,0Z"/>
  </clipPath></g></g></svg>
.clip-svg {
  clip-path: url(#squircle);
}
<svg width="516" height="516" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 516 516">
  <defs>
    <style>
      .background-squircle{fill:url(#linear-gradient);}
      .inner-image{clip-path:url(#clip-path);}
    </style>
    <clipPath id="clip-path">
      <path d="M258,482.5c-38.23,0-74.86-3.95-105.92-11.43-33.37-8-58.59-19.87-72.94-34.21S53,397.29,44.93,363.92C37.45,332.86,33.5,296.23,33.5,258s4-74.86,11.43-105.92c8-33.37,19.87-58.59,34.21-72.94S118.71,53,152.08,44.93C183.14,37.45,219.77,33.5,258,33.5s74.86,4,105.92,11.43c33.37,8,58.59,19.87,72.94,34.21s26.17,39.57,34.21,72.94c7.48,31.06,11.43,67.69,11.43,105.92s-3.95,74.86-11.43,105.92c-8,33.37-19.87,58.59-34.21,72.94S397.29,463,363.92,471.07C332.86,478.55,296.23,482.5,258,482.5Z"/>
    </clipPath>
    <linearGradient id="linear-gradient" y1="262" x2="524" y2="262" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fff"/><stop offset="1"/>
    </linearGradient>
  </defs>
  <title>SquircleWithImage</title>
  <g id="Avatar_1" data-name="avatar">
    <path class="background-squircle" d="M258,515.5c-43.84,0-85.85-4.53-121.47-13.11-38.28-9.22-67.21-22.79-83.67-39.25s-30-45.39-39.25-83.67C5,343.85.5,301.84.5,258S5,172.15,13.61,136.53C22.83,98.25,36.4,69.32,52.86,52.86s45.39-30,83.67-39.25C172.15,5,214.16.5,258,.5S343.85,5,379.47,13.61c38.28,9.22,67.21,22.79,83.67,39.25s30,45.39,39.25,83.67C511,172.15,515.5,214.16,515.5,258S511,343.85,502.39,379.47c-9.22,38.28-22.79,67.21-39.25,83.67s-45.39,30-83.67,39.25C343.85,511,301.84,515.5,258,515.5Z"/>
    <g class="inner-image">
      <image id="Image" data-name="Layer 0" width="516" height="516" xlink:href="https://picsum.photos/516"/>
    </g>
  </g>
</svg>

How to add a gradient in a Bezier curve?


By : user3715218
Date : March 29 2020, 07:55 AM
wish helps you You can decompose a bezier curve into points using the bezierPoint()method and then draw straight line segments between successive points, specifying the colour for each individual line segment (meanwhile gradually lerping the colour of course).
I've produced a method which can do that in the code example below.
code :
void setup() {
  size(500, 500);
  smooth(4);
  noLoop();
  redraw();
  strokeWeight(5);
  noFill();
}

void draw() {
  background(35);
  drawCurve(new PVector(50, 50), new PVector(456, 490), #31B5E8, #F0E62E, 50, -1);
  drawCurve(new PVector(150, 75), new PVector(340, 410), #B9FF00, #FF00C5, 150, 1);
  drawCurve(new PVector(200, 480), new PVector(480, 30), #007CFF, #89CA7F, 100, 1);
}

void drawCurve(PVector head, PVector tail, color headCol, color tailCol, float curve, int curveDir) {

  final float theta2 = angleBetween(tail, head);
  final PVector midPoint = new PVector((head.x + tail.x) / 2, 
    (head.y + tail.y) / 2);
  final PVector bezierCPoint = new PVector(midPoint.x + (sin(-theta2) * (curve * 2 * curveDir)), 
    midPoint.y + (cos(-theta2) * (curve * 2 * curveDir)));

  PVector point = head.copy();
  for (float t=0; t<=1; t+=0.025) {
    float x1 = bezierPoint(head.x, bezierCPoint.x, bezierCPoint.x, tail.x, t);
    float y1 = bezierPoint(head.y, bezierCPoint.y, bezierCPoint.y, tail.y, t);
    PVector pointB = new PVector(x1, y1);
    stroke(lerpColor(headCol, tailCol, t));
    line(point.x, point.y, pointB.x, pointB.y);
    point = pointB.copy();
  }
}  

static float angleBetween(PVector tail, PVector head) {
  float a = PApplet.atan2(tail.y - head.y, tail.x - head.x);
  if (a < 0) {
    a += PConstants.TWO_PI;
  }
  return a;
}
Related Posts Related Posts :
  • How to properly style checkbox with letter in it?
  • Problem displaying <ul> element inside div
  • Could not change footer's backgroud color
  • How to store update data on modal laravel
  • left sticky position not working on smaller screens (keep sticky div width)
  • Change the color of a led on html
  • how to send a form data to server using post api in angular 7
  • how to remove firefox's Default Dropdown for input html
  • liquid variables stop working when layout is defined
  • Angular 7 :Apply style sheet to input field on change of value i.e when Entered date is less than current date
  • how to attach an arrow at the end of ellipsis dots
  • placing a div after a css ::after
  • h3 text its been overflown
  • Force footer to be alway in the bottom in CSS
  • How to implement scrollbar for particular row in html
  • Dropdown Bootstrap 4 doesn't work in production of angular's application
  • What's the difference in the order of applying selectors
  • What does CSS width 100% actually means for block element?
  • Fitting the image in the cell
  • media queries not working on mobile screen size
  • Absolute position in CSS
  • How to align an image in a list ( ul > li ) in HTML/CSS?
  • How does this specific line of code work?
  • Why Does CSS in style Tag trum main.css?
  • SVG circle should adapt to CSS grid height without overlapping
  • pass id of the selected checkbox(which areloaded with ngFor) when it is checked
  • <b-form-select-option> not working in Bootstrap Vue
  • How to show the same element when hovering a li using only CSS?
  • Can you have one Style and put all CSS code inside?
  • What is the use of class="container" attribute inside <div> tag in bootstrap?
  • Spacing between element like tab functionality
  • background-image Property of Css is not working
  • CSS not working in HTML file - potential browser issue?
  • Little icon images added to span class inside <li> tags?
  • Could someone please explain what exactly "Overflow" in CSS does to a background in this example?
  • How do i add a border to a background shape as made in my code?
  • How to fix a paragraph tag overflowing on css column?
  • Bind Html with variables in Angular
  • How can I make a percentage circle like google?
  • can an <small> be inside a <p> tag?
  • Creating this type of grid
  • Media queries not working despite simple use
  • How can a text can be moved with the mouse pointer on an image when hovering in css or html without using JQuery
  • How to remove the light blue frame in gojs's example "productionProcess"?
  • angular 8 i have problem in sending id in angular
  • Div does not support two images
  • How to conditionally render a DIV and REACT component for OPENING and CLOSING tags?
  • Set the text-align to be center from css not working
  • Trying to align 3 images and 3 texts on the same line with flexbox
  • Trouble formatting table
  • Replaced navbar has a stylesheet conflicting with the old one, despite removing old stylesheet
  • CSS not formatting page due to incorrect usage of div id tag or could it be due to files not called right?
  • Implementing a custom CSS skill bar
  • About CSS and HTML
  • Who to draw and fill two slightly offset curves with the Canvas API
  • Webgl or graphics card problem with the shader effect
  • How to align footer to bottom
  • What is wrong with this SVG file?
  • My website is having trouble implementing external CSS, but was working fine with internal CSS. What is the issue with m
  • While I hove on image hover effect are not showing. Also I can use overlay on image
  • shadow
    Privacy Policy - Terms - Contact Us © 35dp-dentalpractice.co.uk