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>
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;
}
I am working on coding my site and I had this great idea to animate my navigation bar which is held in a SVG container. Due to the naturally wavy design, I was going for something similar to the Discord intro, where the waves sweep across the screen while waving. So I was wondering if there was a way I can do that, open to any ideas. JQuery, Java, CSS, anything to help.
I have worked slightly with CSS, but had no clue were to start with Java or JQuery. I am looking for a way to get this working onClick with a Hamburger Menu.
body {
font-family: 'Raleway', Arial, Verdana, sans-serif;
overflow-x: hidden;
}
a {
text-decoration: none;
color: white;
}
.main_hd_cont {
position: absolute;
top: -1.25vw;
left: 1.5vw;
z-index: 2;
color: white;
}
.main_hd_txt {
font-size: 3.5vw;
font-family: 'ballet_harmonyballet_harmony';
}
svg {
filter: drop-shadow(.5vw .5vw .15vw rgb(0, 0, 0, 0.6));
}
.navigation_svg {
position: absolute;
top: 0;
left: 0;
z-index: 1;
max-width: 100vw;
width: 100vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Code Cafe | Home </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../CSS/stylesheet.css">
<!--Fonts from Google Fonts API Directory, all rights reserved to original typographers and the Google Corperation -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<!--Styling for Font Awesome Icon library, for high quality icons visit Font Awesome online -->
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
<!--Script link for JQuery Libraries and Scroll Magic API(s) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<!-- paste locally stored JavaScript file link here -->
<style>
#font-face {
font-family: 'ballet_harmonyballet_harmony';
src: url('ballet_harmony-webfont.woff2') format('woff2'), url('ballet_harmony-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<section class="main_hd_cont">
<header class="main_hd">
<h1 class="main_hd_txt">Company Name</h1>
</header>
</section>
<!--SVG Graphic as Navigation holder w/ Hamburger Menu Activation -->
<section class="navigation_svg">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 575" style="enable-background:new 0 0 1920 575;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="287.2289" x2="1920" y2="287.2289">
<stop offset="0" style="stop-color:#8C572B"/>
<stop offset="0.9974" style="stop-color:#593118"/>
</linearGradient>
<path class="st0" d="M57.5,139c52.6,0,272.7-21,509.6,0s515.9,0,556.8,0c19.4,0,37.8,8.3,50.7,22.7 c35.5,39.7,120.6,119.2,245.4,136.3c96.7,13.2,176.4,61.6,226.8,100.2c28.6,22,53.6,48.3,74.5,77.7c28.7,40.3,94.9,112.1,194.9,97.7 c2.2-0.3,3.8-2.2,3.8-4.4V-1H0v82.5C0,113.3,25.7,139,57.5,139z"/>
</svg>
</section>
</section>
</body>
</html>
The only thing I've gotten it to do is fade, but hat was a mere test of the #keyframes ability to animate SVGs.
You can transition the path's d property with css like this:
path {
transition: d 1s;
d: path('M547 93.0001C496 38.0001 457 29 372 15C276.086 -0.79759 -57 -52 9.99988 240C33.2036 341.127 87.9999 397 157 366C226 335 285 227 325 341C365 455 407 425 598 412C789 399 841 322 839 233C837 144 688 162 642 169C596 176 598 148 547 93.0001Z');
}
path:hover {
d: path('M547 92C471.994 92 482.5 -39.5 372 14C284.509 56.3601 -57 -53 9.99984 239C33.2035 340.127 82.5699 351.503 157 365C253.5 382.5 248.741 246.296 325 340C401.5 434 445.063 526.153 598 411C768 283 874.5 310 839 232C802.123 150.975 671.067 131.667 642 168C616 200.5 613 92 547 92Z');
}
<svg viewBox="0 0 900 500">
<path d=""/>
</svg>
Using keyframes
path {
animation: 10s infinite alternate wave ease-in-out;
}
#keyframes wave {
from {
d: path("M2,5 S2,-2 4,5 S7,8 8,4")
}
to {
d: path("M2,5 S2,14 4,5 S7,8 8,4")
}
}
body {display: flex;}
svg {width: 100%;}
path {fill: none;stroke: #000;}
<svg viewBox="0 0 10 10">
<path d="M2,5 S2,-2 4,5 S7,8 8,4" />
</svg>
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