Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
The community reviewed whether to reopen this question 5 months ago and left it closed:
Original close reason(s) were not resolved
Improve this question
I need to implement this as doughnut chart - I looked around for css/svg/canvas solutions but couldn't find any reliable way of doing it.
I know I could have fully rounded corners of each segment, but that's not what I'm looking for.
I would use this answer combined with this one
.palette {
--g:20px; /* The gap between shapes*/
--s:50px; /* the size*/
height: 300px;
width: 300px;
position:relative;
display:inline-block;
overflow:hidden;
filter: url('#goo');
}
.palette > * {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border:var(--s) solid var(--c,red);
border-radius:50%;
clip-path:polygon(
calc(50% + var(--g)/2) 50%,
calc(50% + var(--g)/2) 0%,
100% 0%,
100% calc(33.745% - var(--g)/2),
50% calc(50% - var(--g)/2));
}
.color1 {
transform:rotate(72deg);
--c:blue;
}
.color2 {
transform:rotate(144deg);
--c:orange;
}
.color3 {
transform:rotate(-72deg);
--c:green;
}
.color4 {
transform:rotate(-144deg);
--c:purple;
}
<div class="palette">
<div class="color1"></div>
<div class="color2"></div>
<div class="color3"></div>
<div class="color4"></div>
<div class="color5"></div>
</div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
That filter can also be applied to SVG stroked paths:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="20 20 60 60">
<defs>
<filter id="round">
<feGaussianBlur in="SourceGraphic" stdDeviation="1.5" result="round1" />
<feColorMatrix in="round1" mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -14" result="round2"/>
<feComposite in="SourceGraphic" in2="round2" operator="atop"/>
</filter>
</defs>
<style>
path{
fill:none;
stroke-width:9;
}
</style>
<path stroke-dasharray="70 230" stroke-dashoffset="94" value="70" stroke="blue"
filter="url(#round)" pathLength="300" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
></path>
<path stroke-dasharray="55 245" stroke-dashoffset="173" value="55" stroke="gold"
filter="url(#round)" pathLength="300" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
></path>
<path stroke-dasharray="45 255" stroke-dashoffset="242" value="45" stroke="purple"
filter="url(#round)" pathLength="300" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
></path>
<path stroke-dasharray="30 270" stroke-dashoffset="296" value="30" stroke="red"
filter="url(#round)" pathLength="300" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
></path>
</svg>
<style> svg{ width:180px; background:lightgreen } </style>
Related
I'm trying to figure out how to use the icons in Bootstrap 4.5 via CSS. Are there any code examples you can point me to? Ideally I'd like to know what CSS declarations are needed to be able to use them like Font Awesome e.g.
<i class="fas fa-info-circle"></i>.
The documentation at bootstrap https://icons.getbootstrap.com/#usage is not sufficient for me to figure out how to use them in a similar fashion. In other words, I'd like to be able to use jquery to set a class on an object to add an icon dynamically but I don't understand the CSS I need to do this.
CSS:
.bi-headphones::before {
display: inline-block;
content: "";
background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-headphones' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 3a5 5 0 0 0-5 5v4.5H2V8a6 6 0 1 1 12 0v4.5h-1V8a5 5 0 0 0-5-5z'/%3E%3Cpath d='M11 10a1 1 0 0 1 1-1h2v4a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-3zm-6 0a1 1 0 0 0-1-1H2v4a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-3z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1rem 1rem;
width:1rem; height:1rem;
}
Usage:
<i class="bi-headphones"></i>
I use URl SVG encoder to prepare svg for css: https://yoksel.github.io/url-encoder/
i cant find in the doc that bootstrap icon is fontawesome icon
after you install it you use it as a svg like this one
<svg class="bi bi-app" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M11 2H5a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3zM5 1a4 4 0 0 0-4 4v6a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4V5a4 4 0 0 0-4-4H5z"/>
</svg>
or you can use it this way after you download the svg to you project
<img src="/assets/img/bootstrap.svg" alt="" width="32" height="32" title="Bootstrap">
or on your css
.bi::before {
display: inline-block;
content: "";
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
Simple demo of bug here: https://codepen.io/mknepprath/pen/mKeObo
Open in Chrome to see how it should look.
Issues:
In Safari, the filter seems to not apply or only apply partially...
it's different.
In Firefox, nothing shows up at all - it seems to
hide the filter and the div that the filter is applied to.
How do I get this to work consistently across browsers?
html:
<svg class='a'>
<defs>
<filter id='hey'>
<feColorMatrix
type='matrix'
result='darken'
x='0'
y='0'
width='200px'
height='100px'
values='.2 .05 .05 0 .35
.05 .2 .05 0 .35
.05 .05 .2 0 .35
0 0 0 1 0'
/>
<feColorMatrix
type='matrix'
result='node'
x='0'
y='0'
width='200px'
height='100px'
values='1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0'
/>
<feMerge>
<feMergeNode in='darken' />
<feMergeNode in='node' />
</feMerge>
</filter>
</defs>
</svg>
<div class='b' style='filter: url(#hey)'></div>
css:
.a {
display: none;
}
.b {
width: 200px;
height: 100px;
background: peachpuff;
}
Chrome accepts bad syntax and tries to make the best of it, Firefox generally does not.
Using display:none takes the SVG out of the DOM so the CSS can't find the style anymore. Make the SVG zero sized, put it below your content or use visbility: hidden
In SVG 1.1 at least, you shouldn't' be able to use "px", "em" etc. to dimension your filter elements. (And there should be no need to size your feColorMatrixes - sizes are autocalculated by default.)
.a {
width: 0;
height: 0;
}
.b {
width: 200px;
height: 100px;
background: peachpuff;
}
<svg class="a">
<defs>
<filter id="hey">
<feColorMatrix
type="matrix"
result="darken"
values=".2 .05 .05 0 .35
.05 .2 .05 0 .35
.05 .05 .2 0 .35
0 0 0 1 0"
/>
<feColorMatrix
type="matrix"
result="node"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0"
/>
<feMerge>
<feMergeNode in="darken" />
<feMergeNode in="node" />
</feMerge>
</filter>
</defs>
</svg>
<div class="b" style="filter: url(#hey)"></div>
How to achieve a glowing straight line in svg，that some halo around it. I have tried filter, but it couldn't work on the straight line.
I am searching for a long time on net. But no use. Please help or try to give some ideas how to achieve this?
<svg width="100%" height="100%" version="1.2" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dangerShine">
<feColorMatrix type="matrix"
result="color"
values="1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0">
</feColorMatrix>
<feGaussianBlur in="color" stdDeviation="4" result="blur"></feGaussianBlur>
<feOffset in="blur" dx="0" dy="0" result="offset"></feOffset>
<feMerge>
<feMergeNode in="bg"></feMergeNode>
<feMergeNode in="offset"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<path d="M2 120 H 100" stroke="black" filter="url(#dangerShine)"/>
</svg>
I want to achieve this effect
the sketch is like this
Since your path is completely horizontal, it has zero height. The width of the line does not matter. If the width or the height of an element is zero, the filter will not work.
To avoid this problem, use an different element that has a non-zero height. For example, use a thin <rect> instead of a <path>.
<svg width="100%" height="100%" version="1.2" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dangerShine" filterUnits="userSpaceOnUse"
x="-10" y="110" width="120" height="20">
<feColorMatrix type="matrix"
result="color"
values="1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0"/>
<feGaussianBlur in="color" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="0" dy="0" result="offset"/>
<feMerge>
<feMergeNode in="bg"></feMergeNode>
<feMergeNode in="offset"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<rect x="2" y="120" width="100" height="1" fill="black" filter="url(#dangerShine)"/>
</svg>
Also, as you can see in my example, you may also have to manually adjust the filter region (x, y, width, height, and filterUnits), because the default values won't work well for such a thin element.
One way to make a div glow would be to use a CSS animation function. This is an easy alternative rather than manipulating an SVG.
I didn't use an SVG but instead just a made a div a line in HTML and CSS
Run the code snippet below to see how this works if you're unsure.
If the line is too wide, just adjust the size.
If the glowing is too fast/slow, adjust the timing.
e.g. .3s to 1s etc.
If you want to adjust the glowing effect spread, or feathering, or color, just play with the box-shadow settings.
Here is a great and lengthy article about how to manipulate SVGs and such.
https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/
Hope this was somewhat helpful.
<style>
body {
margin: 0;
}
/*
The circle is here just to
show the transparency of the
glowing line.
*/
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background: orange;
}
.line {
position: relative;
top: -100px;
width: 100vw;
height: 3px;
background: red;
animation: glow .3s infinite alternate ease-in-out;
}
#keyframes glow {
from {box-shadow: 0px;}
to {box-shadow: 0px 0px 20px rgba(255, 0, 0, 1);}
}
</style>
</head>
<body>
<div class="circle">
</div>
<div class="line">
</div>
<script></script>
</body>
</html>
Now you can create straight line from SVG. and set also thickness of straight line
<html>
<body>
<svg height="500" width="500">`enter code here`
<line x1="100" y1="100" x2="200" y2="100" style="stroke:rgb(111,0,0);stroke-width:5" />
</svg>
</body>
</html>
I am using the following code from Tympanus to generate a big downward pointing triangle. What I am trying to do is use the same technique to generate a big upward pointing triangle, basic the inverse. Does any one know how to tweak this code to accomplish that?
Your help is greatly appreciated.
Best Regards...
svg#bigTriangleColor {
pointer-events: none;
}
.container svg {
display: block;
}
svg:not(:root) {
overflow: hidden;
}
#bigTriangleColor path {
fill: #3498db;
stroke: #3498db;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L50 100 L100 0 Z"></path>
</svg>
You can easily do that understanding the line commands in an SVG path.
What we have here:
<path d="M0 0 L50 100 L100 0 Z"></path>
Says:
Move to (0,0), make a line going to (50,100), make another line going to (100,0), close the path.
So, to invert the triangle, you just need:
<path d="M0 100 L50 0 L100 100 Z"></path>
Which basicaly says:
Move to (0,100), make a line going to (50,0), make another line going to (100,100), close the path.
Check the demo:
svg#bigTriangleColor {
pointer-events: none;
}
.container svg {
display: block;
}
svg:not(:root) {
overflow: hidden;
}
#bigTriangleColor path {
fill: #3498db;
stroke: #3498db;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 L50 2 L100 100 Z"></path>
</svg>
You could just draw it upside down using a transform.
translate moves it down (as it's now going to be drawn from the bottom to the top rather than top to bottom.
scale inverts it in the y direction
svg#bigTriangleColor {
pointer-events: none;
}
.container svg {
display: block;
}
svg:not(:root) {
overflow: hidden;
}
#bigTriangleColor path {
fill: #3498db;
stroke: #3498db;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path transform="translate(0, 102) scale(1, -1)" d="M0 0 L50 100 L100 0 Z"></path>
</svg>
How would I (if possible) draw a black border that goes along only the inside of this svg. I have tried stroke and added stroke-width, but this wraps the entire svg. Is there a way to stop the stroke at a certain point?
div{
width: 300px;
margin: 0 auto;
}
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="none" height="45px" class="engle-curve curve-position-top" style="fill:#ff0000"><path stroke-width="4" stroke="#0f0f0f" d="M0 0 C50 100 50 100 100 0 L100 100 0 100"></path> </svg>
</div>
If I understand correctly you want to put a stroke only on the top curved part.
for this, you could add another path but only include the curve:
<path id='curvestroke' d="M0 0 C50 100 50 100 100 0"></path>
You can then style this with fill none and stroke style.
Full svg code:
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="none" height="45px" class="engle-curve curve-position-top" style="fill:#ff0000">
<path d="M0 0 C50 100 50 100 100 0 L100 100 0 100"></path>
<path id='curvestroke' d="M0 0 C50 100 50 100 100 0"></path>
</svg>
</div>
css:
div{
width: 300px;
margin: 0 auto;
}
#curvestroke{
fill: none;
stroke: black;
stroke-width:4px;
}
example fiddle