so i have this button and Foundations off canvas :
<nav class="top-bar ">
<button class="toggler hide-for-large"
onclick="this.classList.toggle('opened');this.setAttribute('aria-expanded', this.classList.contains('opened'))"
aria-label="Main Menu" data-toggle="offCanvas">
<svg viewBox="0 0 100 100">
<path class="line line1"
d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" />
<path class="line line2" d="M 20,50 H 80" />
<path class="line line3"
d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942" />
</svg>
</button>
<p v-if="client" class="hide-for-large text-center m-0">Welcome, {{client.firstName}} </p>
<a class="nav-logo" href="#"><img src="./assets/images/logo.png" alt="MINDHUB BROTHERS"></a>
</nav>
<div class="off-canvas position-bottom hide-for-large" id="offCanvas" data-off-canvas data-transition="overlap">
<!-- Close button -->
<!-- Menu -->
<ul class="vertical menu" data-accordion-menu multi-open-false>
<li>Dashboard </li>
<li>Profile</li>
<li>ZURB</li>
<li>Com</li>
<li>
Theme
<ul class="vertical menu nested">
<li> COLORES</li>
</ul>
</li>
</ul>
</div>
here is the buttons scss :
.toggler{
#include w-h(2.5rem);
z-index: 20!important;
}
.line {
z-index: 9;
fill: none;
stroke: black;
stroke-width: 6;
transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
stroke-dasharray: 60 207;
stroke-width: 6;
}
.line2 {
stroke-dasharray: 60 60;
stroke-width: 6;
}
.line3 {
stroke-dasharray: 60 207;
stroke-width: 6;
}
.opened {
.line1{
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
stroke-width: 6;
}.line2 {
stroke-dasharray: 1 60;
stroke-dashoffset: -30;
stroke-width: 6;
}.line3 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
stroke-width: 6;
}
}
When i click on the button it open and closes the off canvas . But when i open the off canvas theres an js-off-canvas-overlay so that when click it it closes the off canvas. Problem is that the button doesn't change along with it. How can i fix this?
Related
How do I set a .click() event in this SVG? To click automatically.
<span style="margin-right: 15px;" id="play">
<svg class="speechace-playback-30" aria-label="Start playing example audio" aria-pressed="false" role="button" viewBox="0 0 30 30" tabindex="0" style="position: relative; cursor: pointer; vertical-align: middle; outline: 0px;">
<circle cx="15" cy="15" r="14" style="fill: rgb(69, 97, 26); stroke: rgb(69, 97, 26); stroke-width: 1;"></circle>
<path d="M19.5,15 L12.75,11.102885682970026 L12.749999999999998,18.897114317029974 z" style="stroke: rgb(255, 255, 255); stroke-width: 1; fill: rgb(255, 255, 255); stroke-linecap: round; stroke-linejoin: round;"></path>
</svg>
</span>
write this in your js code. Try to cover svg with div tag
document.getElementById("IdOfYourSvg").addEventListener("click",(event)=>{
//your logic
})
I'm trying to set an opacity of 1 to the lines that I have in a gauge component, here's a link to the code: https://codepen.io/SergiuT/pen/RwgmOqw
Here's the code:
<svg width="244" height="126" viewBox="0 0 244 126" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="4" y="0" width="236" height="122">
<rect x="4.97656" width="234.175" height="122" fill="url(#paint0_linear)" />
</mask>
<g mask="url(#mask0)">
<circle cx="122" cy="125.5" r="115" fill="url(#paint1_radial)" />
</g>
<path id="line1" opacity="0.5" d="M22.5763 57.2082C10.2411 75.2339 2.76131 96.7911 2 120.032" stroke="#75FCC6" stroke-width="4"
stroke-linecap="round" />
<path id="line2" opacity="0.5" d="M81.134 11.9933C59.6579 19.7007 41.0318 33.3096 27.248 50.8443" stroke="#75FCC6"
stroke-width="4" stroke-linecap="round" />
<path id="line3" opacity="0.5" d="M88.6836 9.56243C99.262 6.53918 110.44 4.91934 122 4.91934C133.56 4.91934 144.738 6.53919 155.317 9.56245"
stroke="#979797" stroke-width="4" stroke-linecap="round" />
<path id="line4" opacity="0.5" d="M162.867 11.9933C184.343 19.7007 202.969 33.3096 216.753 50.8443" stroke="#FBE850"
stroke-width="4" stroke-linecap="round" />
<path id="line5" opacity="0.5" d="M221.424 57.2082C233.759 75.2339 241.239 96.791 242 120.032" stroke="#FBE850" stroke-width="4"
stroke-linecap="round" />
<defs>
<linearGradient id="paint0_linear" x1="122.064" y1="58.5794" x2="122.064" y2="122"
gradientUnits="userSpaceOnUse">
<stop />
<stop offset="1" stop-opacity="0" />
</linearGradient>
<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
gradientTransform="translate(122 125.5) rotate(90) scale(115)">
<stop offset="0.765625" stop-color="#75FCC6" stop-opacity="0" />
<stop offset="1" stop-color="#75FCC6" stop-opacity="0.33" />
</radialGradient>
</defs>
</svg>
<div class="indicator">
<div class="wrapper">
<div class="line"></div>
</div>
</div>
.indicator {
width: 100%;
height: 100%;
display: flex;
align-items: center;
position: absolute;
top: 45%;
margin: 0 10px;
#keyframes go {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(150deg);
}
}
.wrapper {
width: 100px;
position: absolute;
left: 1%;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards !important ;
transform-origin: bottom right;
animation: go 2s ease-in;
.line {
display: inline-block;
width: 85px;
border-radius: 2px;
border: 1px solid white;
height: 0;
}
}
}
Edit: The lines shine based on the value of the rotate() from .wrapper
Example: I can pass in 150deg to rotate, or 30deg, or 80deg. So I'm not going to pass all the lines everytime
Put an id="svg" to your svg. Then find the animations shine 1 to 5.
body {
background: black
}
.indicator {
width: 100%;
height: 100%;
display: flex;
align-items: center;
position: absolute;
top: 45%;
margin: 0 10px;
}
#keyframes go {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(150deg);
}
}
.wrapper {
width: 100px;
position: absolute;
left: 1%;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards !important ;
transform-origin: bottom right;
animation: go 2s ease-in;
}
.wrapper .line {
display: inline-block;
width: 85px;
border-radius: 2px;
border: 1px solid white;
height: 0;
}
#svg #line1{
animation: shine1 2s ease-in;
}
#keyframes shine1 {
0% {
opacity: 1
}
20% {
opacity: 1
}
40% {
opacity: 0.5
}
60% {
opacity: 0.5
}
80% {
opacity: 0.5
}
100% {
opacity: 0.5
}
}
#svg #line2{
animation: shine2 2s ease-in;
}
#keyframes shine2 {
0% {
opacity: 0.5
}
20% {
opacity: 0.5
}
40% {
opacity: 1
}
60% {
opacity: 1
}
80% {
opacity: 0.5
}
100% {
opacity: 0.5
}
}
#svg #line3{
animation: shine3 2s ease-in;
}
#keyframes shine3 {
0% {
opacity: 0.5
}
20% {
opacity: 0.5
}
40% {
opacity: 0.5
}
60% {
opacity: 1
}
80% {
opacity: 1
}
100% {
opacity: 0.5
}
}
#svg #line4{
animation: shine4 2s ease-in;
}
#keyframes shine4 {
0% {
opacity: 0.5
}
20% {
opacity: 0.5
}
40% {
opacity: 0.5
}
60% {
opacity: 0.5
}
80% {
opacity: 1
}
100% {
opacity: 1
}
}
#svg #line5{
animation: shine5 2s ease-in;
}
#keyframes shine5 {
0% {
opacity: 0.5
}
20% {
opacity: 0.5
}
40% {
opacity: 0.5
}
60% {
opacity: 0.5
}
80% {
opacity: 0.5
}
100% {
opacity: 1
}
}
<svg id="svg" width="244" height="126" viewBox="0 0 244 126" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="4" y="0" width="236" height="122">
<rect x="4.97656" width="234.175" height="122" fill="url(#paint0_linear)" />
</mask>
<g mask="url(#mask0)">
<circle cx="122" cy="125.5" r="115" fill="url(#paint1_radial)" />
</g>
<path id="line1" opacity="0.5" d="M22.5763 57.2082C10.2411 75.2339 2.76131 96.7911 2 120.032" stroke="#75FCC6" stroke-width="4"
stroke-linecap="round" />
<path id="line2" opacity="0.5" d="M81.134 11.9933C59.6579 19.7007 41.0318 33.3096 27.248 50.8443" stroke="#75FCC6"
stroke-width="4" stroke-linecap="round" />
<path id="line3" opacity="0.5" d="M88.6836 9.56243C99.262 6.53918 110.44 4.91934 122 4.91934C133.56 4.91934 144.738 6.53919 155.317 9.56245"
stroke="#979797" stroke-width="4" stroke-linecap="round" />
<path id="line4" opacity="0.5" d="M162.867 11.9933C184.343 19.7007 202.969 33.3096 216.753 50.8443" stroke="#FBE850"
stroke-width="4" stroke-linecap="round" />
<path id="line5" opacity="0.5" d="M221.424 57.2082C233.759 75.2339 241.239 96.791 242 120.032" stroke="#FBE850" stroke-width="4"
stroke-linecap="round" />
<defs>
<linearGradient id="paint0_linear" x1="122.064" y1="58.5794" x2="122.064" y2="122"
gradientUnits="userSpaceOnUse">
<stop />
<stop offset="1" stop-opacity="0" />
</linearGradient>
<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
gradientTransform="translate(122 125.5) rotate(90) scale(115)">
<stop offset="0.765625" stop-color="#75FCC6" stop-opacity="0" />
<stop offset="1" stop-color="#75FCC6" stop-opacity="0.33" />
</radialGradient>
</defs>
</svg>
<div class="indicator">
<div class="wrapper">
<div class="line"></div>
</div>
</div>
I’d like to hide the vertical scroll-bars in the left panels, while keeping them scrollable.
Edit: Webkit covered. Now looking for a fix for Mozilla Firefox
I’ve looked at answers from previous questions, such as this one and that one, with poor results. Mostly they mess up the layout, causing overlaps, or they don’t produce any noticeable result.
Browsers evolve rapidly so I was hoping for updated information.
A cross-browser solution would be awesome, but I’d be happy with any pointers!
jsfiddle
const lijntjes = [
"Random sentences go here, one at a time!",
"Here's another one! Just keep adding them on.",
"Look, here's another one.",
"And yet another. Along with dozens of others."
];
const lorIps = el => {
for (let n = 0; n < 15; n++) {
el.innerHTML += ' ' + lijntjes.join(' ').toString()
};
};
const teksten = document.querySelectorAll('.tekst');
const po1 = document.querySelectorAll('.project-omschrijving.row-1');
const po2 = document.querySelectorAll('.project-omschrijving.row-2');
const om = document.querySelectorAll('.omschrijving');
const o = document.querySelectorAll('.open');
const c = document.querySelectorAll('.close');
// Populate
Array.from(teksten, item => lorIps(item));
// Toggler
const toggler = (el, klassen) => klassen.map(klas => el.classList.toggle(klas));
// Open
const open = elmt => {
Array.from(elmt, item => item.addEventListener('click', function() {
let hoofdNodes = document.querySelectorAll('.' + this.parentNode.parentNode.classList.value.split(' ').join(
'.').replace('.omschrijving', ''))
Array.from(hoofdNodes, el => toggler(el, ['trans', 'binnen']));
}));
}
// Close
const dicht = elmt => {
Array.from(elmt, item => item.addEventListener('click', function() {
let hoofdNodes = document.querySelectorAll('.' + this.parentNode.parentNode.classList.value.split(
' ').join(
'.').replace('.omschrijving', ''));
Array.from(hoofdNodes, el => setTimeout(() => toggler(el, ['trans']), 200));
Array.from(hoofdNodes, el => toggler(el, ['binnen']))
}))
}
window.onload = function() {
open(o);
dicht(c);
o[0].click()
}
:root {
--offset: 50vw;
--cell-hoogte: 50vh;
--gap: '1em';
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 12px;
}
a {
text-decoration: none;
color: palegreen;
}
:target {
border-radius: 1em;
background-color: palegreen;
transition: background-color .3s ease-in-out
}
:target> :nth-child(2) {
color: #fff;
transition: color .3s ease-in-out
}
.container {
color: green;
font-size: 2em;
font-weight: bold;
display: grid;
grid-template-columns: var(--offset) 100vw;
grid-template-rows: repeat(2, var(--cell-hoogte));
grid-gap: var(--gap);
overflow: hidden;
}
#media (max-width: 700px) {
.container {
grid-template-columns: 50vw 100vw;
grid-template-rows: repeat(2, calc(var(--cell-hoogte)*1));
grid-gap: 0;
}
}
p {
/* Viewport Sized Typography */
/* https://css-tricks.com/viewport-sized-typography/ */
font-size: 3.5vmin;
}
p a {
display: block;
transition: background .3s ease-in-out
}
#note {
position: fixed;
bottom: 1em;
right: 1em;
display: flex;
align-self: flex-end;
}
.omschrijving {
opacity: .5;
}
.trans {
transition: all .2s ease-out;
}
.project-omschrijving {
will-change: transform, opacity;
padding: 1em;
transform: translateX(calc(var(--offset)*-1));
overflow: hidden;
}
.project-omschrijving:nth-child(odd) {
overflow-y: auto;
}
.binnen {
transform: translateX(0);
transition: all .3s ease-out;
opacity: 1
}
.knop {
display: flex;
flex-direction: column;
}
.open,
.close {
position: absolute;
top: 1em;
right: 0;
width: 4em;
height: auto;
cursor: pointer;
stroke: green;
fill: green;
stroke-miterlimit: 10;
object-fit: contain;
}
.close {
transform: rotate(45deg)
}
<div class="container">
<p id="anchor1" class="project-omschrijving omschrijving row-1">
<span class='anchor'>Anchor 1</span>
To anchor3
<span class="knop">
<a class="close">
<svg class="checkmark" viewBox="-5 -5 115 115" xmlns="http://www.w3.org/2000/svg">
<line x1="0" x2="50" y1="25" y2="25" stroke-width="5px" stroke-linecap="square" />
<line x1="0" x2="50" y1="25" y2="25" stroke-width="5px" stroke-linecap="square" transform="translate(50) rotate(90)" />
</svg>
</a>
</span>
<span class="tekst"></span>
</p>
<p id="anchor2" class="project-omschrijving row-1">
<span class='anchor'>Anchor 2</span>
To anchor4
<span class="knop">
<a class="open">
<svg class="checkmark" viewBox="-5 -5 115 115" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="25" />
</svg>
</a>
</span>
<span class="tekst"></span>
</p>
<p id="anchor3" class="project-omschrijving omschrijving row-2">
<span class='anchor'>Anchor 3</span>
To anchor1
<span class="knop">
<a class="close">
<svg class="checkmark" viewBox="-5 -5 115 115" xmlns="http://www.w3.org/2000/svg">
<line x1="0" x2="50" y1="25" y2="25" stroke-width="5px" stroke-linecap="square" />
<line x1="0" x2="50" y1="25" y2="25" stroke-width="5px" stroke-linecap="square" transform="translate(50) rotate(90)" />
</svg>
</a>
</span>
<span class="tekst"></span>
</p>
<p id="anchor4" class="project-omschrijving row-2">
<span class='anchor'>Anchor 4</span>
To anchor2
<span class="knop">
<a class="open">
<svg class="checkmark" viewBox="-5 -5 115 115" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="25" />
</svg>
</a>
</span>
<span class="tekst"></span>
</p>
</div>
<div id="note"> Internet Explorer 8 and earlier versions do not support the :target selector.</div>
I'm working to create an SVG circle progress indicator in react... Here is my output:
CODEPEN
The problem is I need the red stroke to start at the top, not at the current 90% angle... Is there some CSS I can add to reposition the red stroke to start at the top?
FYI, I'm using the following component in react to render this HTML: https://github.com/wmartins/react-circular-progress/blob/gh-pages/src/js/components/CircularProgress.jsx.js
codepen source below
html
<svg class="CircularProgress" width="50" height="50" viewBox="0 0 50 50">
<circle class="CircularProgress-Bg" cx="25" cy="25" r="24" stroke-width="2px"></circle>
<circle class="CircularProgress-Fg" cx="25" cy="25" r="24" stroke-width="2px" style="stroke-dasharray: 150.796; stroke-dashoffset: 125.161;"></circle>
<text class="CircularProgress-Text" x="25" y="25" dy=".4em" text-anchor="middle">17%</text>
</svg>
css
.CircularProgress-Bg,
.CircularProgress-Fg {
fill: none;
}
.CircularProgress-Bg {
stroke: #CCC;
}
.CircularProgress-Fg {
transition: stroke-dashoffset .5s ease-in-out;
stroke: red;
}
.CircularProgress-Text {
font-size: 15px;
font-weight: 600;
fill: rgba(255,255,255,0.9);
transform: translate(0 50%);
}
You could use transform, add transform="rotate(-90 25 25)" and it will start at the top
.CircularProgress-Bg,
.CircularProgress-Fg {
fill: none;
}
.CircularProgress-Bg {
stroke: #CCC;
}
.CircularProgress-Fg {
transition: stroke-dashoffset .5s ease-in-out;
stroke: red;
}
.CircularProgress-Text {
font-size: 15px;
font-weight: 600;
fill: rgba(255,255,255,0.9);
transform: translate(0 50%);
}
<svg class="CircularProgress" width="50" height="50" viewBox="0 0 50 50">
<circle class="CircularProgress-Bg" cx="25" cy="25" r="24" stroke-width="2px"></circle>
<circle transform="rotate(-90 25 25)" class="CircularProgress-Fg" cx="25" cy="25" r="24" stroke-width="2px" style="stroke-startOffest: 50%;stroke-dasharray: 150.796; stroke-dashoffset: 125.161;"></circle>
<text class="CircularProgress-Text" x="25" y="25" dy=".4em" text-anchor="middle">17%</text>
</svg>
If to use CSS, you can rotate the svg element instead of the circle (which might or might not be possible based on its shape)
.CircularProgress {
transform: rotate(-90deg);
}
.CircularProgress-Bg,
.CircularProgress-Fg {
fill: none;
}
.CircularProgress-Bg {
stroke: #CCC;
}
.CircularProgress-Fg {
transition: stroke-dashoffset .5s ease-in-out;
stroke: red;
}
.CircularProgress-Text {
font-size: 15px;
font-weight: 600;
fill: rgba(255,255,255,0.9);
transform: translate(0, 50%);
}
<svg class="CircularProgress" width="50" height="50" viewBox="0 0 50 50">
<circle class="CircularProgress-Bg" cx="25" cy="25" r="24" stroke-width="2px"></circle>
<circle class="CircularProgress-Fg" cx="25" cy="25" r="24" stroke-width="2px" style="stroke-dasharray: 150.796; stroke-dashoffset: 125.161;"></circle>
<text class="CircularProgress-Text" x="25" y="25" dy=".4em" text-anchor="middle">17%</text>
</svg>
I am trying to animate stroke-dasharray of a svg circle based on data values without using libraries.
Data is coming from a javascript calculation, so length of stroke will be different from circle to another.
code will as following: Codepen
or
var circle_1 = 20,
circle_2 = 33,
circle_3 = 42;
document.getElementById('circle_1').innerHTML = circle_1;
document.getElementById('circle_2').innerHTML = circle_2;
document.getElementById('circle_3').innerHTML = circle_3;
.container {
text-align: center;
height: 200px;
}
li {
list-style: none;
display: inline-block;
margin: 100px 50px;
position: relative;
width: 100px;
height: 100px;
}
circle {
stroke: #222;
fill: transparent;
stroke-width: 3px
}
.result {
position: absolute;
top: 40%;
left: 40%;
}
<div class="container">
<li>
<svg width="100" height="100">
<circle cy="50" cx="50" r="40" stroke-dasharray="0em" stroke-dashoffset="0" />
</svg>
<div class="result" id="circle_1"></div>
</li>
<li>
<svg width="100" height="100">
<circle cy="50" cx="50" r="40" stroke-dasharray="0em" stroke-dashoffset="0" />
</svg>
<div class="result" id="circle_2"></div>
</li>
<li>
<svg width="100" height="100">
<circle cy="50" cx="50" r="40" stroke-dasharray="0em" stroke-dashoffset="0" />
</svg>
<div class="result" id="circle_3"></div>
</li>
</div>
If I understand you correctly, you want a pie chart using SVG circle and no library. I worked on something like that recently, here is a mixin I made:
http://codepen.io/Draccoz/pen/GJVJVM
=pie-chart($size, $ring-size, $ring-color: false, $bg-size: 0, $bg-color: transparent)
$d: $size - $ring-size
width: $size
height: $size
>
circle
cx: $size / 2
cy: $size / 2
&:nth-child(1)
r: $bg-size / 2
#if $bg-color
fill: $bg-color
&:nth-child(2)
font-size: $d * 1.01 * $PI
stroke-width: $ring-size
r: $d / 2
fill: transparent
#if $ring-color
stroke: $ring-color
/* stroke-linecap: round */
transition: stroke-dashoffset 1s ease-in-out
transform: translateY($size) rotate(-90deg)
stroke-dasharray: 1em 1em
stroke-dashoffset: 0
#content
Hope it helps.