.svgContainer{
width:200px;
height: 200px;
margin-bottom:-10px;
}
svg line {
stroke: #5f39dd;
stroke-width: 3px;
stroke-linecap: round;
stroke-dasharray: 2px 20px;
animation: animateline 2s linear both infinite;
}
#keyframes animateline {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: -5rem;
}
}
<div class="svgContainer" >
<svg >
<line x1="0" y1="0" x2="200" y2="200" ></line>
</svg>
</div>
Am having an animation break something like a page and play again after a few seconds.
Is there any way way I can have this animation in continuous flow without any for of break in btw.
Simply use -22px (20px + 2px) then control the duration to adjust the speed
.svgContainer {
width: 200px;
height: 200px;
margin-bottom: -10px;
}
svg line {
stroke: #5f39dd;
stroke-width: 3px;
stroke-linecap: round;
stroke-dasharray: 2px 20px;
animation: animateline .5s linear infinite;
}
#keyframes animateline {
to {
stroke-dashoffset: -22px;
}
}
<div class="svgContainer">
<svg>
<line x1="0" y1="0" x2="200" y2="200" ></line>
</svg>
</div>
Related
I'm trying to get a hover animation that is functioning correctly, to fire once when the page loads AND refreshes. It does appear to fire on INTIAL load but when I visit another section of the site and return, the animation does not fire again(hover continues to work). I know I need to use keyframes but i'm having trouble implementing it. The hover animation works perfectly, just not the keyframes for page load.
The SVG in HTML
<svg id="stroke" xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>
<path id="line" d="M2 2c49.7 2.6 50 3.1 100 1.7-46.5 2-93 4.4-139.2 7.3 45.2-1.5 90.6-1.8 135.8-.6" fill="none" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke"/>
</defs>
</svg>
<div class="home-body ">
<p class = 'entry-content'>My name is
<span class="first-name">
Hunter
<svg class="button-stroke" viewBox="0 0 154 5">
<use href="#line"></use>
</svg>
<svg class="button-stroke" viewBox="0 0 154 5">
<use href="#line"></use>
</svg>
</span><br></p>
CSS
.first-name {
display: inline-block;
color: white;
min-width: 154px;
text-decoration: none;
position: relative;
font-weight: bold;
}
.first-name:hover .button-stroke:nth-child(2) {
animation: strokeAnimation 1s ease-out;
stroke-dashoffset: 0;
}
.button-stroke:nth-child(2) {
animation: strokeAnimation 1s ease-out;
stroke-dasharray: 650px;
stroke-dashoffset: 650px;
stroke: #0d1117;
stroke-width: 5;
-webkit-transition: stroke-dashoffset 900ms ease-out;
transition: stroke-dashoffset 900ms ease-out;
}
.button-stroke {
display: block;
width: calc(100% - 40px);
height: 10px;
stroke: #ffcb47;
position: absolute;
stroke-width: 2;
}
#-webkit-keyframes strokeAnimation {
from {
stroke-dashoffset: 0;
stroke-dasharray: 650px;
stroke-dashoffset: 650px;
}
to {
stroke-dashoffset: 100%;
stroke-dasharray: 0px;
stroke-dashoffset: 0px;
}
}
#keyframes strokeAnimation {
from {
stroke-dashoffset: 0;
stroke-dasharray: 650px;
stroke-dashoffset: 650px;
}
to {
stroke-dashoffset: 100%;
stroke-dasharray: 0px;
stroke-dashoffset: 0px;
}
}
As you can see the animation does look like it is starting to trigger but backwards and then it flickers.
the required loader is to be of the following gif given above but needs to be implemented in a svg.
the code given below is the svg I have implemented so far but I am not able to get the required animation as that of a gif. Can somebody point out where I am going wrong or help me with how to get the animations right. Thanks in advance
svg{
width: 250px;
height: 250px;
position: relative;
}
/* .circles{
transform: rotate(-90deg);
} */
#inner{
stroke-dasharray: 314 314;
stroke-dashoffset: 314;
transform: rotate(-90deg);
transform-origin: 50% 50%;
/* animation: rotate 2s linear infinite; */
animation: animate 2s ease-in-out infinite;
}
#keyframes animate{
0%,100%{
stroke-dashoffset: 314;
}
50%{
stroke-dashoffset: 0;
}
50.1%{
stroke-dashoffset: 628 ;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="svg.css">
<title>Document</title>
</head>
<body>
<svg>
<g class="circles">
<circle cx="125" cy="125" r="50" fill="none" stroke-width="15px" stroke="#E0E3E9">
</circle>
<circle id="inner" cx="125" cy="125" r="50" fill="none" stroke-width="12px" stroke="#6B04A8">
</circle>
</g>
</svg>
</body>
</html>
I hope this is what you need: instead of animating the stroke-dashoffset I'm animating the stroke-dasharray
svg {
width: 250px;
height: 250px;
position: relative;
}
/* .circles{
transform: rotate(-90deg);
} */
#inner {
stroke-dasharray: 1 314;
stroke-dashoffset: 314;
transform: rotate(-90deg);
transform-origin: 50% 50%;
/* animation: rotate 2s linear infinite; */
animation: animate 2s ease-in-out infinite;
}
#keyframes animate {
100% {
stroke-dasharray: 314;
}
}
svg {
border: 1px solid;
}
<svg>
<g class="circles">
<circle cx="125" cy="125" r="50" fill="none" stroke-width="15px" stroke="#E0E3E9">
</circle>
<circle id="inner" cx="125" cy="125" r="50" fill="none" stroke-width="12px" stroke="#6B04A8">
</circle>
</g>
</svg>
Second attempt:
The OP is commenting
for the first 50% of the circle it has to grow and after crossing the 50% only it should shrink
svg {
width: 250px;
height: 250px;
position: relative;
}
/* .circles{
transform: rotate(-90deg);
} */
#inner {
transform: rotate(-90deg);
transform-origin: 50% 50%;
animation: animate 5s ease-in-out infinite;
}
#keyframes animate{
0%{
stroke-dasharray: 0 314;
stroke-dashoffset: 314;
}
50%{
stroke-dasharray: 157 157;
stroke-dashoffset: 314;
}
75%{
stroke-dasharray: 157 157;
stroke-dashoffset: 157;
}
100%{
stroke-dasharray: 0 314;
stroke-dashoffset: 0;
}
}
svg {
border: 1px solid;
}
<svg>
<g class="circles">
<circle cx="125" cy="125" r="50" fill="none" stroke-width="15px" stroke="#E0E3E9">
</circle>
<circle id="inner" cx="125" cy="125" r="50" fill="none" stroke-width="12px" stroke="#6B04A8" stroke-dasharray="0 314" stroke-dashoffset = "157">
</circle>
</g>
</svg>
Here the demo: https://codepen.io/joondoe/pen/XWrGgyo
here the code:
html, body {
height: 100%;
}
body {
background: #082330;
background-size: .12em 100%;
font: 16em/1 Arial;
}
h1 {
font-size: 0.15em;
margin: 30px;
font-family: Mansalva;
}
.text--line {
font-size: .5em;
}
svg {
position: absolute;
width: 100%;
height: 100%;
}
.text-copy {
fill: none;
stroke: white;
stroke-dasharray: 7% 28%;
stroke-width: 9px;
font-family: Mansalva;
-webkit-animation: stroke-offset 5s infinite linear;
animation: stroke-offset 5s infinite linear;
}
.text-copy:nth-child(1) {
stroke: #360745;
stroke-dashoffset: 7%;
}
.text-copy:nth-child(2) {
stroke: #D61C59;
stroke-dashoffset: 14%;
}
.text-copy:nth-child(3) {
stroke: #E7D84B;
stroke-dashoffset: 21%;
}
.text-copy:nth-child(4) {
stroke: #EFEAC5;
stroke-dashoffset: 28%;
}
.text-copy:nth-child(5) {
stroke: #1B8798;
stroke-dashoffset: 35%;
}
#-webkit-keyframes stroke-offset {
50% {
stroke-dashoffset: 35%;
stroke-dasharray: 0 87.5%;
}
}
#keyframes stroke-offset {
50% {
stroke-dashoffset: 35%;
stroke-dasharray: 0 87.5%;
}
}
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Mansalva&display=swap" rel="stylesheet">
<h1> Hey World </h1>
<svg viewBox="0 0 800 600">
<symbol id="s-text">
<text text-anchor="middle"
x="50%"
y="35%"
class="text--line"
>
Hey
</text>
<text text-anchor="middle"
x="50%"
y="68%"
class="text--line2"
>
World
</text>
</symbol>
<g class="g-ants">
<use xlink:href="#s-text"
class="text-copy"></use>
<use xlink:href="#s-text"
class="text-copy"></use>
<use xlink:href="#s-text"
class="text-copy"></use>
<use xlink:href="#s-text"
class="text-copy"></use>
<use xlink:href="#s-text"
class="text-copy"></use>
</g>
</svg>
I am wondering why the middle stroke of the "W"'s letter is very sharp in "Hey World" since it is very smooth in the original font -see the text.
thanks for any hint
It looks like pointy line join is not noticeable on the font because it is hidden by the font being filled in where your animated outline is not.
If you want to change it though see the stroke-linejoin attribute.
I have svg in my web site which works fine in chrome but when I try to check it on Firefox the thing is out of frame enlarged I think. I am a designer who started coding few months back. Here is the image for chrome and Firefox.
In Chrome:
In Firefox:
Here is the code snippet i used
svg {
display: block;
font: 10.5em 'Arial';
width: 960px;
height: 300px;
margin: 0 auto;
}
.text-copy {
fill: none;
stroke: white;
stroke-dasharray: 6% 29%;
stroke-width: 5px;
stroke-dashoffset: 0%;
animation: stroke-offset 5.5s infinite linear;
}
.text-copy:nth-child(1){
stroke: #4D163D;
animation-delay: -1s;
}
.text-copy:nth-child(2){
stroke: #840037;
animation-delay: -2s;
}
.text-copy:nth-child(3){
stroke: #BD0034;
animation-delay: -3s;
}
.text-copy:nth-child(4){
stroke: #BD0034;
animation-delay: -4s;
}
.text-copy:nth-child(5){
stroke: #FDB731;
animation-delay: -5s;
}
#keyframes stroke-offset{
100% {stroke-dashoffset: -35%;}
}
#media (min-width:768px){
svg{
width: 750px;
height: 300px;
margin: 0 auto;
}
}
#media (max-width:767px){
svg{
font: 6.5em 'Arial';
width: 100%;
height: 300px;
margin: 0 auto;
}
.text-copy {
fill: none;
stroke: white;
stroke-dasharray: 6% 29%;
stroke-width: 3px;
stroke-dashoffset: 0%;
animation: stroke-offset 5.5s infinite linear;
}
}
.text-center1{
color:rgba(255,255,255,0.8);
text-align: center;
font-size: 48px ;
margin-top:40px;
}
#media (max-width:992px){
.text-centre1{
font-size:30px;
}
}
<svg>
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="80%">Digital</text>
</symbol>
<g class = "g-ants">
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
</g>
</svg>
This seems to be a bug in Firefox.
If you apply an em-based font size to the <svg> and have text inside a <symbol> then in Firefox, the <text> element thinks the font should be 10.5 times the current font size of 10.5em. In other words the font size is multiplying and ends up as 110.25em.
The simple solution is to move the font rule to the <text> ekement.
text {
font: 10.5em 'Arial';
}
svg {
display: block;
width: 960px;
height: 300px;
margin: 0 auto;
}
text {
font: 10.5em 'Arial';
}
.text-copy {
fill: none;
stroke: white;
stroke-dasharray: 6% 29%;
stroke-width: 5px;
stroke-dashoffset: 0%;
animation: stroke-offset 5.5s infinite linear;
}
.text-copy:nth-child(1){
stroke: #4D163D;
animation-delay: -1s;
}
.text-copy:nth-child(2){
stroke: #840037;
animation-delay: -2s;
}
.text-copy:nth-child(3){
stroke: #BD0034;
animation-delay: -3s;
}
.text-copy:nth-child(4){
stroke: #BD0034;
animation-delay: -4s;
}
.text-copy:nth-child(5){
stroke: #FDB731;
animation-delay: -5s;
}
#keyframes stroke-offset{
100% {stroke-dashoffset: -35%;}
}
#media (min-width:768px){
svg{
width: 750px;
height: 300px;
margin: 0 auto;
}
}
#media (max-width:767px){
svg{
width: 100%;
height: 300px;
margin: 0 auto;
}
text {
font: 6.5em 'Arial';
}
.text-copy {
fill: none;
stroke: white;
stroke-dasharray: 6% 29%;
stroke-width: 3px;
stroke-dashoffset: 0%;
animation: stroke-offset 5.5s infinite linear;
}
}
.text-center1{
color:rgba(255,255,255,0.8);
text-align: center;
font-size: 48px ;
margin-top:40px;
}
#media (max-width:992px){
.text-centre1{
font-size:30px;
}
}
<svg>
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="80%">Digital</text>
</symbol>
<g class = "g-ants">
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
</g>
</svg>
As a rule of thumb, always include height,width and viewBox for svg images as attributes as opposed to CSS style. Different browsers render SVG differently if these attributes are not present.
I am trying to add the CSS code inside the HTML but I am having trouble getting the SVG animation to work. What am I doing wrong here? My guest is that I am referencing <style> wrongly but after a couple of tries I can't make it work.
<svg>
<style type="text/css">
.spinner {
animation: rotate 2s linear infinite;
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
width: 50px;
height: 50px;
}
.path {
stroke: hsl(210, 70, 75);
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
#keyframes rotate {
100% {
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
</style>
<svg class="spinner">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"</circle>
</svg>
</svg>
CodePen
Thank you in advance.
Your animation works. You messed up stroke color definition. hsl(210, 70%, 75%);
and circle elements opening tag is missing closing bracket >
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5" > </circle>
html, body {
height: 100%;
background-color: #000000;
}
<svg>
<style type="text/css">
.spinner {
animation: rotate 2s linear infinite;
transform-origin:center center;
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
width: 50px;
height: 50px;
}
.path {
stroke: hsl(210, 70%, 75%);
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
</style>
<g class="spinner">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</g>
</svg>
you need to close the html tag for circle
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"</circle>
should be
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>