Hello I have this svg it's working fine in chrome but when I try it with IE it doesn't work. This is my code: https://jsfiddle.net/y3k9hntp/1/
.svg-wrapper2 {
position: relative;
top:100px;
transform: translateY(-50%);
margin: 0 auto;
width: 320px;
}
.shape2 {
position:relative;
stroke-dasharray: 140 540;
stroke-dashoffset: -474;
stroke-width: 2px;
fill: transparent;
stroke: #c2b6b4;
border-bottom: 6px solid black;
transition: stroke-width 2s, stroke-dashoffset 2s, stroke-dasharray 2s;
}
.svg-wrapper2:hover .shape2 {
position:relative;
stroke-width: 2px;
stroke-dashoffset: 0;
stroke-dasharray: 1000;
}
Related
This is a follow-up question of this post Use of foreignobject inside svg
To summarize, I asked for help to mimic what the following.html does in .svg file
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: cornsilk;
}
.container {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container svg {
height: 50vh;
border: 1px solid;
padding: 10px;
}
.heart {
fill: #D75A4A;
stroke: #fff;
animation: stroke-anim 2s infinite alternate, heart-scaling 2s infinite alternate, heart-fill 3s infinite alternate;
transform-origin: 50%;
transition: all 0.5s;
}
#keyframes stroke-anim {
0% {
stroke-dasharray: 157px 157px;
stroke-dashoffset: 157px;
}
100% {
stroke-dashoffset: 0px;
stroke-dasharray: 5px 2px;
}
}
#keyframes heart-scaling {
0% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
#keyframes heart-fill {
0% {
fill: Aquamarine;
}
25% {
fill: Brown;
}
50% {
fill: DarkGrey;
}
75% {
fill: DarkOrange;
}
100% {
fill: DarkTurquoise;
}
}
<div class="container">
<svg viewBox="0 0 50 50">
<path class="heart" d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543
c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503
c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z" /> </svg>
</div>
#enxaneta suggested the following
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: cornsilk;
}
.container {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container svg {
height: 50vh;
border: 1px solid;
padding: 10px;
}
.heart {
fill: #D75A4A;
stroke: #fff;
animation: stroke-anim 2s infinite alternate, heart-scaling 2s infinite alternate, heart-fill 3s infinite alternate;
transform-origin: 50%;
transition: all 0.5s;
}
#keyframes stroke-anim {
0% {
stroke-dasharray: 157px 157px;
stroke-dashoffset: 157px;
}
100% {
stroke-dashoffset: 0px;
stroke-dasharray: 5px 2px;
}
}
#keyframes heart-scaling {
0% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
#keyframes heart-fill {
0% {
fill: Aquamarine;
}
25% {
fill: Brown;
}
50% {
fill: DarkGrey;
}
75% {
fill: DarkOrange;
}
100% {
fill: DarkTurquoise;
}
}
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<path class="heart" d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543
c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503
c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z" />
</svg>
When I open this .svg file on the brower (chrome, edge) the animation applies but I am not 100% sure if other CSS properties are applied as well. For example, the svg renders on a white background on a chrome. Do you know why is that? Thank you in advance.
I am trying to add a animated tickmark to my site but i want to resize this tickmark to 3-4 times as of now.
CSS:
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #7ac142;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
width: 56px;
height: 56px;
border-radius: 50%;
display: block;
stroke-width: 2;
stroke: #fff;
stroke-miterlimit: 10;
margin: 10% auto;
box-shadow: inset 0px 0px 0px #7ac142;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%, 100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #7ac142;
}
}
HTML:
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>
i am trying trying to increase its size but am able to increase size of outer circle but not able to increase size of tick mark. pLease sugest
Just change the css as below.
Compare items to understand what has been changed.
// Colors
$green: #7ac142;
$white: #fff;
// Misc
$curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.checkmark {
width: 156px;
height: 156px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: $white;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px $green;
animation: fill .4s ease-in-out .4s forwards, scale .9s ease-in-out 1s both;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 5;
stroke-miterlimit: 1;
stroke: $green;
fill: none;
animation: stroke .6s $curve forwards;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke .3s $curve .8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%, 100% {
transform: none;
}
50% {
transform: scale3d(0.1, 0.1, 0);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 78px $green;
}
}
Since the path for the "tic" has only lowercase commands after the M is easy to move. I've changed the path to: d="M-11.9 27.2l7.1 7.2 16.7-16.8" where 14.1 - 26 = -11.9 Now I can transform the tic using scale. I'm using transform="scale(1.5)... but you can use the scale you need. After scaling I'm translating the "tic" in the center with translate(26,0)
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.checkmark {
width: 56px;
height: 56px;
border-radius: 50%;
display: block;
stroke-width: 3;
stroke: #fff;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px #7ac142;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #7ac142;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%, 100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #7ac142;
}
}
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
<path class="checkmark__check" fill="none" d="M-11.9 27.2l7.1 7.2 16.7-16.8" transform="scale(1.5) translate(26,0)"/>
</svg>
I want it to repeat the animation from where the hover has been 'released. So this is what my code looks like:
<section class="container">
<figure class="chart" data-percent="100">
<figcaption>HTML</figcaption>
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
</section>
This is the HTML I have got.
.outer {
fill: transparent;
stroke: #333;
stroke-width: 10;
stroke-dasharray: 534;
/* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px);
}
.chart[data-percent='100'] {
stroke-dashoffset: 0;
-webkit-animation: show100 2s;
animation-name: show100;
animation-duration: 2s;
}
.chart:hover .outer {
stroke-dashoffset: 534;
-webkit-animation: show0 2s;
animation-name: show0;
animation-duration: 2s;
}
#-webkit-keyframes show100 {
from {
stroke-dashoffset: 534;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes show100 {
from {
stroke-dashoffset: 534;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes show0 {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 534;
}
}
#keyframes show0 {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 534;
}
}
I am not sure if 'release' is the right word but I can't think of anything better right now.
So if you hover it, that animation will be reversed. But what I want to accomplish is that when you release the hover at 50%, the animation will play from 50% and when you release the hover at 20% that the animation will play from 20%. I haven't got really, I got stuck after the hover-reverse.
this is a live example of my working code:
https://jsfiddle.net/172dLc93/
Thanks
Use animation for the initial setup, but then use transitions so that it continues from where it left.
#import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
body {
font-family: 'Lato';
}
.container {
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.chart {
position: relative;
display: inline-block;
color: #999;
font-size: 20px;
text-align: center;
}
.chart figcaption {
padding: 50px 25px;
width: 100px;
height: 50px;
border: 20px solid #f0f0f0;
border-radius: 100px;
line-height: 50px;
}
.chart svg {
position: absolute;
top: 0;
left: 0;
}
.outer {
fill: transparent;
stroke: #333;
stroke-width: 10;
stroke-dasharray: 534;
transition:stroke-dashoffset 2s;
/* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px);
}
.chart[data-percent='100'] {
stroke-dashoffset: 0
-webkit-animation: show100 2s;
animation-name: show100;
animation-duration: 2s;
}
.chart:hover .outer {
stroke-dashoffset: 534;
}
#-webkit-keyframes show100 {
from {
stroke-dashoffset: 534;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes show100 {
from {
stroke-dashoffset: 534;
}
to {
stroke-dashoffset: 0;
}
}
<section class="container">
<figure class="chart" data-percent="100">
<figcaption>HTML</figcaption>
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
</section>
Updated fiddle: https://jsfiddle.net/gaby/172dLc93/4/
Alright, I'm trying to emulate the CSS effect on this chart:
http://bl.ocks.org/bobmonteverde/2070069
When you hover over a point, it creates a bigger circle around the point.
For the life of me, I can't figure out what I'm missing in my own CSS :)
my Fiddle: https://jsfiddle.net/y3LpjLph/3/
CSS:
/* Line Chart CSS */
.axis path,
.axis line {
fill: none;
stroke: #000;
stroke-width: 3px;
shape-rendering: crispEdges;
}
#pipeline-1,
#pipeline-2 {
fill: none;
stroke-width: 1.5px;
stroke-linecap: round;
transition: stroke-width 250ms linear;
-moz-transition: stroke-width 250ms linear;
-webkit-transition: stroke-width 250ms linear;
transition-delay: 250ms
-moz-transition-delay: 250ms;
-webkit-transition-delay: 250ms;
}
.x.axis path {
/* Uncomment below if I want to remove x-axis line */
/* display: none;*/
}
stroke-opacity: 0;
fill-opacity: 0;
#pipeline-chart-render {
padding-left: -50px;
}
.area {
fill: gray;
opacity: 0.2;
}
.legend-items text {
fill: steelblue;
}
.legend {
fill: white;
text-decoration-color: blue;
}
/* Simple tooltip CSS */
div.tooltip {
position: absolute;
background-color: rgba(255,255,255,1);
padding: 10px;
border: 1px solid #ddd;
font-family: Arial;
font-size: 13px;
font-weight: bold;
color: #7c795d;
transition: opacity 500ms linear;
-moz-transition: opacity 500ms linear;
-webkit-transition: opacity 500ms linear;
transition-delay: 500ms
-moz-transition-delay: 500ms;
-webkit-transition-delay: 500ms;
-moz-box-shadow: 4px 4px 12px rgba(0,0,0,.5);
-webkit-box-shadow: 4px 4px 12px rgba(0,0,0,.5);
box-shadow: 4px 4px 12px rgba(0,0,0,.5);
-moz-border-radius: 15px;
border-radius: 15px;
}
.noPointers{
pointer-events:none;
}
.pipelinePoint .circlePoint.active {
fill: orangered;
fill-opacity: 1;
stroke-width: 25px;
stroke-opacity: .5;
}
.pipelinePoint {
stroke-opacity: 1;
fill-opacity: 0.5;
}
.pipelinePoint .circlePoint {
transition: stroke-width 250ms linear;
-moz-transition: stroke-width 250ms linear;
-webkit-transition: stroke-width 250ms linear;
}
/*.pipelinePoint .circlePoint.hover {
fill: blue;
}*/
.circlePoint {
fill-opacity: 0.5;
transition: stroke-width 250ms linear;
-moz-transition: stroke-width 250ms linear;
-webkit-transition: stroke-width 250ms linear;
}
.point-paths path {
/*
fill: #eee;
stroke: #aaa;
*/
stroke-opacity: 0;
fill-opacity: 0;
}
You've filled your circles, but they have do not have a stroke color. So, your css animation is running, there's just nothing to see:
.pipelinePoint .circlePoint.active {
fill: orangered;
stroke: orangered;
fill-opacity: 1;
stroke-width: 25px;
stroke-opacity: .5;
}
Updated fiddle.
I know it is possible to draw and animate arcs in SVG and canvas. However, is it possible in CSS?
I have created an arc using the following method:
.arc{
width:150px;
height:400px;
border-radius:50%;
border-right:1px solid black;
border-left:1px solid black;
border-top:1px solid black;
border-bottom:1px solid white;
}
But, how can I animate this? The only way I can think of is having a pure white div over it and sliding that div to the right gradually revealing the arc. Is there a better way?
Here is working demo with minimum of hard-coded variables. This works based on animated circle halves:
.circle {
display: inline-flex;
overflow: hidden;
}
.circle__half {
height: 200px;
width: 100px;
position: relative;
overflow: hidden;
}
.circle__half:before {
height: inherit;
width: inherit;
position: absolute;
content: "";
border-radius: 100px 0 0 100px;
background-color: lime;
transform-origin: 100% 50%;
/* hidden by default */
transform: rotate(180deg);
opacity: 0.65;
animation-name: rotate-circle-half;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.circle__half--right {
transform: scale(-1, -1);
}
.circle .circle__half--right:before {
animation-name: rotate-circle-half--right;
}
/* show half of circle half of the time */
#keyframes rotate-circle-half {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
#keyframes rotate-circle-half--right {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="circle">
<div class="circle__half"></div>
<div class="circle__half circle__half--right"></div>
</div>
Also the same look as iConnor's answer but doesn't have drawback of hardcoded background-color:
*,
*:before,
*:after {
box-sizing: border-box;
}
.circle {
display: inline-flex;
overflow: hidden;
}
.circle__half {
height: 200px;
width: 100px;
position: relative;
overflow: hidden;
}
.circle__half:before {
height: inherit;
width: inherit;
position: absolute;
content: "";
border-radius: 100px 0 0 100px;
border: 10px solid #00507c;
border-right-color: transparent;
background-color: #0087cf;
transform-origin: 100% 50%;
/* hidden by default */
transform: rotate(180deg);
opacity: 0.65;
animation-name: rotate-circle-half;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.circle__half--right {
transform: scale(-1, -1);
}
.circle .circle__half--right:before {
animation-name: rotate-circle-half--right;
}
/* show half of circle half of the time */
#keyframes rotate-circle-half {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
#keyframes rotate-circle-half--right {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="circle">
<div class="circle__half"></div>
<div class="circle__half circle__half--right"></div>
</div>
If you need sole CSS3, then you can set a width+height, set border-radius to 100%, disable the extra borders (use only 1 or 2) and add some good pixels to it.
Then you can animate using animate: time animation ease timingFunction;
Declare the animation itself using #-prefix-keyframes { . . . } (Eh yea, looks like most browser engines require prefix for this one, chrome does :S)
I think I might have something close to what you mean:
.qLoader2 {
border: 4px solid blue;
width: 10vw;
height: 10vw;
width: 72px;
height: 72px;
position: absolute;
top: 12vh;
right: 45vw;
left: 45vw;
background: white;
opacity: 0.45;
border-right: none;
border-top: none;
border-left: none;
z-index: 2000;
background-color: transparent;
border-radius: 100%;
transform: rotateZ(0);
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
/* #-moz-keyframes spin { . . . } */
/* #-ms-keyframes spin { . . . } */
/* #-o-keyframes spin { . . . } */
#-webkit-keyframes spin {
from {
transform: rotateZ(0deg) scale(1);
}
50% {
transform: rotateZ(540deg) scale(0.9);
border-color: #0099ff;
}
to {
transform: rotateZ(1080deg) scale(1);
}
}
#keyframes spin {
from {
transform: rotateZ(0deg) scale(1);
}
50% {
transform: rotateZ(540deg) scale(0.9);
border-color: #0099ff;
}
to {
transform: rotateZ(1080deg) scale(1);
}
}
<div class="qLoader2"></div>
On JSFiddle
Feel free to use and modify.
Alternatively you could check something with SVG it's fairly decent as well and supported by most nowadays browsers.
EDIT: Using two arcs, you can have the animation draw cleanly from left-to-right AND have the background show through:
http://jsfiddle.net/sPv4A/6/
Vendor prefixes not included for CSS:
.arcContain {
width: 150px;
height: 400px;
position: relative;
margin: 20px;
}
.arc {
width: 150px;
height: 400px;
border-radius: 50%;
border: 2px solid black;
border-bottom: 2px solid transparent;
position: absolute;
top: 0;
right: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.archideLeft .arc {
top: auto;
bottom: 0;
right: auto;
left: 0;
}
.archide {
width: 50%;
height: 0%;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
animation: appear 1.2s ease-in 1.2s forwards;
}
.archideLeft {
top: auto;
bottom: 0;
right: auto;
left: 0;
animation: appear 1.2s ease-out forwards;
}
#keyframes appear {
to {
height: 100%;
}
}
<div class="arcContain">
<div class="archide archideLeft">
<div class="arc"></div>
</div>
<div class="archide">
<div class="arc"></div>
</div>
</div>
OLD ANSWER: Maybe using two child divs to cover it up, and then have them shrink away to reveal it:
.arc {
width: 150px;
height: 400px;
border-radius: 50%;
border-right: 1px solid black;
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid white;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.arcInner {
background: white;
height: 402px;
width: 77px;
position: absolute;
}
.arcLeft {
top: -2px;
left: -2px;
-webkit-transition: height 2s linear;
-moz-transition: height 2s linear;
-ms-transition: height 2s linear;
-o-transition: height 2s linear;
transition: height 2s linear;
}
.arcRight {
bottom: 0;
right: -2px;
-webkit-transition: height 2s 2s linear;
-moz-transition: height 2s 2s linear;
-ms-transition: height 2s 2s linear;
-o-transition: height 2s 2s linear;
transition: height 2s 2s linear;
}
.appear .arcInner {
height: 0;
}
<div class="arc">
<div class="arcInner arcLeft"></div>
<div class="arcInner arcRight"></div>
</div>
As Per Chris B's suggestion on the original question, the answer is to contain the arc in another div and then animate the width of the container:
http://jsfiddle.net/AZb3X/
CSS:
body{
background:orange;
}
.arc{
width:150px;
height:400px;
border-radius:50%;
border-right:1px solid black;
border-left:1px solid black;
border-top:1px solid black;
border-bottom:1px solid white;
float:left;
}
.hider{
width:0px;
overflow:hidden;
-webkit-animation:unhide 12s;
}
#-webkit-keyframes unhide{
100%{width:400px}
}
HTML:
<div class='hider'>
<div class="arc"></div>
</div>
I may be a little late, but I think using two "hiders" and translating one up and one down will look a little better.
Working Example
<div class="wrap">
<div class="arc"></div>
</div>
body {
background:orange;
}
.wrap {
position:absolute;
height:400px;
width:170px;
overflow: hidden;
}
.arc {
position:absolute;
width:150px;
height:400px;
margin:10px;
border-radius:50%;
border-right:1px solid black;
border-left:1px solid black;
border-top:1px solid black;
border-bottom:1px solid transparent;
}
.arc:before {
content:"";
position:absolute;
left:-1px;
top:-2px;
background: orange;
width:76px;
height:375px;
animation:unhide1 5s linear both;
}
.arc:after {
content:"";
position:absolute;
left:75px;
top:-2px;
background: orange;
float: right;
width:76px;
height:375px;
animation: unhide2 5s linear 5s both;
}
#keyframes unhide1 {
100% {
transform: translatey(-375px);
}
}
#keyframes unhide2 {
100% {
transform: translatey(375px);
}
}