Setting opacity to svg path elements based on the keyframe animation state - javascript

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>

Related

Hide SVG width till the animation-delay

I am trying to animate the width of a svg rect with the following code.
window.onload = function() {
var viewBoxWidth = document.querySelector('svg').viewBox.baseVal.width;
var rect1 = document.getElementById('r1');
var rect1Width = rect1.getBBox().width;
var pct = (rect1Width / viewBoxWidth) * 100;
rect1.style.setProperty('--w1', pct + '%');
}
.r1 {
animation-name: moveWidth;
animation-delay: 2s;
animation-duration: 2s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-direction: normal;
animation-fill-mode: forwards;
}
#keyframes moveWidth {
0% {
width: 0%;
}
100% {
width: var(--w1);
}
}
<!DOCTYPE html>
<html>
<body>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="r1" id="r1" x="10" y="10" width="200" height="20" stroke="none" fill="orange"></rect>
<rect class="r2" id="r2" x="10" y="30" width="200" height="20" stroke="none" fill="green"></rect>
</svg>
</body>
</html>
The animation is taking place but how can I hide the width of r1 till the animation kicks in at the 2s, (till the delay).
window.onload = function() {
var viewBoxWidth = document.querySelector('svg').viewBox.baseVal.width;
var rect1 = document.getElementById('r1');
var rect1Width = rect1.getBBox().width;
var pct = (rect1Width / viewBoxWidth) * 100;
rect1.style.setProperty('--w1', pct + '%');
}
.r1 {
visibility:hidden;/*hide default*/
animation-name: moveWidth;
animation-delay: 2s;
animation-duration: 2s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-direction: normal;
animation-fill-mode: forwards;
}
#keyframes moveWidth {
0% {
visibility:visible;/*show again*/
width: 0%;
}
100% {
visibility:visible;/*Edit-2 maintains visibility after animation overs*/
width: var(--w1);
}
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="r1" id="r1" x="10" y="10" width="200" height="20" stroke="none" fill="orange"></rect>
<rect class="r2" id="r2" x="10" y="30" width="200" height="20" stroke="none" fill="green"></rect>
</svg>
use css visibility
Edit-2: maintains visibility after animation overs)
Simple and easy solution change animation-fill-mode: forwards; to animation-fill-mode: both; and width into px or %
.r1 {
animation-name: moveWidth;
animation-delay: 2s;
animation-duration: 2s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-direction: normal;
animation-fill-mode: both;
}
#keyframes moveWidth {
0% {
width: 0%;
}
100% {
width: 200px;
}
}
<!DOCTYPE html>
<html>
<body>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="r1" id="r1" x="10" y="10" width="200" height="20" stroke="none" fill="orange"></rect>
<rect class="r2" id="r2" x="10" y="30" width="200" height="20" stroke="none" fill="green"></rect>
</svg>
</body>
</html>

setTimeout animation problem in Javascript

I have created an animation (you will see this when the window is reloaded) after the completion of this animation another animation will start like the bees start coming out of the hive(by calling function createBeesFromGate()) and going inside the hive(by calling function createBees()) and I have given an inline function to demolish bees(by means of giving the opacity of 0) for some times bees move in and out fine but after 20 to 30 seconds, a honeybee will be stuck on the beehive gate and lose its clickability(means when I click its opacity becomes 0) So, what's going on and how do I fix that.
let siteInfo = document.querySelector(".site-info")
let beehivePiece = document.querySelectorAll(".beehive-piece");
let bees1 = document.querySelectorAll(".corr-p-1");
let bees2 = document.querySelectorAll(".corr-p-2");
let bees3 = document.querySelectorAll(".corr-p-3");
let bees4 = document.querySelectorAll(".corr-p-4");
let bees5 = document.querySelectorAll(".corr-p-5");
let bees6 = document.querySelectorAll(".corr-p-6");
let bees7 = document.querySelectorAll(".corr-p-7");
let beehiveGate = document.querySelector("#beehive-gate");
let gatekeeperBee = document.querySelector(".gate-keeper-bee");
let heroSvg = document.getElementById("hero-svg")
console.log(heroSvg);
// console.log(gatekeeperBee)
// console.log(beehivePiece[1])
window.addEventListener("load",check)
function check(){
siteInfo.classList.add("site-info-appear")
setTimeout(()=>{
beehivePiece[6].style="transform:translate(0px,0px)";
bees1[0].style="transform:translate(0px,0px)";
bees1[1].style="transform:translate(0px,0px)";
setTimeout(()=>{
bees1[0].style="transform:translate(1000px,250px)";
bees1[1].style="transform:translate(1000px,250px)";
},1300)
},1500)
// For BEES 2
setTimeout(()=>{
beehivePiece[5].style="transform:translate(0px,0px)";
bees2[0].style="transform:translate(0px,0px)";
bees2[1].style="transform:translate(0px,0px)";
setTimeout(()=>{
bees2[0].style="transform:translate(1000px,250px)";
bees2[1].style="transform:translate(1000px,250px)";
},1300)
},2500)
// For BEES 3
setTimeout(()=>{
beehivePiece[4].style="transform:translate(0px,0px)";
bees3[0].style="transform:translate(0px,0px)";
bees3[1].style="transform:translate(0px,0px)";
setTimeout(()=>{
bees3[0].style="transform:translate(1000px,250px)";
bees3[1].style="transform:translate(1000px,250px)";
},1300)
},3000)
// For BEES 4
setTimeout(()=>{
beehivePiece[3].style="transform:translate(0px,0px)";
bees4[0].style="transform:translate(0px,0px)";
bees4[1].style="transform:translate(0px,0px)";
setTimeout(()=>{
bees4[0].style="transform:translate(1000px,250px)";
bees4[1].style="transform:translate(1000px,250px)";
},1300)
},3500)
// For BEES 5
setTimeout(()=>{
beehivePiece[2].style="transform:translate(0px,0px)";
bees5[0].style="transform:translate(0px,0px)";
bees5[1].style="transform:translate(0px,0px)";
setTimeout(()=>{
bees5[0].style="transform:translate(1000px,250px)";
bees5[1].style="transform:translate(1000px,250px)";
},1300)
},4000)
// For BEES 6
setTimeout(()=>{
beehivePiece[1].style="transform:translate(0px,0px)";
bees6[0].style="transform:translate(0px,0px)";
bees6[1].style="transform:translate(0px,0px)";
setTimeout(()=>{
bees6[0].style="transform:translate(1000px,250px)";
bees6[1].style="transform:translate(1000px,250px)";
},1300)
},4500)
// For BEES 7
setTimeout(()=>{
beehivePiece[0].style="transform:translate(0px,0px)";
bees7[0].style="transform:translate(0px,0px)";
bees7[1].style="transform:translate(0px,0px)";
setTimeout(()=>{
bees7[0].style="transform:translate(1000px,250px)";
bees7[1].style="transform:translate(1000px,250px)";
},1300)
},5000)
setTimeout(()=>{
gatekeeperBee.style="transform:translate(0px,0px);"
beehiveGate.style="transform:translate(0px,0px);"
setTimeout(() => {
gatekeeperBee.style="transform:translate(1000px,250px)";
}, 2500);
},6000)
}
function createBees(){
setInterval(() => {
setTimeout(()=>{
console.log("bee created")
let b = heroSvg.innerHTML += `<use xlink:href="#theBee"
class="newCreatedBee" onclick="
(
function() {
document.querySelector('.newCreatedBee').style.opacity = 0;
document.querySelector('.newCreatedBee').style.transition = '0.5s';
}
)();"
style="transform: translate(1000px,${Math.floor(Math.random() * (300 - 10) +1 ) + 10}px);"
width="400" height="38.4" x="-30" y="290" />
`
let newBee = heroSvg.querySelector(".newCreatedBee")
setTimeout(() => {
newBee.style="transform: translate(0px,30px);"
newBee.addEventListener("transitionend",function(){
console.log("transition completed")
heroSvg.removeChild(heroSvg.lastElementChild)
})
}, 1000);
},1000)
}, Math.floor(Math.random() * (50000 - 5000) +1 ) + 5000 );
}
createBees()
function createBeesFromGate(){
setInterval(() => {
console.log("Bees created from the gate");
setTimeout(()=>{
let b = heroSvg.innerHTML += `<use xlink:href="#theBee"
class="newCreatedBeeComingFromHive" onclick="
(
function() {
document.querySelector('.newCreatedBeeComingFromHive').style.opacity = 0;
document.querySelector('.newCreatedBeeComingFromHive').style.transition = '0.5s';
}
)();"
style="transform: translate(0px,30px);"
width="400" height="38.4" x="-30" y="290" />
`
let newBee = heroSvg.querySelector(".newCreatedBeeComingFromHive")
// function remove(el) {
// var element = el;
// element.remove();
// }
setTimeout(() => {
newBee.style.transform = ` translate(-1000px,300px)`
newBee.addEventListener("transitionend",function(){
console.log("transition completed")
heroSvg.removeChild(heroSvg.lastElementChild)
})
}, 1000);
},1000)
}, Math.floor(Math.random() * (50000 - 11000) +1 ) + 11000 );
}
createBeesFromGate()
/* #import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap'); */
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
/* html{
border:5px solid blue;
} */
*,::before,::after{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
font-family:Roboto ;
/* border: 3px solid red; */
/* position: fixed; */
/* position: absolute; */
/* width:100%; */
}
.container{
/* border:2px solid black; */
/* padding:10px; */
width:100%;
}
.header{
/* border:2px solid rgb(255, 179, 0); */
width:100%;
padding:.5em .5em;
}
.header-wrapper{
display:flex;
align-items: center;
justify-content:space-between;
padding:.8em 0em;
/* border:2px solid blue; */
width:90%;
margin:auto;
}
.site-title{
/* border: 2px solid red; */
margin-left: 2em;
font-size:2.3em;
font-weight:400;
}
.site-title-span{
font-weight:750;
color:#E47700;
}
.nav{
/* border:2px solid magenta; */
margin-right:2em;
/* align-self: flex-end; */
width:45%;
}
.nav ul{
display: flex;
list-style: none;
font-size:1.5em;
justify-content: space-between;
}
/* .nav ul li{
margin-right:1.5em;
} */
.nav ul li a {
text-decoration: none;
color:black;
font-weight: 500;
padding:6px;
}
.nav ul li a:hover{
color:white;
background:#FEBD33;
border-radius:50px;
transition: .3s all ease;
}
/* GO AND DO IT IN JS */
.active{
border-radius:50px;
background-color: #FEBD33;
color: white;
padding:0 12px;
}
.hero{
/* border:2px solid red; */
height:36vh;
/* height:100%; for mobile view*/
font-family: poppins;
/* overflow: hidden; */
}
.hero-wrapper{
/* border: 2px solid hotpink; */
width:80%;
margin:0 auto;
margin-top:130px;
display:flex;
justify-content: space-between;
flex-wrap: wrap;
/* flex-direction: column; */
flex-shrink: 0;
align-items:center;
}
.site-info{
/* position: relative;
top: 155px;
left: 10.9em; */
display: inline-block;
width: 25em;
line-height: 28px;
opacity: 0;
transform: translateY(20px);
transition:2.5s;
/* border: 2px solid rebeccapurple; */
}
.site-info-appear{
opacity: 1;
transform: translateY(0px);
}
.site-info-heading{
font-size:3em;
/* border: 2px solid rebeccapurple; */
}
.site-info-text{
font-size: 25px;
font-weight: 600;
margin-top: 6px;
/* border: 2px solid rebeccapurple; */
}
.site-info-btn{
font-size:1.3em;
border-radius:50px;
padding:.3em .5em;
border:none;
background-color: #33BC00;
color:white;
margin-top: 19px;
cursor: pointer;
/* border: 2px solid rebeccapurple; */
}
.hero-beehive{
position: relative;
top: 0px;
left:0px;
/* right: 1em; */
/* display:inline-block; */
width:300px;
height:300px;
/* border: 2px solid rebeccapurple; */
}
svg{
border:2px solid red;
width:155%;
height:25em;
float:left;
/* margin-left:0; */
/* display:inline-block; */
position:static;
top:0px;
left:0;
/* background:burlywood; */
/* overflow: hidden; */
/* float: right; */
}
#b-peice-1,#b-peice-2,#b-peice-3
#b-peice-4,#b-peice-5,#b-peice-6,
#b-peice-7{
transform:translateY(px);
position:absolute;
}
.beehive-piece,.bee{
transition: .7s ;
}
.gate-keeper-bee,#beehive-gate{
transition: 2s ;
}
.newCreatedBee{
transition: 8s linear all ;
cursor:pointer;
}
.newCreatedBeeComingFromHive{
transition: 8s linear;
transform-origin:center;
/* position:absolute; */
/* transform: sc; */
}
.forest-container{
background-image:url("forest\ 1.svg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center ;
/* border:5px solid black; */
width:100%;
height:1050px;
}
.forest{
border:2px solid red;
width:100%;
}
/* HONEY BEE WINGS FLYING ANIM */
#small-wing{
/* anim`ation: small-wing 2s infinite alternate ; */
animation: check .09s infinite alternate ;
/* animation-name: check;
animation-duration: 1s;
animation-iteration-count: infinite; */
/* transform: rotate(10deg); */
}
#large-wing{
animation: check .09s infinite alternate ;
}
#keyframes check{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(-.4deg);
}
100%{
transform: rotate(.4deg);
}
}
.small-wing{
/* anim`ation: small-wing 2s infinite alternate ; */
animation: check .09s infinite alternate ;
/* animation-name: check;
animation-duration: 1s;
animation-iteration-count: infinite; */
/* transform: rotate(10deg); */
transform-origin: center;
}
.large-wing{
animation: check .09s infinite alternate ;
transform-origin: center;
}
#keyframes check{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(-2.5deg);
transform-origin: center;
}
100%{
transform: rotate(2.5deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<!--header open-->
<div class="header-wrapper">
<div class="site-title">
<p>
<span class="site-title-span">B</span>ee
<span class="site-title-span">B</span>uzz
</p>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>SERVICES</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</div>
</div>
<!--header closed-->
<!-- HERO SECTION -->
<div class="hero">
<div class="hero-wrapper">
<div class="site-info">
<h1 class="site-info-heading">
<span style="color:#E47700;font-weight:bolder;">B</span>ee
<span style="color:#E47700;font-weight:bolder;">B</span>uzz
<span style="font-size:.5em;">TM</span>
</h1>
<p class="site-info-text">
We are providing pure
forest bee honey and
protecting our environment
</p>
<button class="site-info-btn">
Read more
</button>
</div>
<div class="hero-beehive">
<svg id="hero-svg" width="300" height="300" viewBox="0 50 630 630" fill="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="theBee" viewBox="0 0 78 49" >
<g id="complete_bee">
<path id="bee head" d="M11.553 35.5047C16.3904 38.8245 21.8681 37.8364 24.0023 36.4532V15.1115C22.9352 14.4397 19.5917 13.499 14.7542 15.1115C9.9168 16.724 8.37329 20.5655 7.99604 21.7512C6.88944 25.2291 6.71554 32.1848 11.553 35.5047Z" fill="#FFE818" stroke="black" />
<circle id="bee eye" cx="15.532" cy="21.6908" r="2.96412" fill="#313131" />
<path id="bee trunk" d="M65.8034 15.1697C45.3154 7.5816 30.1154 12.008 23.9501 15.1697V36.6299C37.3242 43.649 56.6739 38.0527 64.1435 34.3772C78.0156 27.5513 77.7785 19.6049 65.8034 15.1697Z" fill="#FFE818" stroke="black" />
<path id="trunk lines" d="M32.961 12.087C30.4711 16.1577 26.9142 26.5519 32.3682 39.3569L35.8065 39.8312C29.8309 27.5004 34.2652 15.5649 36.7551 11.4942L32.961 12.087Z" fill="#4E4E4E" stroke="black" />
<path id="trunk lines_2" d="M42.9204 39.8312C36.9447 27.5005 41.2605 15.0907 43.7503 11.02L47.7815 11.1385C45.2917 15.2092 40.5017 27.1448 46.4773 39.4755L42.9204 39.8312Z" fill="#313131" stroke="black" />
<path id="trunk lines_3" d="M53.947 38.0527C47.2667 27.313 51.8749 15.6325 54.6584 12.087L58.3339 12.7984C55.5504 16.3439 50.8236 26.246 57.504 36.9856L53.947 38.0527Z" fill="#313131" stroke="black" />
<path id="trunk lines_4" d="M63.7528 34.6143C56.6849 26.8661 61.298 16.5925 64.38 14.6955L67.5819 15.8811C65.3292 18.6081 61.4051 23.9435 66.3963 33.1916L63.7528 34.6143Z" fill="#313131" stroke="black" />
<path id="small-wing" d="M61.4166 1.06052C55.8203 0.206853 39.1659 8.60919 32.6053 12.0871C54.3264 11.3283 59.9938 9.00435 61.4166 8.05583C63.2303 6.8467 67.0128 1.91419 61.4166 1.06052Z" fill="#99CEFF" stroke="black" />
<path id="large-wing" d="M32.9609 11.9685C48.0977 7.26541 80.3166 -2.14073 74.6957 7.34446C68.7675 14.5769 44.3036 13.6679 32.9609 11.9685Z" fill="#81D1FE" stroke="black" />
<path id="bee sting" d="M70.4275 30.7017L73.273 27.7376L76 32.7173L70.4275 30.7017Z" fill="#313131" stroke="black" />
<path id="antenna" d="M13.1606 15.8811C13.4768 12.6008 12.1173 5.73197 4.14972 4.4989M10.3151 17.8967C9.36656 14.4583 6.09418 8.05584 0.592773 9.95288" stroke="black" />
<path id="bee legs" d="M30.3525 39.1198L26.2028 43.151L28.2184 46.2337M35.6879 39.9497L31.7753 44.5738L34.2652 48.605" stroke="black" />
<circle id="antenna ball" cx="4.38689" cy="4.38033" r="0.592824" fill="#FFE818" />
<circle id="antenna ball_2" cx="0.592824" cy="9.83431" r="0.592824" fill="#FFE818" />
<path id="bee behind legs" d="M49.2044 39.2384L45.6475 43.6253L47.6631 45.9965M55.4883 37.8156L50.8643 43.6253L55.4883 46.8265" stroke="black" />
</g>
</symbol>
<g id="beehive 1">
<g id="first-beehive-setm">
<path id="hive-stem"
d="M353 80C361.284 80 368 86.7157 368 95V97C368 105.284 361.284 112 353 112H15C6.71573 112 0 105.284 0 97V95C0 86.7157 6.71573 80 15 80H217.787C221.765 80 225.58 78.4196 228.393 75.6066L261.393 42.6066C267.251 36.7487 276.749 36.7487 282.607 42.6066L288.971 48.9706C292.853 52.8528 292.853 59.1472 288.971 63.0294C282.708 69.292 287.143 80 296 80H353Z"
fill="#502601" />
<path id="leaft-up"
d="M368 0L375.032 7.032C385.896 17.898 392 32.634 392 48C392 63.366 385.896 78.102 375.032 88.968L368 96L360.968 88.968C350.104 78.102 344 63.366 344 48C344 32.634 350.104 17.898 360.968 7.032L368 0Z"
fill="#008100" />
<path id="leaf-side"
d="M464 96L456.968 103.032C446.102 113.896 431.366 120 416 120C400.634 120 385.898 113.896 375.032 103.032L368 96L375.032 88.968C385.898 78.104 400.634 72 416 72C431.366 72 446.102 78.104 456.968 88.968L464 96Z"
fill="#33BC00" />
<path id="anchor" d="M152 112H184V160H152V112Z" fill="#763A02" />
</g>4
<g>
<!-- beehive piece -->
<path id="b-peice-7" class="beehive-piece" style="transform: translate(1000px,250px);"
d="M112 432H232C240.837 432 248 439.163 248 448C248 456.837 240.837 464 232 464H112C103.163 464 96 456.837 96 448C96 439.163 103.163 432 112 432Z"
fill="#E47700" />
<!-- beehive piece -->
<path id="b-peice-6" class="beehive-piece" style="transform: translate(1000px,250px);"
d="M72 384H272C285.255 384 296 394.745 296 408C296 421.255 285.255 432 272 432H72C58.745 432 48 421.255 48 408C48 394.745 58.745 384 72 384Z"
fill="#FF8800" />
<!-- beehive piece -->
<path id="b-peice-5" class="beehive-piece" style="transform: translate(1000px,250px);"
d="M40 336C143.098 336 200.902 336 304 336C317.255 336 328 346.745 328 360C328 373.255 317.255 384 304 384H40C26.745 384 16 373.255 16 360C16 346.745 26.745 336 40 336Z"
fill="#FFA900" />
<!-- beehive piece 4 -->
<path id="b-peice-4" class="beehive-piece" style="transform: translate(1000px,250px);"
d="M24 288H320C333.255 288 344 298.745 344 312C344 325.255 333.255 336 320 336H24C10.745 336 0 325.255 0 312C0 298.745 10.745 288 24 288Z"
fill="#FEBD33" />
<!-- beehive piece 3 -->
<path id="b-peice-3" class="beehive-piece" style="transform: translate(1000px,250px);"
d="M40 240H304C317.255 240 328 250.745 328 264C328 277.255 317.255 288 304 288H40C26.745 288 16 277.255 16 264C16 250.745 26.745 240 40 240Z"
fill="#FFA900" />
<!-- beehive piece 2 -->
<path id="b-peice-2" style="transform: translate(1000px,250px);"class="beehive-piece"
d="M72 192H272C285.255 192 296 202.745 296 216C296 229.255 285.255 240 272 240H72C58.745 240 48 229.255 48 216C48 202.745 58.745 192 72 192Z"
fill="#FF8800" />
<!-- beehive piece 1 -->
<path id="b-peice-1" class="beehive-piece" style="transform: translate(1000px,250px);"
d="M112 160H232C240.837 160 248 167.163 248 176C248 184.837 240.837 192 232 192H112C103.163 192 96 184.837 96 176C96 167.163 103.163 160 112 160Z"
fill="#E47700" />
<!-- beehive keeper -->
<path id="beehive-gate" style="transform: translate(1000px,250px);"
d="M136 384H200V352C200 334.327 185.673 320 168 320C150.327 320 136 334.327 136 352V384Z"
fill="#763A02" />
</g>
<!-- <use xlink:href="#theBee" width="62.4" height="38.4"/> -->
<!-- <use xlink:href="#theBee" width="62.4" height="38.4" x="344" y="288" /> -->
<!-- corresponding piece-1 -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-1 bee" width="62.4" height="38.4" x="80" y="155" />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);"
class="corr-p-1 bee" width="62.4" height="38.4" x="220" y="155" />
<!-- corresponding piece-2 -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" width="62.4" height="38.4" class="corr-p-2 bee" x="25" y="195" />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-2 bee" width="62.4" height="38.4" x="260" y="195" />
<!-- corresponding piece-3 -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-3 bee" width="62.4" height="38.4" x="-6" y="245" />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-3 bee" width="62.4" height="38.4" x="290" y="245" />
<!-- corresponding piece-4 -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-4 bee" width="400" height="38.4" x="145" y="295" />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-4 bee" width="400" height="38.4" x="-200" y="295" />
<!-- corresponding piece-5 -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-5 bee" width="400" height="38.4" x="135" y="345" />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-5 bee" width="400" height="38.4" x="-180" y="345" />
<!-- corresponding piece-6 -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-6 bee" width="400" height="38.4" x="100" y="390" />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-6 bee" width="400" height="38.4" x="-150" y="390" />
<!-- corresponding piece-7 -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-7 bee" width="400" height="38.4" x="50" y="435" />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-7 bee" width="400" height="38.4" x="-100" y="435" />
<!-- gate keeper bee -->
<use xlink:href="#theBee"
class="gate-keeper-bee"
style="transform: translate(1000px,250px);"
width="400" height="38.4" x="-30" y="290" />
</svg>
</div>
</div>
</div>
<!-- 2ND SECTION FOREST -->
<div class="forest-container" >
<!-- <img src="Group.svg" style="width:100%;"
class="forest" alt="forest-vector"> -->
</div>
</div><!--END OF THE CONTAINER-->
<script src="script.js"></script>
</body>
</html>
From just experimenting, I believe it has to do with the timing of your createBeesFromGate and createBees functions, as well as the timing of the CSS transtions .newCreatedBee and .newCreatedBeeComingFromHive. You're using random timing for the two functions and I noticed that sometimes your bee was not being removed from createBees and sometimes it was createBeesFromGate based on the random number generated. Playing with the CSS timings affected whether they could be removed before the function reset. I think that the bee gets stuck when the timing of these line up in a way that cause the bee not to be removed.

With a SVG circle, how to position the starting point?

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>

stroke-dasharray to visual data without libraries

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.

Rotate a SVG hamburger icon into an X?

I've designed a 3-bar icon using pure SVG code in HTML. I'm using CSS3 transforms to rotate the top & bottom bars into an X shape. The problem is that they rotate around their own center, but I need them rotating around the icon's center. To get around this I've adjusted their X/Y coordinates.
This causes a LOT of buggy issues with Internet Explorer, Firefox, & Safari. Chrome seems to be alright but obviously I'd like to code this the "right" way so it'll work in all browsers.
Here's my live CodePen
HTML
<svg id="burgericon" xmlns="http://www.w3.org/2000/svg" width="90" height="80">
<g class="icon">
<rect class="frstbar" x="10" y="10" width="70" height="12" rx="7" ry="7" fill="#414141"/>
<rect class="scndbar" x="10" y="35" width="70" height="12" rx="7" ry="7" fill="#414141"/>
<rect class="thrdbar" x="10" y="60" width="70" height="12" rx="7" ry="7" fill="#414141"/>
</g>
</svg>
CSS
.hamburger { display:block; text-align:center; }
svg { cursor:pointer; }
.frstbar, .scndbar, .thrdbar {
-webkit-transition: all 0.35s linear;
-moz-transition: all 0.35s linear;
-o-transition: all 0.35s linear;
transition: all 0.35s linear;
}
#burgericon.open .frstbar {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#burgericon.open .thrdbar {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#burgericon.open .scndbar { width: 0; opacity: 0; }
JS
$('#burgericon').on('click', function(e) {
if($(this).attr('class') != "open") {
$(this).attr('class','open');
$('.frstbar').attr('x','25').attr('y','-5');
$('.thrdbar').attr('x','-35').attr('y','55');
}
else {
$(this).attr('class','default');
$('.frstbar').attr('x','10').attr('y','10');
$('.thrdbar').attr('x','10').attr('y','60');
}
});
I also think changing the X/Y coords is causing a blurry effect. I've added a screenshot below. First you'll see the completed X icon and then you'll see how it looks when animated back to default.
The bars aren't perfectly straight but instead they look crooked for some reason.
Screenshot here
I'm still new to SVG manipulation so I'm not sure how to properly rotate <rect> elements with CSS3/JS. Any help or tips in the right direction would be more than appreciated.
You can remove the JS positioning by using the CSS transform-origin property. You can set it on the left of the first and second bars with transform-origin: 0 50%;.
This way they will cross each other when they are rotated :
document.getElementById('burgericon').addEventListener('click', function (e) {
this.classList.toggle('open');
});
.hamburger {
display: block;
text-align: center;
}
svg {
cursor: pointer;
}
.frstbar,.scndbar,.thrdbar {
transition: all 0.35s linear;
transform: rotate(0deg);
transform-origin: 0% 50%;
}
#burgericon.open .frstbar {
transform: rotate(45deg);
}
#burgericon.open .thrdbar {
transform: rotate(-45deg);
}
#burgericon.open .scndbar {
width: 0;
opacity: 0;
}
<nav class="hamburger">
<svg id="burgericon" xmlns="http://www.w3.org/2000/svg" width="90" height="80">
<g class="icon">
<rect class="frstbar" x="10" y="10" width="70" height="12" rx="7" ry="7" fill="#414141" />
<rect class="scndbar" x="10" y="35" width="70" height="12" rx="7" ry="7" fill="#414141" />
<rect class="thrdbar" x="10" y="60" width="70" height="12" rx="7" ry="7" fill="#414141" />
</g>
</svg>
</nav>
<div>
</div>
Credits to David Thomas for the JS
Note that the transform-origin property needs the same vendor prefixes as the transform property. I have omited them for both in the above snippet
CSS
Using css transform: rotate() I rotated the elements so they form the X
Using css opacity and transitions; made the object gradually go transparent.
.icon {
stroke: none;
fill: #777;
}
.icon .frstbar {
transform-origin: 10% 50%;
transition: transform 1s;
}
.icon:hover .frstbar {
transform: rotate(45deg);
}
.icon .thrdbar {
transform-origin: 10% 50%;
transition: transform 1s;
}
.icon:hover .thrdbar {
transform: rotate(-45deg);
}
.scndbar {
opacity: 1;
transition: opacity 1s;
}
.icon:hover .scndbar {
opacity: 0;
}
<svg id="burgericon" xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 100 100">
<g class="icon">
<rect class="frstbar" x="10" y="10" width="90" height="12" rx="7" ry="7" />
<rect class="scndbar" x="10" y="35" width="90" height="12" rx="7" ry="7" />
<rect class="thrdbar" x="10" y="60" width="90" height="12" rx="7" ry="7" />
</g>
</svg>

Categories

Resources