svgradial-gradients
SVG radial gradient has small spaces between elements
I needed to add a radial / conical gradient into an SVG circle. Unfortunately, there is no support for that on the standard: https://wiki.inkscape.org/wiki/index.php/Advanced_Gradients#Conical_gradient
So, I went for a solution similar to this: https://stackoverflow.com/a/18210763 but instead of using multiple colors, I use the same color with an alpha variation.
Mi final result ended like this:
<g fill="none" stroke-width="8" transform="translate(-49,-10) scale(1.2) rotate(0, 125, 50)" opacity="1">
<path d="M127.5593032836914,78.30342873930931 C124.73236846923828,78.30342873930931 122.4406967163086,76.50826272368431 122.4406967163086,74.29380044341087 C122.4406967163086,72.07933816313744 124.73236846923828,70.28415688872337 127.5593032836914,70.28415688872337 V78.30342873930931 z" fill="#23B26D"
transform="scale(-1,1) translate(-252,-48.7)" />
<path d="M124.99998474121094,25.63152313232422 A24.357080459594727,24.368465423583984 0 0 1 146.0932159423828,37.81575393676758 "
stroke="url(#redyel)" />
<path d="M146.0932159423828,37.81575393676758 A24.357080459594727,24.368465423583984 0 0 1 146.0932159423828,62.18423271179199 "
stroke="url(#yelgre)" />
<path d="M146.0932159423828,62.18423271179199 A24.357080459594727,24.368465423583984 0 0 1 124.99998474121094,74.36847496032715 "
stroke="url(#grecya)" />
<path d="M124.99998474121094,74.36847496032715 A24.357080459594727,24.368465423583984 0 0 1 103.90676879882812,62.18423271179199 "
stroke="url(#cyablu)" />
<path d="M103.90676879882812,62.18423271179199 A24.357080459594727,24.368465423583984 0 0 1 103.90676879882812,37.81575393676758 "
stroke="url(#blumag)" />
<path d="M103.90676879882812,37.81575393676758 A24.357080459594727,24.368465423583984 0 0 1 124.99998474121094,25.63152313232422 "
stroke="url(#magred)" />
</g>
<defs>
<linearGradient id="redyel" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#23B26D" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#23B26D" stop-opacity="0.41"/>
</linearGradient>
<linearGradient id="yelgre" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0"
y2="1">
<stop offset="0%" stop-color="#23B26D" stop-opacity="0.41"/>
<stop offset="100%" stop-color="#23B26D" stop-opacity="0.52"/>
</linearGradient>
<linearGradient id="grecya" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0"
y2="1">
<stop offset="0%" stop-color="#23B26D" stop-opacity="0.52"/>
<stop offset="100%" stop-color="#23B26D" stop-opacity="0.63"/>
</linearGradient>
<linearGradient id="cyablu" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0"
y2="0">
<stop offset="0%" stop-color="#23B26D" stop-opacity="0.63"/>
<stop offset="100%" stop-color="#23B26D" stop-opacity="0.74"/>
</linearGradient>
<linearGradient id="blumag" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0"
y2="0">
<stop offset="0%" stop-color="#23B26D" stop-opacity="0.74"/>
<stop offset="100%" stop-color="#23B26D" stop-opacity="0.85"/>
</linearGradient>
<linearGradient id="magred" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1"
y2="0">
<stop offset="0%" stop-color="#23B26D" stop-opacity="0.85"/>
<stop offset="100%" stop-color="#23B26D" stop-opacity="1"/>
</linearGradient>
<linearGradient id="lgrad" x1="100%" y1="50%" x2="0%" y2="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0"/>
<stop offset="60%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>
</linearGradient>
<linearGradient id="rgrad" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0"/>
<stop offset="60%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>
</linearGradient>
</defs>
https://codepen.io/scvsoft-marianovicente/pen/abmrdXo
It looks good enough, but now, I have small spaces between each element. (Depending on the browser in some places looks more visible than others).
I tried to apply a distortion/blur. to hide that but affects all borders. It is possible to hide this spaces?
Solution
Try an annealing filter (dilate/erode). See if it solves your issues.
<svg class="streak-animation" viewbox="0 0 250 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="anneal">
<feMorphology operator="dilate" radius="1" />
<feMorphology operator="erode" radius="1" />
</filter>
</defs>
<g class="all-streaks" filter="url(#anneal)">
More details - as requested:
- The feMorphology filter replaces every pixel's R,G,B and A values with the maximum (dilate) or minimum (erode) value of those color channels in a 2*radius. For simple monochrome shapes, this effectively adds (or subtracts) a one pixel outline around the shape.
- In this case, the dilate fills in the super thin lines between shapes (and adds a 1px border around the whole shape). But then when you do an erode, there is no longer any semi-transparent pixels between the shapes to supply a low alpha value to erode, so only the 1px outline around the whole shape is removed.
- Math.Sin() gives incorrect value
- How to run my python script when the sunOS is start booting
- Express-session: not resetting cookie expiration on each request
- Getting a stack overflow exception when normalizing a vector
- Edit default summary function in R gives error for multiple variables
- What was a For loop? Why isn't it needed in R?
- How to use download button in shiny and save results in various formats (csv, texte, pdf, spss...)?
- Why are there two assignment operators, `<-` and `->` in R?
- lm()$assign: what is it?
- How to get the value of list(...) in R and S functions
- Design matrix for MLM from library(lme4) with fixed and random effects
- how to generate elements not included in my sample
- Create a matrix with gradually changing values without a for loop
- Emacs ESS and S-plus ( S+ ) 8.1 compatability
- How to lag date-index in a time-series in R?
- Nonlinear regression in R / S
- Calling R from S-Plus?