SVG Animation Fun
These were just some Codepens I messed with for fun. The rendering/timing isn’t perfect for either of these, but I just love working with SVG’s and web animations so I messed around with the good old stroke-dasharray technique mixed with some keyframe animation to animate these stroke paths. I know when I was first getting started I was always curious how these types of animations were made so I thought I’d share the code for those of you who are also curious.
More to come!
Animation 1
(refresh to see it again)
check out the code
☟☟☟
html/svg
(SVG code generated/exported from Adobe Illustrator CC)
<div class="svg-wrapper"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="250px" viewBox="0 0 500 250" enable-background="new 0 0 500 250" xml:space="preserve"> <g id="bg"> <rect y="-0.432" stroke-width="3" stroke-miterlimit="10" width="500" height="250.201" /> </g> <g id="lines_1_"> <line stroke-width="3" stroke-miterlimit="10" x1="-1.952" y1="250" x2="248.048" y2="0" /> <line stroke-width="3" stroke-miterlimit="10" x1="500" y1="0" x2="249.98" y2="250.021" /> <line stroke-width="3" stroke-miterlimit="10" x1="250" y1="125" x2="375.432" y2="-0.432" /> <line stroke-width="3" stroke-miterlimit="10" x1="250" y1="125" x2="125.231" y2="249.769" /> </g> <g id="title"> <g> <path d="M100.036,112.819l1.084-11.382h-0.542l-4.12,10.407l-19.729,34.255h-2.71l-20.921-34.363l-3.903-10.298h-0.542 l1.518,11.274v51.058h-8.455V87.887h6.721l23.74,38.808l3.578,8.456h0.217l3.36-8.673l22.656-38.591h7.046v75.882h-8.997V112.819z " /> <path d="M129.52,87.887h8.998v75.882h-8.998V87.887z" /> <path d="M172.662,114.12l-5.854-10.949h-0.434l1.084,10.949v49.648h-8.455V86.694h4.77l36.315,50.624l5.637,10.406h0.542 l-1.192-10.406V87.887h8.455v77.074h-4.77L172.662,114.12z" /> <path d="M234.016,87.887h8.998v75.882h-8.998V87.887z" /> <path d="M321.821,112.819l1.084-11.382h-0.542l-4.119,10.407l-19.729,34.255h-2.71l-20.922-34.363l-3.902-10.298h-0.542 l1.518,11.274v51.058H263.5V87.887h6.722l23.74,38.808l3.577,8.456h0.217l3.36-8.673l22.656-38.591h7.046v75.882h-8.997V112.819z" /> <path d="M385.274,142.738h-27.829l-7.55,21.03h-8.997l28.727-77.074h4.119l28.836,77.074h-9.54L385.274,142.738z M360.358,134.934 h22.22l-8.413-23.09l-2.697-11.491h-0.108l-2.696,11.708L360.358,134.934z" /> <path d="M457.539,163.769H412.66V87.887h8.998v67.86h35.881V163.769z" /> </g> </g> </svg> </div>
css
.svg-wrapper { background: #313131; display: block; margin: 0 auto; padding: 50px; width: 500px; } .svg-wrapper svg rect { fill: none; stroke: #fafafa; stroke-width: 8px; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: 8s rect-outline forwards; } .svg-wrapper svg line { stroke: #fafafa; stroke-dasharray: 350; stroke-dashoffset: 350; animation: 4s line forwards; } .svg-wrapper svg path { fill: #fafafa; opacity: 0; animation: 2s fade forwards; animation-delay: 3s; } @keyframes rect-outline { from { stroke-dashoffset: 1500; } to { stroke-dashoffset: 0; } } @keyframes line { from { stroke-dashoffset: 400; } to { stroke-dashoffset: -275; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
Animation 2
check out the code
☟☟☟
HTML/svg
(SVG code generated/exported from Adobe Illustrator CC)
<div class="svg-wrapper"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" style="enable-background:new 0 0 250 250;" xml:space="preserve"> <g id="background"> <circle stroke-miterlimit="10" cx="125" cy="125" r="121.837" /> </g> <g id="title"> <g> <path d="M54.45,85.62L64.41,85c0.22,1.62,0.65,2.85,1.32,3.7c1.08,1.37,2.62,2.06,4.62,2.06c1.49,0,2.65-0.35,3.45-1.05 s1.21-1.51,1.21-2.44c0-0.88-0.39-1.66-1.15-2.36c-0.77-0.69-2.56-1.35-5.36-1.96c-4.59-1.03-7.86-2.4-9.82-4.11 c-1.97-1.71-2.96-3.89-2.96-6.54c0-1.74,0.5-3.38,1.51-4.93c1.01-1.55,2.53-2.76,4.55-3.65c2.03-0.89,4.8-1.33,8.33-1.33 c4.33,0,7.63,0.8,9.9,2.41c2.27,1.61,3.62,4.17,4.05,7.68l-9.86,0.58c-0.26-1.52-0.81-2.63-1.65-3.33c-0.84-0.69-2-1.04-3.48-1.04 c-1.22,0-2.13,0.26-2.75,0.77c-0.62,0.52-0.92,1.14-0.92,1.88c0,0.54,0.25,1.02,0.76,1.46c0.49,0.45,1.66,0.86,3.51,1.25 c4.57,0.99,7.85,1.98,9.83,2.99c1.98,1.01,3.42,2.26,4.32,3.75c0.9,1.49,1.35,3.17,1.35,5.01c0,2.17-0.6,4.17-1.8,6.01 c-1.2,1.83-2.88,3.22-5.04,4.17s-4.87,1.42-8.15,1.42c-5.76,0-9.75-1.11-11.97-3.33S54.74,89.04,54.45,85.62z" /> <path d="M87.12,62.96h10.94l7.62,24.37l7.53-24.37h10.62l-12.58,33.87H99.91L87.12,62.96z" /> <path d="M142.65,84.56v-7.05h16.17v14.44c-3.1,2.11-5.83,3.55-8.21,4.31c-2.38,0.76-5.2,1.14-8.47,1.14 c-4.02,0-7.3-0.69-9.83-2.06c-2.53-1.37-4.5-3.41-5.89-6.12c-1.39-2.71-2.09-5.82-2.09-9.33c0-3.7,0.76-6.91,2.29-9.65 c1.52-2.73,3.76-4.81,6.7-6.23c2.29-1.09,5.38-1.64,9.26-1.64c3.74,0,6.54,0.34,8.4,1.02c1.86,0.68,3.39,1.73,4.62,3.15 c1.22,1.42,2.14,3.23,2.76,5.42l-10.1,1.8c-0.42-1.28-1.12-2.26-2.12-2.93c-0.99-0.68-2.26-1.02-3.8-1.02 c-2.29,0-4.12,0.8-5.49,2.39c-1.36,1.59-2.04,4.12-2.04,7.57c0,3.67,0.69,6.28,2.07,7.85c1.38,1.57,3.3,2.36,5.76,2.36 c1.17,0,2.29-0.17,3.35-0.51c1.06-0.34,2.28-0.92,3.65-1.73v-3.19H142.65z" /> <path d="M163.21,85.62l9.96-0.62c0.21,1.62,0.65,2.85,1.32,3.7c1.08,1.37,2.62,2.06,4.62,2.06c1.49,0,2.65-0.35,3.45-1.05 s1.21-1.51,1.21-2.44c0-0.88-0.38-1.66-1.16-2.36c-0.77-0.69-2.56-1.35-5.36-1.96c-4.59-1.03-7.86-2.4-9.82-4.11 c-1.97-1.71-2.96-3.89-2.96-6.54c0-1.74,0.5-3.38,1.51-4.93s2.53-2.76,4.55-3.65c2.02-0.89,4.8-1.33,8.33-1.33 c4.33,0,7.63,0.8,9.9,2.41c2.27,1.61,3.62,4.17,4.05,7.68l-9.87,0.58c-0.26-1.52-0.81-2.63-1.65-3.33c-0.84-0.69-2-1.04-3.48-1.04 c-1.22,0-2.13,0.26-2.75,0.77c-0.62,0.52-0.92,1.14-0.92,1.88c0,0.54,0.25,1.02,0.76,1.46c0.49,0.45,1.66,0.86,3.51,1.25 c4.57,0.99,7.85,1.98,9.83,2.99c1.98,1.01,3.42,2.26,4.32,3.75c0.9,1.49,1.35,3.17,1.35,5.01c0,2.17-0.6,4.17-1.8,6.01 c-1.2,1.83-2.88,3.22-5.04,4.17c-2.16,0.95-4.88,1.42-8.16,1.42c-5.76,0-9.75-1.11-11.97-3.33S163.51,89.04,163.21,85.62z" /> <path d="M94.68,136.23H82.79l-1.65,5.59H70.46l12.73-33.87H94.6l12.73,33.87H96.37L94.68,136.23z M92.51,128.91l-3.74-12.17 l-3.7,12.17H92.51z" /> <path d="M110.79,141.82v-33.87h17.44c3.23,0,5.71,0.28,7.42,0.83c1.71,0.55,3.09,1.58,4.14,3.08c1.05,1.5,1.57,3.33,1.57,5.49 c0,1.88-0.4,3.5-1.2,4.86c-0.8,1.36-1.9,2.47-3.3,3.31c-0.89,0.54-2.12,0.99-3.68,1.34c1.25,0.42,2.15,0.83,2.72,1.25 c0.38,0.28,0.94,0.87,1.67,1.78s1.22,1.61,1.47,2.1l5.07,9.81h-11.82l-5.59-10.35c-0.71-1.34-1.34-2.21-1.89-2.61 c-0.75-0.52-1.61-0.79-2.56-0.79h-0.92v13.75H110.79z M121.31,121.68h4.41c0.48,0,1.4-0.15,2.77-0.46 c0.69-0.14,1.26-0.49,1.7-1.06s0.66-1.22,0.66-1.96c0-1.09-0.35-1.93-1.04-2.52c-0.69-0.58-2-0.88-3.9-0.88h-4.6V121.68z" /> <path d="M147.44,107.96h28.05v7.23h-17.56v5.38h16.29v6.91h-16.29v6.68h18.07v7.67h-28.55V107.96z" /> <path d="M55.6,152.96h15.55c3.06,0,5.54,0.42,7.43,1.25c1.89,0.83,3.45,2.03,4.68,3.58c1.23,1.56,2.13,3.37,2.68,5.43 c0.55,2.06,0.83,4.25,0.83,6.56c0,3.62-0.41,6.43-1.24,8.42c-0.82,2-1.97,3.67-3.43,5.01s-3.03,2.24-4.71,2.69 c-2.29,0.62-4.37,0.92-6.24,0.92H55.6V152.96z M66.07,160.63v18.5h2.56c2.19,0,3.74-0.24,4.67-0.73s1.65-1.33,2.17-2.54 s0.79-3.17,0.79-5.88c0-3.59-0.59-6.04-1.76-7.37s-3.11-1.99-5.82-1.99H66.07z" /> <path d="M90.95,169.91c0-5.53,1.54-9.83,4.62-12.91c3.08-3.08,7.37-4.62,12.87-4.62c5.64,0,9.98,1.51,13.03,4.54 c3.05,3.03,4.57,7.27,4.57,12.72c0,3.96-0.67,7.21-2,9.74c-1.33,2.53-3.26,4.5-5.78,5.91s-5.66,2.11-9.41,2.11 c-3.82,0-6.98-0.61-9.48-1.82c-2.5-1.22-4.53-3.14-6.09-5.78C91.73,177.17,90.95,173.87,90.95,169.91z M101.42,169.96 c0,3.42,0.64,5.88,1.91,7.37c1.27,1.49,3,2.24,5.19,2.24c2.25,0,3.99-0.73,5.22-2.2c1.23-1.46,1.85-4.09,1.85-7.88 c0-3.19-0.64-5.52-1.93-6.99c-1.29-1.47-3.03-2.21-5.23-2.21c-2.11,0-3.8,0.75-5.08,2.24S101.42,166.51,101.42,169.96z" /> <path d="M131.63,152.96h17.4c3.79,0,6.63,0.9,8.51,2.7s2.83,4.37,2.83,7.69c0,3.42-1.03,6.09-3.08,8.02 c-2.06,1.92-5.19,2.89-9.41,2.89h-5.73v12.57h-10.51V152.96z M142.14,167.4h2.56c2.02,0,3.43-0.35,4.25-1.05 c0.82-0.7,1.22-1.6,1.22-2.69c0-1.06-0.35-1.96-1.06-2.7c-0.71-0.74-2.04-1.11-4-1.11h-2.98V167.4z" /> <path d="M165.83,152.96h28.05v7.23h-17.56v5.38h16.29v6.91h-16.29v6.68h18.07v7.67h-28.55V152.96z" /> </g> </g> </svg> </div>
css
.svg-wrapper { background: #333; display: block; max-width: 300px; margin: 0 auto; } svg circle { fill: none; stroke: #fafafa; stroke-width: 1.5px; stroke-dasharray: 800; stroke-dashoffset: 800; animation: 8s circle-outline infinite forwards; opacity: 0; } svg path { fill: none; stroke: #fafafa; stroke-width: 1.5px; stroke-dasharray: 200; stroke-dashoffset: 200; animation: 8s text-outline infinite forwards; opacity: 0; } @keyframes circle-outline { from { stroke-dashoffset: 800; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } } @keyframes text-outline { from { stroke-dashoffset: 200; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }