"I love SVG Artista - SVG Drawing Animation Generator"
www.svgartista.net VS www.gqak.com
2022-05-08 07:54:51
You need to enable JavaScript to run this app.SVG ArtistaPlayGet CodeCloseOpen SVGPaste Markupelement class:background color:animation type:TransitionAnimationStroke Animationanimation duration:stagger step:animation delay:animation easing:easelineareaseIneaseOuteaseInOuteaseInQuadeaseInCubiceaseInQuarteaseInQuinteaseInSineeaseInExpoeaseInCirceaseInBackeaseOutQuadeaseOutCubiceaseOutQuarteaseOutQuinteaseOutSineeaseOutExpoeaseOutCirceaseOutBackeaseInOutQuadeaseInOutCubiceaseInOutQuarteaseInOutQuinteaseInOutSineeaseInOutExpoeaseInOutCirceaseInOutBackanimation direction:normalreverseFill Animationanimation duration:stagger step:animation delay:animation easing:easelineareaseIneaseOuteaseInOuteaseInQuadeaseInCubiceaseInQuarteaseInQuinteaseInSineeaseInExpoeaseInCirceaseInBackeaseOutQuadeaseOutCubiceaseOutQuarteaseOutQuinteaseOutSineeaseOutExpoeaseOutCirceaseOutBackeaseInOutQuadeaseInOutCubiceaseInOutQuarteaseInOutQuinteaseInOutSineeaseInOutExpoeaseInOutCirceaseInOutBackApplyPaste your SVG markup hereApplySVG Code Copy SVGTransition Code/*************************************************** * Generated by SVG Artista on 4/10/2021, 12:35:25 PM * MIT license (https://opensource.org/licenses/MIT) * W. https://svgartista.net **************************************************/svg .svg-elem-1 { stroke-dashoffset: 672.049560546875px; stroke-dasharray: 672.049560546875px; fill: transparent; -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s; transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;}svg.active .svg-elem-1 { stroke-dashoffset: 0; fill: rgb(0, 204, 174);}svg .svg-elem-2 { stroke-dashoffset: 248.2175750732422px; stroke-dasharray: 248.2175750732422px; fill: transparent; -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s; transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;}svg.active .svg-elem-2 { stroke-dashoffset: 0; fill: rgb(29, 27, 29);}svg .svg-elem-3 { stroke-dashoffset: 217.32936096191406px; stroke-dasharray: 217.32936096191406px; fill: transparent; -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s; transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;}svg.active .svg-elem-3 { stroke-dashoffset: 0; fill: rgb(29, 27, 29);}svg .svg-elem-4 { stroke-dashoffset: 258.3160705566406px; stroke-dasharray: 258.3160705566406px; fill: transparent; -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s; transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;}svg.active .svg-elem-4 { stroke-dashoffset: 0; fill: rgb(29, 27, 29);}svg .svg-elem-5 { stroke-dashoffset: 255.83644104003906px; stroke-dasharray: 255.83644104003906px; fill: transparent; -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s; transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;}svg.active .svg-elem-5 { stroke-dashoffset: 0; fill: rgb(29, 27, 29);}svg .svg-elem-6 { stroke-dashoffset: 287.2906494140625px; stroke-dasharray: 287.2906494140625px; fill: transparent; -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s; transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;}svg.active .svg-elem-6 { stroke-dashoffset: 0; fill: rgb(29, 27, 29);}svg .svg-elem-7 { stroke-dashoffset: 179.39129638671875px; stroke-dasharray: 179.39129638671875px; fill: transparent; -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s; transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;}svg.active .svg-elem-7 { stroke-dashoffset: 0; fill: rgb(29, 27, 29);}svg .svg-elem-8 { stroke-dashoffset: 113.3043212890625px; stroke-dasharray: 113.3043212890625px; fill: transparent; -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s; transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;}svg.active .svg-elem-8 { stroke-dashoffset: 0; fill: rgb(29, 27, 29);}svg .svg-elem-9 { stroke-dashoffset: 248.21778869628906px; stroke-dasharray: 248.21778869628906px; fill: transparent; -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s; transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;}svg.active .svg-elem-9 { stroke-dashoffset: 0; fill: rgb(29, 27, 29);}svg .svg-elem-10 { stroke-dashoffset: 179.39132690429688px; stroke-dasharray: 179.39132690429688px; fill: transparent; -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s; transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;}svg.active .svg-elem-10 { stroke-dashoffset: 0; fill: rgb(29, 27, 29);}svg .svg-elem-11 { stroke-dashoffset: 255.83651733398438px; stroke-dasharray: 255.83651733398438px; fill: transparent; -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s; transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;}svg.active .svg-elem-11 { stroke-dashoffset: 0; fill: rgb(29, 27, 29);}AutoprefixerMinifyCopy Transition codebySergej Skrjanec&Ana Travas ©2019AboutHow toSupport usShare theHomeAboutHow toSupport usShare theClose
