I want to change the size of Rocket in below source code:
https://jsfiddle.net/umaar/4FMyA/
I have been trying many ways, but still has no effect.
Actually, I want to make the Rocket a bit smaller.
Thanks
/*=============================================
[ Page Setup ]
==============================================*/
body {
background: #34495e
}
#pageWrap {
width: 100%;
overflow: hidden;
}
#rocket {
display: block;
margin: 0 auto;
margin-top: 150px;
}
/*=============================================
[ Inactive State Styles ]
==============================================*/
.rocket_inner {
transform: translateY(15px) translateX(-3px);
-webkit-transition: .3s;
-moz-transition: .3s;
transition: .3s;
}
.icon_circle {
transition: .2s;
fill: #22303e;
}
.large_window_path {
transition: .2s;
fill: #22303e;
}
.small_window_path {
fill: #22303e;
}
.wing_shadow {
fill: #34495e;
}
.rocket_bottom {
fill: #34495e
}
.rocket_base {
fill: #34495e
}
.rocket_shadow {
fill: #34495e
}
.window_grandient {
stop-color: #2DCB73
}
.window_grandient1 {
stop-color: #2AC16D
}
.window_grandient2 {
stop-color: #29B968
}
.window_grandient3 {
stop-color: #28B767
}
.wing_base {
fill: #34495e
}
.fire_path {
fill: #FC0
}
/*=============================================
[ Hover Styles ]
==============================================*/
.rocket_wrap:hover .rocket_base {
fill: #FFFFFF !important;
stroke-width: 0px !important;
}
.rocket_wrap:hover .rocket_shadow {
fill: #EDEDED !important;
stroke-width: 0px !important;
}
.rocket_wrap:hover .icon_circle {
fill: #282e3a !important;
stroke: #fff !important;
stroke-width: 7px !important;
}
.rocket_wrap:hover .small_window_path {
fill: #28B767 !important;
stroke-width: 0px !important;
}
.rocket_wrap:hover .wing_shadow {
display: block !important;
fill: #FC9252 !important;
}
.rocket_wrap:hover .wing_base {
fill: #E16E36 !important;
stroke-width: 0px !important;
}
.rocket_wrap:hover .rocket_bottom {
fill: #2DCB73 !important;
stroke-width: 0px !important;
}
.rocket_wrap:hover .large_window_path {
fill: url(#SVGID_2_) !important;
stroke-width: 0px !important;
}
.rocket_wrap:hover .rocket_inner {
transform: translateY(0px) translateX(-3px) !important;
}
/*=============================================
[ Animation Classes ]
==============================================*/
.fire {
display: none;
animation-delay: 0s;
fill-opacity: 1;
animation-timing-function: ease-in;
stroke-width: 0px;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: 50% 50%;
animation-direction: normal;
}
.rocket_wrap:hover #fireLeft {
display: block;
animation-delay: 0s;
animation-name: fireLeft, fillOpacity1;
animation-duration: 1.2s;
}
.rocket_wrap:hover #fireMiddle {
display: block;
animation-delay: 0s;
animation-name: fireMiddle, fillOpacity1;
animation-duration: 1s;
}
.rocket_wrap:hover #fireRight {
display: block;
animation-delay: 0s;
animation-name: fireRight, fillOpacity1;
animation-duration: 1.3s;
}
.rocket_wrap:hover #fireSmallLeft {
display: block;
animation-delay: 0s;
animation-name: fireSmall, fillOpacity2;
animation-duration: 1.3s;
transform-origin: bottom;
}
.rocket_wrap:hover #fireSmallRight {
display: block;
animation-delay: 0.3s;
animation-name: fireSmall, fillOpacity3;
animation-duration: 1.6s;
transform-origin: bottom;
}
/*=============================================
[ KeyFrame Animations ]
==============================================*/
#keyframes fireSmall {
10% {
transform: rotate(17deg) translateY(1px)
}
20% {
transform: rotate(-13deg) translateY(2px)
}
30% {
transform: rotate(21deg) translateY(3px)
}
40% {
transform: rotate(-34deg)translateY(4px)
}
50% {
transform: rotate(24deg) translateY(5px)
}
60% {
transform: rotate(-17deg) translateY(6px)
}
70% {
transform: rotate(31deg) translateY(7px)
}
80% {
transform: rotate(-28deg) translateY(8px)
}
90% {
transform: rotate(14deg) translateY(9px)
}
99% {
transform: rotate(0deg) translateY(10px)
}
}
#keyframes fireLeft {
6% {
transform: rotate(25deg)
}
15% {
transform: rotate(-19deg)
}
25% {
transform: rotate(25deg)
}
32% {
transform: rotate(-30deg)
}
46% {
transform: rotate(22deg)
}
54% {
transform: rotate(-29deg)
}
61% {
transform: rotate(32deg)
}
74% {
transform: rotate(-9deg)
}
83% {
transform: rotate(16deg)
}
99% {
transform: rotate(0deg)
}
}
#keyframes fireMiddle {
10% {
transform: rotate(25deg)
}
20% {
transform: rotate(-25deg)
}
30% {
transform: rotate(30deg)
}
40% {
transform: rotate(-22deg)
}
50% {
transform: rotate(29deg)
}
60% {
transform: rotate(-45deg)
}
70% {
transform: rotate(37deg)
}
80% {
transform: rotate(-15deg)
}
90% {
transform: rotate(16deg)
}
99% {
transform: rotate(0deg)
}
}
#keyframes fireRight {
15% {
transform: rotate(17deg)
}
23% {
transform: rotate(-13deg)
}
37% {
transform: rotate(21deg)
}
45% {
transform: rotate(-34deg)
}
54% {
transform: rotate(24deg)
}
67% {
transform: rotate(-17deg)
}
72% {
transform: rotate(31deg)
}
84% {
transform: rotate(-28deg)
}
96% {
transform: rotate(14deg)
}
99% {
transform: rotate(0deg)
}
}
#keyframes fillOpacity1 {
0% {
fill-opacity: 1;
stroke-opacity: 1;
}
50% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
#keyframes fillOpacity2 {
0% {
fill-opacity: 1;
stroke-opacity: 1;
}
25% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
#keyframes fillOpacity3 {
0% {
fill-opacity: 1;
stroke-opacity: 1;
}
67% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
#keyframes rocektMove {
0% {
transform: translateY(0px)
}
100% {
transform: translateY(20px)
}
}
<!-- http://www.pencilscoop.com/2013/11/animate-svg-icons-with-css3-jquery/ -->
<div id="pageWrap">
<svg version="1.1" x="0px" y="0px" width="307px" height="283px" id="rocket">
<g class="rocket_wrap">
<circle cx="147.5" cy="138.6" r="105.5" class="icon_circle"/>
<g class="rocket_inner">
<path class="fire fire_path" id="fireMiddle" d="M148.891,179.906c3.928,0,7.111,3.176,7.111,7.094 c0,7.78-7.111,16-7.111,16s-7.111-8.349-7.111-16C141.78,183.082,144.963,179.906,148.891,179.906z"/>
<path class="fire_path fire" id="fireRight" d="M154.063,181.092c3.577-1.624,7.788-0.048,9.408,3.52 c3.216,7.084,0.139,17.508,0.139,17.508s-9.927-4.662-13.09-11.63C148.9,186.923,150.487,182.715,154.063,181.092z"/>
<path class="fire_path fire" id="fireLeft" d="M143.392,182.519c3.25,2.207,4.098,6.623,1.896,9.864 c-4.372,6.436-14.873,9.238-14.873,9.238s-1.191-10.902,3.108-17.23C135.725,181.149,140.143,180.312,143.392,182.519z"/>
<path class="fire_path fire" id="fireSmallLeft" d="M143.193 187.531c2.226 0.4 3.7 2.6 3.2 4.8 c-0.875 4.407-5.829 8.264-5.829 8.264s-3.09-5.53-2.229-9.865C138.807 188.5 141 187.1 143.2 187.531z"/>
<path class="fire_path fire" id="fireSmallRight" d="M152.089 188.599c2.043-0.985 4.496-0.132 5.5 1.9 c1.952 4 0.3 10.1 0.3 10.107s-5.795-2.56-7.713-6.541C149.186 192 150 189.6 152.1 188.599z"/>
<path class="rocket_bottom" d="M157.069 171.31h-3.292c-1.562-0.048-3.178-0.076-4.846-0.076 s-3.284 0.028-4.846 0.076h-3.292c-7.277-7.938-12.371-26.182-12.371-47.434c0-28.54 9.182-51.676 20.508-51.676 c11.327 0 20.5 23.1 20.5 51.676C169.44 145.1 164.3 163.4 157.1 171.31z"/>
<g id="right_wing_wrap">
<path class="wing_base" d="M166.678 127.161c0 0 17.7 3.3 12.9 48.099l-18.06-14.05 L166.678 127.161z"/>
<path class="wing_shadow" d="M158.225 140.336c10.481-5.584 22.7 22.2 21.4 34.9 l-18.06-14.05C161.542 161.2 156.1 144.3 158.2 140.336z"/>
</g>
<g id="left_wing_wrap">
<path class="wing_base" d="M135.131 161.21l-18.06 14.1 c-4.805-44.793 12.924-48.099 12.924-48.099L135.131 161.21z"/>
<path class="wing_shadow" d="M135.131 161.21l-18.06 14.1 c-1.367-12.746 10.896-40.509 21.377-34.924C140.614 144.3 135.1 161.2 135.1 161.21z"/>
</g>
<g id="rocket_body_wrap">
<path class="rocket_base" d="M162.728 167.358c-3.778-0.623-8.573-0.996-13.796-0.996 s-10.018 0.373-13.795 0.996c-5.033-10.186-8.257-25.808-8.257-43.338c0-30.688 9.873-55.566 22.052-55.566 s22.053 24.9 22.1 55.566C170.984 141.6 167.8 157.2 162.7 167.358z" />
<path class="rocket_shadow" d="M145.464 166.417c19.578-40.575 7.26-85.229 4.112-98.067 c11.88 0.9 21.4 25.4 21.4 55.525c0 17.529-3.225 33.152-8.257 43.337c0 0-3.786-0.472-8.069-0.697 S145.464 166.4 145.5 166.417z"/>
</g>
<g id="large_window_wrap">
<radialgradient id="SVGID_2_" cx="148.9" cy="112.5" r="15.2" fx="139.4853" fy="112.5239" gradientunits="userSpaceOnUse">
<stop offset="0" class="window_grandient"/>
<stop offset="0.5868" class="window_grandient"/>
<stop offset="0.6834" class="window_grandient"/>
<stop offset="0.6845" class="window_grandient1"/>
<stop offset="0.6861" class="window_grandient2"/>
<stop offset="0.6897" class="window_grandient3"/>
</radialgradient>
<circle class="large_window_path" cx="148.9" cy="111.3" r="10.5"/>
</g>
<circle class="small_window_path" cx="148.9" cy="132.4" r="5.2"/>
</g>
</g>
</svg>
</div>
for any suggestion.
You may simply use scale on the most upper g and adjust position by adding a translation if needed:
/*=============================================
[ Page Setup ]
==============================================*/
body {
background: #34495e
}
#pageWrap {
width: 100%;
overflow: hidden;
}
#rocket {
display: block;
margin: 0 auto;
margin-top: 150px;
}
/*=============================================
[ Inactive State Styles ]
==============================================*/
.rocket_inner {
transform: translateY(15px) translateX(-3px);
-webkit-transition: .3s;
-moz-transition: .3s;
transition: .3s;
}
.icon_circle {
transition: .2s;
fill: #22303e;
}
.large_window_path {
transition: .2s;
fill: #22303e;
}
.small_window_path {
fill: #22303e;
}
.wing_shadow {
fill: #34495e;
}
.rocket_bottom {
fill: #34495e
}
.rocket_base {
fill: #34495e
}
.rocket_shadow {
fill: #34495e
}
.window_grandient {
stop-color: #2DCB73
}
.window_grandient1 {
stop-color: #2AC16D
}
.window_grandient2 {
stop-color: #29B968
}
.window_grandient3 {
stop-color: #28B767
}
.wing_base {
fill: #34495e
}
.fire_path {
fill: #FC0
}
/*=============================================
[ Hover Styles ]
==============================================*/
.rocket_wrap:hover .rocket_base {
fill: #FFFFFF !important;
stroke-width: 0px !important;
}
.rocket_wrap:hover .rocket_shadow {
fill: #EDEDED !important;
stroke-width: 0px !important;
}
.rocket_wrap:hover .icon_circle {
fill: #282e3a !important;
stroke: #fff !important;
stroke-width: 7px !important;
}
.rocket_wrap:hover .small_window_path {
fill: #28B767 !important;
stroke-width: 0px !important;
}
.rocket_wrap:hover .wing_shadow {
display: block !important;
fill: #FC9252 !important;
}
.rocket_wrap:hover .wing_base {
fill: #E16E36 !important;
stroke-width: 0px !important;
}
.rocket_wrap:hover .rocket_bottom {
fill: #2DCB73 !important;
stroke-width: 0px !important;
}
.rocket_wrap:hover .large_window_path {
fill: url(#SVGID_2_) !important;
stroke-width: 0px !important;
}
.rocket_wrap:hover .rocket_inner {
transform: translateY(0px) translateX(-3px) !important;
}
/*=============================================
[ Animation Classes ]
==============================================*/
.fire {
display: none;
animation-delay: 0s;
fill-opacity: 1;
animation-timing-function: ease-in;
stroke-width: 0px;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: 50% 50%;
animation-direction: normal;
}
.rocket_wrap:hover #fireLeft {
display: block;
animation-delay: 0s;
animation-name: fireLeft, fillOpacity1;
animation-duration: 1.2s;
}
.rocket_wrap:hover #fireMiddle {
display: block;
animation-delay: 0s;
animation-name: fireMiddle, fillOpacity1;
animation-duration: 1s;
}
.rocket_wrap:hover #fireRight {
display: block;
animation-delay: 0s;
animation-name: fireRight, fillOpacity1;
animation-duration: 1.3s;
}
.rocket_wrap:hover #fireSmallLeft {
display: block;
animation-delay: 0s;
animation-name: fireSmall, fillOpacity2;
animation-duration: 1.3s;
transform-origin: bottom;
}
.rocket_wrap:hover #fireSmallRight {
display: block;
animation-delay: 0.3s;
animation-name: fireSmall, fillOpacity3;
animation-duration: 1.6s;
transform-origin: bottom;
}
/*=============================================
[ KeyFrame Animations ]
==============================================*/
#keyframes fireSmall {
10% {
transform: rotate(17deg) translateY(1px)
}
20% {
transform: rotate(-13deg) translateY(2px)
}
30% {
transform: rotate(21deg) translateY(3px)
}
40% {
transform: rotate(-34deg)translateY(4px)
}
50% {
transform: rotate(24deg) translateY(5px)
}
60% {
transform: rotate(-17deg) translateY(6px)
}
70% {
transform: rotate(31deg) translateY(7px)
}
80% {
transform: rotate(-28deg) translateY(8px)
}
90% {
transform: rotate(14deg) translateY(9px)
}
99% {
transform: rotate(0deg) translateY(10px)
}
}
#keyframes fireLeft {
6% {
transform: rotate(25deg)
}
15% {
transform: rotate(-19deg)
}
25% {
transform: rotate(25deg)
}
32% {
transform: rotate(-30deg)
}
46% {
transform: rotate(22deg)
}
54% {
transform: rotate(-29deg)
}
61% {
transform: rotate(32deg)
}
74% {
transform: rotate(-9deg)
}
83% {
transform: rotate(16deg)
}
99% {
transform: rotate(0deg)
}
}
#keyframes fireMiddle {
10% {
transform: rotate(25deg)
}
20% {
transform: rotate(-25deg)
}
30% {
transform: rotate(30deg)
}
40% {
transform: rotate(-22deg)
}
50% {
transform: rotate(29deg)
}
60% {
transform: rotate(-45deg)
}
70% {
transform: rotate(37deg)
}
80% {
transform: rotate(-15deg)
}
90% {
transform: rotate(16deg)
}
99% {
transform: rotate(0deg)
}
}
#keyframes fireRight {
15% {
transform: rotate(17deg)
}
23% {
transform: rotate(-13deg)
}
37% {
transform: rotate(21deg)
}
45% {
transform: rotate(-34deg)
}
54% {
transform: rotate(24deg)
}
67% {
transform: rotate(-17deg)
}
72% {
transform: rotate(31deg)
}
84% {
transform: rotate(-28deg)
}
96% {
transform: rotate(14deg)
}
99% {
transform: rotate(0deg)
}
}
#keyframes fillOpacity1 {
0% {
fill-opacity: 1;
stroke-opacity: 1;
}
50% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
#keyframes fillOpacity2 {
0% {
fill-opacity: 1;
stroke-opacity: 1;
}
25% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
#keyframes fillOpacity3 {
0% {
fill-opacity: 1;
stroke-opacity: 1;
}
67% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
#keyframes rocektMove {
0% {
transform: translateY(0px)
}
100% {
transform: translateY(20px)
}
}
<!-- http://www.pencilscoop.com/2013/11/animate-svg-icons-with-css3-jquery/ -->
<div id="pageWrap">
<svg version="1.1" x="0px" y="0px" width="307px" height="283px" id="rocket">
<g class="rocket_wrap" transform="scale(0.5)">
<circle cx="147.5" cy="138.6" r="105.5" class="icon_circle"/>
<g class="rocket_inner">
<path class="fire fire_path" id="fireMiddle" d="M148.891,179.906c3.928,0,7.111,3.176,7.111,7.094 c0,7.78-7.111,16-7.111,16s-7.111-8.349-7.111-16C141.78,183.082,144.963,179.906,148.891,179.906z"/>
<path class="fire_path fire" id="fireRight" d="M154.063,181.092c3.577-1.624,7.788-0.048,9.408,3.52 c3.216,7.084,0.139,17.508,0.139,17.508s-9.927-4.662-13.09-11.63C148.9,186.923,150.487,182.715,154.063,181.092z"/>
<path class="fire_path fire" id="fireLeft" d="M143.392,182.519c3.25,2.207,4.098,6.623,1.896,9.864 c-4.372,6.436-14.873,9.238-14.873,9.238s-1.191-10.902,3.108-17.23C135.725,181.149,140.143,180.312,143.392,182.519z"/>
<path class="fire_path fire" id="fireSmallLeft" d="M143.193 187.531c2.226 0.4 3.7 2.6 3.2 4.8 c-0.875 4.407-5.829 8.264-5.829 8.264s-3.09-5.53-2.229-9.865C138.807 188.5 141 187.1 143.2 187.531z"/>
<path class="fire_path fire" id="fireSmallRight" d="M152.089 188.599c2.043-0.985 4.496-0.132 5.5 1.9 c1.952 4 0.3 10.1 0.3 10.107s-5.795-2.56-7.713-6.541C149.186 192 150 189.6 152.1 188.599z"/>
<path class="rocket_bottom" d="M157.069 171.31h-3.292c-1.562-0.048-3.178-0.076-4.846-0.076 s-3.284 0.028-4.846 0.076h-3.292c-7.277-7.938-12.371-26.182-12.371-47.434c0-28.54 9.182-51.676 20.508-51.676 c11.327 0 20.5 23.1 20.5 51.676C169.44 145.1 164.3 163.4 157.1 171.31z"/>
<g id="right_wing_wrap">
<path class="wing_base" d="M166.678 127.161c0 0 17.7 3.3 12.9 48.099l-18.06-14.05 L166.678 127.161z"/>
<path class="wing_shadow" d="M158.225 140.336c10.481-5.584 22.7 22.2 21.4 34.9 l-18.06-14.05C161.542 161.2 156.1 144.3 158.2 140.336z"/>
</g>
<g id="left_wing_wrap">
<path class="wing_base" d="M135.131 161.21l-18.06 14.1 c-4.805-44.793 12.924-48.099 12.924-48.099L135.131 161.21z"/>
<path class="wing_shadow" d="M135.131 161.21l-18.06 14.1 c-1.367-12.746 10.896-40.509 21.377-34.924C140.614 144.3 135.1 161.2 135.1 161.21z"/>
</g>
<g id="rocket_body_wrap">
<path class="rocket_base" d="M162.728 167.358c-3.778-0.623-8.573-0.996-13.796-0.996 s-10.018 0.373-13.795 0.996c-5.033-10.186-8.257-25.808-8.257-43.338c0-30.688 9.873-55.566 22.052-55.566 s22.053 24.9 22.1 55.566C170.984 141.6 167.8 157.2 162.7 167.358z" />
<path class="rocket_shadow" d="M145.464 166.417c19.578-40.575 7.26-85.229 4.112-98.067 c11.88 0.9 21.4 25.4 21.4 55.525c0 17.529-3.225 33.152-8.257 43.337c0 0-3.786-0.472-8.069-0.697 S145.464 166.4 145.5 166.417z"/>
</g>
<g id="large_window_wrap">
<radialgradient id="SVGID_2_" cx="148.9" cy="112.5" r="15.2" fx="139.4853" fy="112.5239" gradientunits="userSpaceOnUse">
<stop offset="0" class="window_grandient"/>
<stop offset="0.5868" class="window_grandient"/>
<stop offset="0.6834" class="window_grandient"/>
<stop offset="0.6845" class="window_grandient1"/>
<stop offset="0.6861" class="window_grandient2"/>
<stop offset="0.6897" class="window_grandient3"/>
</radialgradient>
<circle class="large_window_path" cx="148.9" cy="111.3" r="10.5"/>
</g>
<circle class="small_window_path" cx="148.9" cy="132.4" r="5.2"/>
</g>
</g>
</svg>
</div>
You cannot add style to an SVG <g> element. Its only purpose is to group children. That means, too, that style attributes you give to it are given down to its children, so a fill="green" on the <g> means an automatic fill="green" on its child <rect> (as long as it has no own fill specification).
Your only option is to add a new <rect> to the SVG and place it accordingly to match the <g> children's dimensions.
Related
I'm trying to create a wave animation with 3 layers. The animation as you can see in the snippet, doesn't seem smooth, and it seems like the waves aren't endless. Besides I can't really get to see the waves structure like in the picture.
I would to see the waves without interruption, when it comes to the end of the animation, it is clearly noticeable that the animation has ended.
[![
.w1 {
stroke: none;
fill: #b3696c;
opacity: 55%;
animation: move1 4.5s linear infinite;
}
.w2 {
stroke: none;
fill: #b3696c;
opacity: 35%;
transform: translate3d(0, 0, 0);
animation: move2 4.5s linear infinite;
}
.w3 {
stroke: none;
fill: #cf2127;
opacity: 30%;
transform: translate3d(0, 0, 0);
animation: move3 2s linear infinite;
}
#keyframes move1 {
0% {
transform: translateX(-500px) scaleX(2.5);
}
50% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(0) scaleX(2.5);
}
}
#keyframes move2 {
0% {
transform: translateX(-600px) scaleX(3);
}
50% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(0) scaleX(3);
}
}
#keyframes move3 {
0% {
transform: translateX(-800px) scaleX(4);
}
50% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(0) scaleX(4);
}
}
<div class="waveAnimation">
<svg viewBox="0 0 500 150" preserveAspectRatio="none">
<path
class="w1 waveTop"
d="M-8.74,71.55 C289.78,255.11 349.60,4.47 505.36,34.05 L500.00,150.00 L0.00,150.00 Z"
/>
<path
class="w2 waveMiddle"
d="M-23.42,125.83 C187.63,45.89 299.38,57.73 526.80,123.86 L500.00,150.00 L0.00,150.00 Z"
/>
<path
class="w3 waveBottom"
d="M-23.42,125.83 C172.96,-152.44 217.55,183.06 504.22,55.77 L500.00,150.00 L0.00,150.00 Z"
/>
</svg>
</div>
The wave animations should move smoothly, so instead of using the linear attribute, we use ease-in-out.
.w1 {
stroke: none;
fill: #b3696c;
opacity: 55%;
animation: move1 5s ease-in-out infinite;
}
.w2 {
stroke: none;
fill: #b3696c;
opacity: 35%;
transform: translate3d(0, 0, 0);
animation: move2 4s ease-in-out infinite;
}
.w3 {
stroke: none;
fill: #cf2127;
opacity: 30%;
transform: translate3d(0, 0, 0);
animation: move3 6s ease-in-out infinite;
}
#keyframes move1 {
0% {
transform: translateX(-500px) scaleX(2.5);
}
25% {
transform: translateX(-100) scaleX(2.5);
}
50% {
transform: translateX(0) scaleX(2.5);
}
75% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(-500px) scaleX(2.5);
}
}
#keyframes move2 {
0% {
transform: translateX(-600px) scaleX(3);
}
25% {
transform: translateX(-100) scaleX(2.5);
}
50% {
transform: translateX(0) scaleX(3);
}
75% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(-600px) scaleX(3);
}
}
#keyframes move3 {
0% {
transform: translateX(-800px) scaleX(3);
}
25% {
transform: translateX(-100) scaleX(2.5);
}
50% {
transform: translateX(0) scaleX(3);
}
75% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(-800px) scaleX(3);
}
}
<div class="waveAnimation">
<svg viewBox="0 0 500 150" preserveAspectRatio="none">
<path
class="w1 waveTop"
d="M-8.74,71.55 C289.78,255.11 349.60,4.47 505.36,34.05 L500.00,150.00 L0.00,150.00 Z"
/>
<path
class="w2 waveMiddle"
d="M-23.42,125.83 C187.63,45.89 299.38,57.73 526.80,123.86 L500.00,150.00 L0.00,150.00 Z"
/>
<path
class="w3 waveBottom"
d="M-23.42,125.83 C172.96,-152.44 217.55,183.06 504.22,55.77 L500.00,150.00 L0.00,150.00 Z"
/>
</svg>
</div>
Here is my solution, I hope it helps you.
.w1 {
stroke: none;
fill: #b3696c;
opacity: 55%;
animation: move1 6s linear infinite;
}
.w2 {
stroke: none;
fill: #b3696c;
opacity: 35%;
transform: translate3d(0, 0, 0);
animation: move2 6s linear infinite;
}
.w3 {
stroke: none;
fill: #cf2127;
opacity: 30%;
transform: translate3d(0, 0, 0);
animation: move3 2s linear infinite;
}
#keyframes move1 {
0% {
transform: translateX(-500px) scaleX(2.5);
}
25% {
transform: translateX(-100) scaleX(2.5);
}
50% {
transform: translateX(0) scaleX(2.5);
}
75% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(-500px) scaleX(2.5);
}
}
#keyframes move2 {
0% {
transform: translateX(-600px) scaleX(3);
}
25% {
transform: translateX(-100) scaleX(2.5);
}
50% {
transform: translateX(0) scaleX(3);
}
75% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(-600px) scaleX(3);
}
}
#keyframes move3 {
0% {
transform: translateX(-800px) scaleX(3);
}
25% {
transform: translateX(-100) scaleX(2.5);
}
50% {
transform: translateX(0) scaleX(3);
}
75% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(-800px) scaleX(3);
}
}
<div class="waveAnimation">
<svg viewBox="0 0 500 150" preserveAspectRatio="none">
<path
class="w1 waveTop"
d="M-8.74,71.55 C289.78,255.11 349.60,4.47 505.36,34.05 L500.00,150.00 L0.00,150.00 Z"
/>
<path
class="w2 waveMiddle"
d="M-23.42,125.83 C187.63,45.89 299.38,57.73 526.80,123.86 L500.00,150.00 L0.00,150.00 Z"
/>
<path
class="w3 waveBottom"
d="M-23.42,125.83 C172.96,-152.44 217.55,183.06 504.22,55.77 L500.00,150.00 L0.00,150.00 Z"
/>
</svg>
</div>
I am trying to figure out why this animation on codepen doesn't work
https://codepen.io/cassie-codes/full/zWJxXj/
in which you can find a bubble animation with 2 images. One is a background, the second one is a mask. these random bubbles should move and reveal the mask image. On chrome works, on firefox not. I can't understand if the problem is about the svg properties or something on css. Anyway that's the code
Html:
<div class="bgImage"></div>
<svg class="blobCont">
<image xlink:href="https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-0.3.5&s=e20bc3d490c974d9ea190e05c47962f5&auto=format&fit=crop&w=634&q=80" mask="url(#mask)" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
<mask id="mask" x="0" y="0">
<g style="filter: url(#gooey)">
<circle class="blob" cx="10%" cy="10%" r="80" fill="white" stroke="white"/>
<circle class="blob" cx="50%" cy="10%" r="40" fill="white" stroke="white"/>
<circle class="blob" cx="17%" cy="15%" r="70" fill="white" stroke="white"/>
<circle class="blob" cx="90%" cy="20%" r="120" fill="white" stroke="white"/>
<circle class="blob" cx="30%" cy="25%" r="30" fill="white" stroke="white"/>
<circle class="blob" cx="50%" cy="60%" r="80" fill="white" stroke="white"/>
<circle class="blob" cx="70%" cy="90%" r="10" fill="white" stroke="white"/>
<circle class="blob" cx="90%" cy="60%" r="90" fill="white" stroke="white"/>
<circle class="blob" cx="30%" cy="90%" r="80" fill="white" stroke="white"/>
<circle class="blob" cx="10%" cy="10%" r="80" fill="white" stroke="white"/>
<circle class="blob" cx="50%" cy="10%" r="20" fill="white" stroke="white"/>
<circle class="blob" cx="17%" cy="15%" r="70" fill="white" stroke="white"/>
<circle class="blob" cx="40%" cy="20%" r="120" fill="white" stroke="white"/>
<circle class="blob" cx="30%" cy="25%" r="30" fill="white" stroke="white"/>
<circle class="blob" cx="80%" cy="60%" r="80" fill="white" stroke="white"/>
<circle class="blob" cx="17%" cy="10%" r="100" fill="white" stroke="white"/>
<circle class="blob" cx="40%" cy="60%" r="90" fill="white" stroke="white"/>
<circle class="blob" cx="10%" cy="50%" r="80" fill="white" stroke="white"/>
</g>
</mask>
<filter id="gooey" height="130%">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
</filter>
</svg>
scss:
body , .bgImage {
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.bgImage {
position: absolute;
background-image: url(https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-0.3.5&s=e20bc3d490c974d9ea190e05c47962f5&auto=format&fit=crop&w=634&q=80);
background-size: cover;
background-position: top;
-webkit-filter: grayscale(70%); /* Safari 6.0 - 9.0 */
filter: grayscale(70%);
z-index: -1;
}
.blobCont {
position: absolute;
width: 100vw;
height: 100vh;
}
#for $i from 1 through 18 {
$a : #{$i*90};
$b : #{$i*90+360};
.blob:nth-child(#{$i}) {
animation: move#{$i} 20s infinite linear;
}
#keyframes move#{$i} {
from {
transform:rotate(#{$a}deg) translate( 200px ,0.1px) rotate(-#{$a}deg);
}
to {
transform:rotate(#{$b}deg) translate( 200px ,0.1px) rotate(-#{$b}deg);
}
}
}
and if needs, css compiled from scss
body, .bgImage {
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.bgImage {
position: absolute;
background-image: url(https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-0.3.5&s=e20bc3d490c974d9ea190e05c47962f5&auto=format&fit=crop&w=634&q=80);
background-size: cover;
background-position: top;
-webkit-filter: grayscale(70%);
/* Safari 6.0 - 9.0 */
filter: grayscale(70%);
z-index: -1;
}
.blobCont {
position: absolute;
width: 100vw;
height: 100vh;
}
.blob:nth-child(1) {
animation: move1 20s infinite linear;
}
#keyframes move1 {
from {
transform: rotate(90deg) translate(200px, 0.1px) rotate(-90deg);
}
to {
transform: rotate(450deg) translate(200px, 0.1px) rotate(-450deg);
}
}
.blob:nth-child(2) {
animation: move2 20s infinite linear;
}
#keyframes move2 {
from {
transform: rotate(180deg) translate(200px, 0.1px) rotate(-180deg);
}
to {
transform: rotate(540deg) translate(200px, 0.1px) rotate(-540deg);
}
}
.blob:nth-child(3) {
animation: move3 20s infinite linear;
}
#keyframes move3 {
from {
transform: rotate(270deg) translate(200px, 0.1px) rotate(-270deg);
}
to {
transform: rotate(630deg) translate(200px, 0.1px) rotate(-630deg);
}
}
.blob:nth-child(4) {
animation: move4 20s infinite linear;
}
#keyframes move4 {
from {
transform: rotate(360deg) translate(200px, 0.1px) rotate(-360deg);
}
to {
transform: rotate(720deg) translate(200px, 0.1px) rotate(-720deg);
}
}
.blob:nth-child(5) {
animation: move5 20s infinite linear;
}
#keyframes move5 {
from {
transform: rotate(450deg) translate(200px, 0.1px) rotate(-450deg);
}
to {
transform: rotate(810deg) translate(200px, 0.1px) rotate(-810deg);
}
}
.blob:nth-child(6) {
animation: move6 20s infinite linear;
}
#keyframes move6 {
from {
transform: rotate(540deg) translate(200px, 0.1px) rotate(-540deg);
}
to {
transform: rotate(900deg) translate(200px, 0.1px) rotate(-900deg);
}
}
.blob:nth-child(7) {
animation: move7 20s infinite linear;
}
#keyframes move7 {
from {
transform: rotate(630deg) translate(200px, 0.1px) rotate(-630deg);
}
to {
transform: rotate(990deg) translate(200px, 0.1px) rotate(-990deg);
}
}
.blob:nth-child(8) {
animation: move8 20s infinite linear;
}
#keyframes move8 {
from {
transform: rotate(720deg) translate(200px, 0.1px) rotate(-720deg);
}
to {
transform: rotate(1080deg) translate(200px, 0.1px) rotate(-1080deg);
}
}
.blob:nth-child(9) {
animation: move9 20s infinite linear;
}
#keyframes move9 {
from {
transform: rotate(810deg) translate(200px, 0.1px) rotate(-810deg);
}
to {
transform: rotate(1170deg) translate(200px, 0.1px) rotate(-1170deg);
}
}
.blob:nth-child(10) {
animation: move10 20s infinite linear;
}
#keyframes move10 {
from {
transform: rotate(900deg) translate(200px, 0.1px) rotate(-900deg);
}
to {
transform: rotate(1260deg) translate(200px, 0.1px) rotate(-1260deg);
}
}
.blob:nth-child(11) {
animation: move11 20s infinite linear;
}
#keyframes move11 {
from {
transform: rotate(990deg) translate(200px, 0.1px) rotate(-990deg);
}
to {
transform: rotate(1350deg) translate(200px, 0.1px) rotate(-1350deg);
}
}
.blob:nth-child(12) {
animation: move12 20s infinite linear;
}
#keyframes move12 {
from {
transform: rotate(1080deg) translate(200px, 0.1px) rotate(-1080deg);
}
to {
transform: rotate(1440deg) translate(200px, 0.1px) rotate(-1440deg);
}
}
.blob:nth-child(13) {
animation: move13 20s infinite linear;
}
#keyframes move13 {
from {
transform: rotate(1170deg) translate(200px, 0.1px) rotate(-1170deg);
}
to {
transform: rotate(1530deg) translate(200px, 0.1px) rotate(-1530deg);
}
}
.blob:nth-child(14) {
animation: move14 20s infinite linear;
}
#keyframes move14 {
from {
transform: rotate(1260deg) translate(200px, 0.1px) rotate(-1260deg);
}
to {
transform: rotate(1620deg) translate(200px, 0.1px) rotate(-1620deg);
}
}
.blob:nth-child(15) {
animation: move15 20s infinite linear;
}
#keyframes move15 {
from {
transform: rotate(1350deg) translate(200px, 0.1px) rotate(-1350deg);
}
to {
transform: rotate(1710deg) translate(200px, 0.1px) rotate(-1710deg);
}
}
.blob:nth-child(16) {
animation: move16 20s infinite linear;
}
#keyframes move16 {
from {
transform: rotate(1440deg) translate(200px, 0.1px) rotate(-1440deg);
}
to {
transform: rotate(1800deg) translate(200px, 0.1px) rotate(-1800deg);
}
}
.blob:nth-child(17) {
animation: move17 20s infinite linear;
}
#keyframes move17 {
from {
transform: rotate(1530deg) translate(200px, 0.1px) rotate(-1530deg);
}
to {
transform: rotate(1890deg) translate(200px, 0.1px) rotate(-1890deg);
}
}
.blob:nth-child(18) {
animation: move18 20s infinite linear;
}
#keyframes move18 {
from {
transform: rotate(1620deg) translate(200px, 0.1px) rotate(-1620deg);
}
to {
transform: rotate(1980deg) translate(200px, 0.1px) rotate(-1980deg);
}
}
When I say that it doesn't work, I mean that the bubbles do not move. The animation doesn't work on firefox. But on chrome yes.
From mozilla's developer page regarding CSS transform:
Only elements positioned by the box model can be transformed. As a rule of thumb, an element is positioned by the box model if it has display: block.
Link: https://developer.mozilla.org/en-US/docs/Web/CSS/transform
I want to resize my first SVG circle from here, so I made the second, but there is a problem in the animation, the animation is not the same.
HTML:
<div class="loader">
<svg class="circular">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="8" stroke-miterlimit="10" />
</svg>
</div>
<div style="margin-top: 50px;" class="loader">
<svg class="circular">
<circle class="path" cx="50" cy="50" r="44" fill="none" stroke-width="8" stroke-miterlimit="10" />
</svg>
</div>
CSS:
body, svg, circle {
margin: 0px !important;
padding: 0px !important;
}
.loader {
position: relative;
margin: 0px auto;
padding: 0px;
width: 100px;
height: 100px;
zoom: 1;
background-color: grey;
}
.circular {
-webkit-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
height: 100px;
position: relative;
width: 100px;
}
.path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
#-webkit-keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%, 90% {
stroke: #ffa700;
}
}
#keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%, 90% {
stroke: #ffa700;
}
}
How to properly resize it?
The stroke-dasharray property of the circle element determine the length of the stroke's dash and the space between two dashes whereas the stroke-dashoffset determines the offset at which the stroke's dash starts. Within the #keyframes rules these properties are getting modified and thus ends up producing the animation effect. When the circle's radius (and thus the circumference) is changed, these properties (set within the keyframes) also have to modified in proportion to the radius.
Since the settings depend on the radius of the circle, I don't think you can keep the same animation (#keyframe) settings for both circles. At any time only one of them can work properly.
In the below snippet I have done the changes that are required to make the bigger circle work.
body,
svg,
circle {
margin: 0px !important;
padding: 0px !important;
}
.loader {
position: relative;
margin: 0px auto;
padding: 0px;
width: 100px;
height: 100px;
zoom: 1;
background-color: grey;
}
.circular {
-webkit-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
height: 100px;
position: relative;
width: 100px;
}
.path {
stroke-dasharray: 1, 440;
stroke-dashoffset: 0;
-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes dash {
0% {
stroke-dasharray: 1, 440;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 440;
stroke-dashoffset: -77;
}
100% {
stroke-dasharray: 89, 440;
stroke-dashoffset: -272;
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 440;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 440;
stroke-dashoffset: -77;
}
100% {
stroke-dasharray: 89, 440;
stroke-dashoffset: -272;
}
}
#-webkit-keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
#keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
<div style="margin-top: 50px;" class="loader">
<svg class="circular">
<circle class="path" cx="50" cy="50" r="44" fill="none" stroke-width="8" stroke-miterlimit="10" />
</svg>
</div>
Alternately, if you wish to make the same animation (#keyframe) settings work for both the circles at the same time, then you could consider using a transform: scale to create the bigger circle instead of manually modifying the radius of the circle. (But as you can see, the output is not exactly same as modifying the radius and hence I wouldn't really recommend this).
body,
svg,
circle {
margin: 0px !important;
padding: 0px !important;
}
.loader {
position: relative;
margin: 0px auto;
padding: 0px;
width: 100px;
height: 100px;
zoom: 1;
background-color: grey;
}
.circular {
-webkit-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
height: 100px;
position: relative;
width: 100px;
}
.path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
#-webkit-keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
#keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
.loader2 {
transform: scale(2.2);
}
<div class="loader">
<svg class="circular">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="8" stroke-miterlimit="10" />
</svg>
</div>
<div style="margin-top: 100px;" class="loader loader2">
<svg class="circular">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="8" stroke-miterlimit="10" />
</svg>
</div>
As you will see from the code below I have a lovely circular progress bar however I have a few questions and a little lost on how to achieve this (ideally I don't want to use any JS)
I want to make the pink bar that goes around be curved and not
flat, is this possible? like the edge of it. So instead of it being
| it would be a little like ) at the start and end.
The throbbing circle in the middle, is it possible for it to pause
for like 1 second once animation is complete before it starts
again?
/* Load Progress Animation */
#-webkit-keyframes load {
0% {
stroke-dashoffset: 0
}
}
#-moz-keyframes load {
0% {
stroke-dashoffset: 0
}
}
#keyframes load {
0% {
stroke-dashoffset: 0
}
}
/* Qik Progress Container */
.progress {
position: relative;
display: inline-block;
padding: 0;
text-align: center;
}
/* Item SVG */
.progress svg {
width: 4rem;
height: 4rem;
}
.progress svg:nth-child(2) {
position: absolute;
left: 0;
top: 0;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
.progress svg:nth-child(2) path {
fill: none;
stroke-width: 20;
stroke-dasharray: 629;
stroke: rgba(60, 99, 121, 0.9);
-webkit-animation: load 8s;
-moz-animation: load 8s;
-o-animation: load 8s;
animation: load 8s;
}
.pulse {
border-radius: 50%;
width: 18px;
height: 18px;
background: #ff1251;
position: absolute;
top: 1.45rem;
left: 1.45rem;
-webkit-animation: pulse 0.6s linear infinite;
-moz-animation: pulse 0.6s linear infinite;
-ms-animation: pulse 0.6s linear infinite;
animation: pulse 0.6s linear infinite;
}
#keyframes "pulse" {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
#-moz-keyframes pulse {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
#-webkit-keyframes "pulse" {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-ms-keyframes "pulse" {
0% {
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-ms-transform: scale(1);
transform: scale(1);
}
}
<div class="progress">
<svg viewBox="-10 -10 220 220">
<g fill="none" stroke-width="20" transform="translate(100,100)">
<path d="M-100,0a100,100 0 1,0 200,0a100,100 0 1,0 -200,0" stroke="#FF1252" stroke-linejoin="round" />
</g>
</svg>
<svg viewBox="-10 -10 220 220">
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="629"></path>
</svg>
<div class="pulse"></div>
</div>
I've re-written the entire code.
For your first question, you could simply use stroke-linecap="round".
For the second one, you will have to add an extra #keyframes rule for the delay.
body {
background: #072237;
}
h3 {
color: #ffffff;
}
#loader {
position: relative;
width: 80px;
height: 80px;
}
#ring {
-webkit-animation: load 6s 1 forwards;
animation: load 6s 1 forwards;
}
#circle {
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
background: #FF1251;
border-radius: 50%;
transform: scale(0.8);
-webkit-animation: pulse 1.2s 3;
animation: pulse 1.2s 3;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#-webkit-keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
#keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
#-webkit-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
<div id="loader">
<svg height="80" width="80" viewBox="-10 -10 220 220">
<path id="back" d="M0,100 a100,100 0 1 0 200,0 a100,100 0 1 0 -200,0" fill="#FFFFFF" stroke="#034870" stroke-width="20" stroke-linecap="round" />
<path id="ring" d="M100,0 a100,100 0 0 1 0,200 a100,100 0 0 1 0,-200,0" fill="none" stroke="#FF1251" stroke-width="20" stroke-dasharray="629" stroke-linecap="round" stroke-dashoffset="629" />
</svg>
<div id="circle"></div>
</div>
No. 1. is possible using stroke-linecap, but it requires some changes to your code, becasue in your case the red line is actually a background and the gray the stroke - so it would result in a concave circle, so "(", not ")" at the end of the red line. 2. can be done using longer animation set to alternate so it "sleeps" between 50% and 100% and back. I've made some changes:
http://jsfiddle.net/3yq3kmo1/
Changes in SVG (the second element):
<svg viewBox="-10 -10 220 220">
<circle r="100" cx="100" cy="100" stroke-dashoffset="0" />
</svg>
CSS (note that the dashoffset has been reversed, so now a red stroke grows and hides the gray, instead of red shrinking and revealing the gray; the stroke on path in first SVG element is gray now.)
.progress svg:nth-child(2) circle {
fill: none;
stroke-width: 20;
stroke-dasharray: 629;
stroke: #ff1251;
stroke-linecap:round;
animation: load 8s;
}
The pause in animation:
.pulse {
animation: pulse 1.6s linear infinite alternate;
}
#keyframes pulse {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
I came across this super cool demo of a SVG rocket getting ready to blast off.
http://jsfiddle.net/timrpeterson/4FMyA/22/
first line of the JSFiddle:
<svg version="1.1" x="0px" y="0px" width="307px" height="283px" id="rocket">
I know the point of SVG is to be "scalable" but I just realized I have no idea how this is done. I'd like to shrink the entire rocket and circle surrounding it by 75%, but it looks like everything has defined dimensions.
Is there a simple way to shrink everything the same amount or do I have to manually scale each value?
I would make it like this:
Remove width and height from the svg, add a viewbox with the width/height attributes, add an preserveAspectRatio attribute with "xMinYMin meet" value and then absolute position the svg inside a relative positioned div with width: 100% and max-width that you want the element to be. The last part is the padding-bottom value that serves us as the aspect ratio when we resize the svg element. Long story short this is it.
Change the max-width value of .svg-container to see the svg scale :) Working demo: http://jsfiddle.net/timrpeterson/4FMyA/26/
/*=============================================
[ Page Setup ]
==============================================*/
body {
background: #34495e
}
#pageWrap {
width: 100%;
overflow: hidden;
}
.svg-container {
display: block;
position: relative;
width: 100%;
vertical-align: middle;
overflow: hidden;
max-width: 100px;
margin: 0 auto;
padding-bottom: 64%;
}
#rocket {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
/*=============================================
[ Inactive State Styles ]
==============================================*/
.rocket_inner {
transform: translateY(15px) translateX(-3px);
-webkit-transition: .3s;
-moz-transition: .3s;
transition: .3s;
}
.icon_circle {
transition: .2s;
fill: #22303e;
}
.large_window_path {
transition: .2s;
fill: #22303e;
}
.small_window_path {
fill: #22303e;
}
.wing_shadow {
fill: #34495e;
}
.rocket_bottom {
fill: #34495e
}
.rocket_base {
fill: #34495e
}
.rocket_shadow {
fill: #34495e
}
.window_grandient {
stop-color: #2DCB73
}
.window_grandient1 {
stop-color: #2AC16D
}
.window_grandient2 {
stop-color: #29B968
}
.window_grandient3 {
stop-color: #28B767
}
.wing_base {
fill: #34495e
}
.fire_path {
fill: #FC0
}
/*=============================================
[ Hover Styles ]
==============================================*/
.rocket_wrap:hover .rocket_base {
fill: #FFFFFF !important;
stroke-width: 0px !important;
}
.rocket_wrap:hover .rocket_shadow {
fill: #EDEDED !important;
stroke-width: 0px !important;
}
.rocket_wrap:hover .icon_circle {
fill: #282e3a !important;
stroke: #fff !important;
stroke-width: 7px !important;
}
.rocket_wrap:hover .small_window_path {
fill: #28B767 !important;
stroke-width: 0px !important;
}
.rocket_wrap:hover .wing_shadow {
display: block !important;
fill: #FC9252 !important;
}
.rocket_wrap:hover .wing_base {
fill: #E16E36 !important;
stroke-width: 0px !important;
}
.rocket_wrap:hover .rocket_bottom {
fill: #2DCB73 !important;
stroke-width: 0px !important;
}
.rocket_wrap:hover .large_window_path {
fill: url(#SVGID_2_) !important;
stroke-width: 0px !important;
}
.rocket_wrap:hover .rocket_inner {
transform: translateY(0px) translateX(-3px) !important;
}
/*=============================================
[ Animation Classes ]
==============================================*/
.fire {
display: none;
animation-delay: 0s;
fill-opacity: 1;
animation-timing-function: ease-in;
stroke-width: 0px;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: 50% 50%;
animation-direction: normal;
}
.rocket_wrap:hover #fireLeft {
display: block;
animation-delay: 0s;
animation-name: fireLeft, fillOpacity1;
animation-duration: 1.2s;
}
.rocket_wrap:hover #fireMiddle {
display: block;
animation-delay: 0s;
animation-name: fireMiddle, fillOpacity1;
animation-duration: 1s;
}
.rocket_wrap:hover #fireRight {
display: block;
animation-delay: 0s;
animation-name: fireRight, fillOpacity1;
animation-duration: 1.3s;
}
.rocket_wrap:hover #fireSmallLeft {
display: block;
animation-delay: 0s;
animation-name: fireSmall, fillOpacity2;
animation-duration: 1.3s;
transform-origin: bottom;
}
.rocket_wrap:hover #fireSmallRight {
display: block;
animation-delay: 0.3s;
animation-name: fireSmall, fillOpacity3;
animation-duration: 1.6s;
transform-origin: bottom;
}
/*=============================================
[ KeyFrame Animations ]
==============================================*/
#keyframes fireSmall {
10% {
transform: rotate(17deg) translateY(1px)
}
20% {
transform: rotate(-13deg) translateY(2px)
}
30% {
transform: rotate(21deg) translateY(3px)
}
40% {
transform: rotate(-34deg)translateY(4px)
}
50% {
transform: rotate(24deg) translateY(5px)
}
60% {
transform: rotate(-17deg) translateY(6px)
}
70% {
transform: rotate(31deg) translateY(7px)
}
80% {
transform: rotate(-28deg) translateY(8px)
}
90% {
transform: rotate(14deg) translateY(9px)
}
99% {
transform: rotate(0deg) translateY(10px)
}
}
#keyframes fireLeft {
6% {
transform: rotate(25deg)
}
15% {
transform: rotate(-19deg)
}
25% {
transform: rotate(25deg)
}
32% {
transform: rotate(-30deg)
}
46% {
transform: rotate(22deg)
}
54% {
transform: rotate(-29deg)
}
61% {
transform: rotate(32deg)
}
74% {
transform: rotate(-9deg)
}
83% {
transform: rotate(16deg)
}
99% {
transform: rotate(0deg)
}
}
#keyframes fireMiddle {
10% {
transform: rotate(25deg)
}
20% {
transform: rotate(-25deg)
}
30% {
transform: rotate(30deg)
}
40% {
transform: rotate(-22deg)
}
50% {
transform: rotate(29deg)
}
60% {
transform: rotate(-45deg)
}
70% {
transform: rotate(37deg)
}
80% {
transform: rotate(-15deg)
}
90% {
transform: rotate(16deg)
}
99% {
transform: rotate(0deg)
}
}
#keyframes fireRight {
15% {
transform: rotate(17deg)
}
23% {
transform: rotate(-13deg)
}
37% {
transform: rotate(21deg)
}
45% {
transform: rotate(-34deg)
}
54% {
transform: rotate(24deg)
}
67% {
transform: rotate(-17deg)
}
72% {
transform: rotate(31deg)
}
84% {
transform: rotate(-28deg)
}
96% {
transform: rotate(14deg)
}
99% {
transform: rotate(0deg)
}
}
#keyframes fillOpacity1 {
0% {
fill-opacity: 1;
stroke-opacity: 1;
}
50% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
#keyframes fillOpacity2 {
0% {
fill-opacity: 1;
stroke-opacity: 1;
}
25% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
#keyframes fillOpacity3 {
0% {
fill-opacity: 1;
stroke-opacity: 1;
}
67% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
#keyframes rocektMove {
0% {
transform: translateY(0px)
}
100% {
transform: translateY(20px)
}
}
<!-- http://www.pencilscoop.com/2013/11/animate-svg-icons-with-css3-jquery/ -->
<div id="pageWrap">
<div class="svg-container">
<svg version="1.1" x="0px" y="0px" viewBox="0 0 307 283" preserveAspectRatio="xMinYMin meet" id="rocket">
<g class="rocket_wrap">
<circle cx="147.5" cy="138.6" r="105.5" class="icon_circle" />
<g class="rocket_inner">
<path class="fire fire_path" id="fireMiddle" d="M148.891,179.906c3.928,0,7.111,3.176,7.111,7.094 c0,7.78-7.111,16-7.111,16s-7.111-8.349-7.111-16C141.78,183.082,144.963,179.906,148.891,179.906z" />
<path class="fire_path fire" id="fireRight" d="M154.063,181.092c3.577-1.624,7.788-0.048,9.408,3.52 c3.216,7.084,0.139,17.508,0.139,17.508s-9.927-4.662-13.09-11.63C148.9,186.923,150.487,182.715,154.063,181.092z" />
<path class="fire_path fire" id="fireLeft" d="M143.392,182.519c3.25,2.207,4.098,6.623,1.896,9.864 c-4.372,6.436-14.873,9.238-14.873,9.238s-1.191-10.902,3.108-17.23C135.725,181.149,140.143,180.312,143.392,182.519z" />
<path class="fire_path fire" id="fireSmallLeft" d="M143.193 187.531c2.226 0.4 3.7 2.6 3.2 4.8 c-0.875 4.407-5.829 8.264-5.829 8.264s-3.09-5.53-2.229-9.865C138.807 188.5 141 187.1 143.2 187.531z" />
<path class="fire_path fire" id="fireSmallRight" d="M152.089 188.599c2.043-0.985 4.496-0.132 5.5 1.9 c1.952 4 0.3 10.1 0.3 10.107s-5.795-2.56-7.713-6.541C149.186 192 150 189.6 152.1 188.599z" />
<path class="rocket_bottom" d="M157.069 171.31h-3.292c-1.562-0.048-3.178-0.076-4.846-0.076 s-3.284 0.028-4.846 0.076h-3.292c-7.277-7.938-12.371-26.182-12.371-47.434c0-28.54 9.182-51.676 20.508-51.676 c11.327 0 20.5 23.1 20.5 51.676C169.44 145.1 164.3 163.4 157.1 171.31z"
/>
<g id="right_wing_wrap">
<path class="wing_base" d="M166.678 127.161c0 0 17.7 3.3 12.9 48.099l-18.06-14.05 L166.678 127.161z" />
<path class="wing_shadow" d="M158.225 140.336c10.481-5.584 22.7 22.2 21.4 34.9 l-18.06-14.05C161.542 161.2 156.1 144.3 158.2 140.336z" />
</g>
<g id="left_wing_wrap">
<path class="wing_base" d="M135.131 161.21l-18.06 14.1 c-4.805-44.793 12.924-48.099 12.924-48.099L135.131 161.21z" />
<path class="wing_shadow" d="M135.131 161.21l-18.06 14.1 c-1.367-12.746 10.896-40.509 21.377-34.924C140.614 144.3 135.1 161.2 135.1 161.21z" />
</g>
<g id="rocket_body_wrap">
<path class="rocket_base" d="M162.728 167.358c-3.778-0.623-8.573-0.996-13.796-0.996 s-10.018 0.373-13.795 0.996c-5.033-10.186-8.257-25.808-8.257-43.338c0-30.688 9.873-55.566 22.052-55.566 s22.053 24.9 22.1 55.566C170.984 141.6 167.8 157.2 162.7 167.358z"
/>
<path class="rocket_shadow" d="M145.464 166.417c19.578-40.575 7.26-85.229 4.112-98.067 c11.88 0.9 21.4 25.4 21.4 55.525c0 17.529-3.225 33.152-8.257 43.337c0 0-3.786-0.472-8.069-0.697 S145.464 166.4 145.5 166.417z" />
</g>
<g id="large_window_wrap">
<radialgradient id="SVGID_2_" cx="148.9" cy="112.5" r="15.2" fx="139.4853" fy="112.5239" gradientunits="userSpaceOnUse">
<stop offset="0" class="window_grandient" />
<stop offset="0.5868" class="window_grandient" />
<stop offset="0.6834" class="window_grandient" />
<stop offset="0.6845" class="window_grandient1" />
<stop offset="0.6861" class="window_grandient2" />
<stop offset="0.6897" class="window_grandient3" />
</radialgradient>
<circle class="large_window_path" cx="148.9" cy="111.3" r="10.5" />
</g>
<circle class="small_window_path" cx="148.9" cy="132.4" r="5.2" />
</g>
</g>
</svg>
</div>
</div>