Self-Caricature SVG Animation

Developer
Elmer Balbin
Size
5,943 Kb
Views
2,024
  1. Self-Caricature SVG Animation Previews
  2. Self-Caricature SVG Animation HTML Codes
  3. Self-Caricature SVG Animation CSS Codes
  4. Self-Caricature SVG Animation JS Codes

How do I make an self-caricature svg animation?

Another SVG image based from a photo of myself :). What is a self-caricature svg animation? How do you make a self-caricature svg animation? This script and codes were developed by Elmer Balbin on 22 January 2023, Sunday.

Self-Caricature SVG Animation Previews
IQ Test

Self-Caricature SVG Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Self-Caricature SVG Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="canvas">
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 666.66669 666.66669" height="420" width="420" id="svg10" version="1.1"> <metadata id="metadata16"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <defs id="defs14" /> <path id="path20" d="m 189.56744,533.0789 -31.80662,-6.6794 c -10.54379,-11.62563 -26.77964,-17.73149 -43.257,-20.03816 9.8336,-14.14259 22.04586,-28.62499 26.39949,-41.98473 9.87644,-13.44984 11.24502,-26.54161 13.14282,-30.39409 6.27421,-12.73647 10.71173,-34.79236 17.7096,-52.30312 25.43176,-60.71405 58.61878,-59.03533 92.23919,-64.88549 l 25.76336,-28.94403 -5.08906,-26.08142 c -10.13919,-11.9134 -18.47675,-25.62843 -23.5369,-42.62087 2.90555,8.71386 -29.08458,-45.71335 -5.08905,-47.39186 -1.25223,-22.07272 8.03802,-42.23688 13.67684,-74.109417 32.83581,-43.278667 87.64205,-31.081459 115.77609,-1.908396 3.29258,15.803193 2.73374,27.754943 1.27226,38.804073 13.26668,11.05627 14.85595,34.40456 12.08651,62.34097 2.38011,-22.06413 10.30507,-25.41443 19.40204,-24.80916 22.06392,18.84636 4.66186,34.40389 -13.04071,49.93638 l -5.08906,-0.63613 -3.18066,38.80407 17.17557,1.59034 c 5.08906,6.455 10.17812,23.96098 15.26718,35.94147 36.96891,25.5297 83.8512,45.66861 94.78371,99.55471 -3.49097,24.99845 -5.20036,49.64058 -4.45292,73.79135 l -26.39949,39.12214 c -6.17302,22.41814 -13.65713,47.45845 -23.21883,76.65395 11.41986,8.45272 3.3551,20.02298 -6.04326,31.80662 l 10.49618,26.39949 v 20.03817 l -160.00989,-1.61294 c 18.99607,-2.46086 40.13575,-2.95389 56.63839,-12.06391 20.67128,-16.23345 37.97508,-45.93685 56.29771,-71.56489 -6.64886,-12.99782 -19.39783,-16.40973 -31.80662,-20.35623 l -5.72519,8.58778 -10.81425,-0.95419 -3.18066,-11.45039 c -13.3736,-6.51013 -28.2963,-5.26243 -44.2112,0.9542 l 5.40713,-12.08651 c -10.43706,-4.4407 -20.30703,-7.74722 -29.89822,-10.49618 l -90.64886,4.45292 -3.8168,-18.12977 -11.45038,3.18066 -10.81425,9.22392 z" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path26" d="m 256.04327,171.75573 c 0.33835,-35.7289 -15.25146,-62.53499 13.84483,-106.039863 -3.55592,-17.288155 21.24771,-26.857575 38.02108,-36.964044 12.40378,-7.473653 34.44586,-2.665955 48.84513,-1.037661 24.56781,2.77817 46.70917,24.856224 62.02205,50.596483 -2.95977,4.013351 -6.35277,7.304639 -5.84758,17.092912 15.76717,40.480573 5.82579,53.538713 5.32823,76.670243" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path28" d="m 303.6241,133.6377 c -23.75431,-7.71096 -32.07629,0.91003 -38.23414,10.79553 8.42053,-5.49457 21.43872,-8.8902 38.23414,-10.79553 z" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path30" d="m 334.21142,133.18789 c 2.52019,0 38.8008,11.10488 37.33453,8.09664 -2.46636,-5.06002 -36.7763,-17.89307 -37.33453,-8.09664 z" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path32" d="m 303.17429,157.47782 c -9.30637,-11.71222 -25.34067,-2.98354 -29.23788,-1e-5 8.03598,1.79633 15.29748,3.57379 29.23788,1e-5 z" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path34" d="m 289.00517,151.40534 c 4.89884,2.60013 6.80106,4.67537 -0.22491,7.87174 -6.91998,-2.49907 -4.77281,-4.77678 0.22491,-7.87174 z" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path36" d="m 335.56086,159.72689 c 10.71842,-8.12074 19.78575,-5.92226 28.11335,0.89962 -7.908,1.45586 -17.20695,1.2426 -28.11335,-0.89962 z" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path38" d="m 351.97905,155.00384 c -2.49648,0.58568 -8.41099,3.01812 -0.67472,5.84758 8.7106,-0.34189 3.43228,-6.35995 0.67472,-5.84758 z" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path44" d="m 308.34715,199.31047 c -7.8497,-5.43453 -8.10324,-2.68159 -8.99627,0 0,0 4.4828,-0.0276 8.99627,0 z" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path46" d="m 318.01814,199.98519 c 2.87258,-0.47323 5.47199,-6.34444 11.02043,0.67472 -0.65579,-1.3668 -7.74702,-0.42822 -11.02043,-0.67472 z" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path48" d="m 325.66497,186.26588 c 8.64607,3.38798 11.57426,6.7389 9.67099,13.71931" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path50" d="m 301.37504,186.9406 c -7.49908,2.59349 -7.70773,6.64506 -6.29739,11.02043" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path52" d="m 284.66922,261.76846 c 20.12622,26.75588 53.30357,22.47326 82.50244,6.62709 9.94393,-5.39654 16.10848,-11.60617 24.16607,-19.8305" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path56" d="m 292.15386,220.45171 c 7.13321,-3.39594 13.69285,-5.64472 18.44235,-4.27323 12.16214,-2.41892 20.33376,4.14085 30.36241,6.52229 -12.80687,3.10002 -24.05738,4.16345 -28.56315,3.59851 -9.39254,0.32487 -15.50941,-1.82243 -21.36614,-5.62267 l 49.92929,2.02416 z" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path60" d="m 402.80798,210.78072 c 3.26436,-2.57743 7.73717,-4.26175 14.16912,-4.49814 13.73418,-22.40375 2.93562,-25.40056 -2.24906,-24.51483 -5.41658,2.40698 -9.99159,5.41509 -11.24534,10.79552 4.45135,4.58423 3.56755,8.83502 -1.57435,12.81968" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path62" d="m 301.52673,285.62342 c 30.08643,12.97745 58.00807,-8.68167 86.51399,-20.99237" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path64" d="m 381.04327,279.89823 c -15.8452,9.81213 -32.55329,18.76138 -53.43512,23.53689" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path66" d="m 414.12215,261.76846 -76.33588,73.47328 c 12.28323,9.49175 25.0724,18.3089 32.44275,34.35115 l 59.16031,-71.88296" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path68" d="m 337.78627,335.24174 c -16.36287,18.45993 -24.41116,17.51916 -36.25954,25.44529 -18.1143,-17.82838 -10.72858,-47.24767 -11.76845,-72.83715 l -28.30789,46.75573 c -15.9354,2.46561 -18.29546,12.68855 -22.90076,21.6285 1.86938,-8.73848 -13.80772,-5.7793 25.44529,-39.4402" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path70" d="m 301.52673,360.68703 c -43.68374,50.33674 -27.96615,116.16948 -36.89568,175.57253 l 14.63105,-2.54453 c 13.19015,-68.07769 -10.97812,-148.51444 74.42748,-186.38678" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path72" d="m 261.45039,334.60561 c 4.67692,10.6022 24.55018,22.47667 33.71501,33.71501" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path74" d="m 412.84989,404.58016 c -29.94609,45.23585 -62.071,89.81806 -75.69975,139.94912" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path76" d="m 200.38169,388.67686 c -4.74885,54.63512 7.50832,102.22622 16.22137,149.80916" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path78" d="m 120.55001,508.78215 c -27.770879,77.34152 -17.27893,97.28881 0,107.05561 16.63844,1.691 15.79902,-1.7204 24.64302,1.9103 34.90155,14.32802 95.48255,-15.55525 137.11142,-41.39277 15.44754,-9.58772 38.13382,-6.15554 49.43856,-19.7395" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path80" d="m 171.37894,621.23552 c 43.80279,37.18528 101.82571,61.13516 199.80428,30.16399" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path82" d="m 189.56744,533.0789 c 9.01187,3.31503 18.02375,5.67223 27.03562,5.40712" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path84" d="m 269.88809,639.67788 c -3.35424,4.7871 -62.86299,-6.57464 -62.07426,-8.54646" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path86" d="m 375.95421,555.66159 9.53595,-29.78652 16.6431,-5.84758 11.24534,14.39403 c -2.5088,12.42345 -9.22139,19.80235 -17.70429,25.05687" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" /> <path id="path88" d="m 427.48093,579.83462 c 28.16343,-25.39051 49.41331,-59.9991 67.43003,-98.91857" style="fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" />
</svg>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Self-Caricature SVG Animation - Script Codes CSS Codes

body { background-color: #FFF;
}
.canvas { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
}
#svg10 { max-width: 98%;
}
#svg10 path { stroke-width: 2px;
}
#path20 { stroke-dasharray: 2060; stroke-dashoffset: 0; animation: dash1 4s linear forwards;
}
@keyframes dash1 { 0%, 5% { stroke-dashoffset: 2060; } 6% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path26 { stroke-dasharray: 396; stroke-dashoffset: 0; animation: dash2 1s linear forwards; animation-delay: 4s;
}
@keyframes dash2 { 0%, 15% { stroke-dashoffset: 396; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path28 { stroke-dasharray: 84; stroke-dashoffset: 0; animation: dash3 .5s linear forwards; animation-delay: 5s;
}
@keyframes dash3 { 0%, 15% { stroke-dashoffset: 84; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path30 { stroke-dasharray: 81; stroke-dashoffset: 0; transition: transform .5s ease-in-out; animation: dash4 .5s linear forwards; animation-delay: 5.5s;
}
@keyframes dash4 { 0%, 15% { stroke-dashoffset: 81; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path32 { stroke-dasharray: 62; stroke-dashoffset: 0; animation: dash5 .5s linear forwards; animation-delay: 6s;
}
@keyframes dash5 { 0%, 15% { stroke-dashoffset: 62; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path34 { stroke-dasharray: 25; stroke-dashoffset: 0; animation: dash6 .5s linear forwards; animation-delay: 6.3s;
}
@keyframes dash6 { 0%, 15% { stroke-dashoffset: 25; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path36 { stroke-dasharray: 59; stroke-dashoffset: 0; animation: dash7 .5s linear forwards; animation-delay: 6.5s;
}
@keyframes dash7 { 0%, 15% { stroke-dashoffset: 59; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path38 { stroke-dasharray: 22; stroke-dashoffset: 0; animation: dash8 .5s linear forwards; animation-delay: 6.8s;
}
@keyframes dash8 { 0%, 15% { stroke-dashoffset: 22; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path44 { stroke-dasharray: 21; stroke-dashoffset: 0; animation: dash9 .25s linear forwards; animation-delay: 7s;
}
@keyframes dash9 { 0%, 15% { stroke-dashoffset: 21; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path46 { stroke-dasharray: 24; stroke-dashoffset: 0; animation: dash10 .25s linear forwards; animation-delay: 7.25s;
}
@keyframes dash10 { 0%, 15% { stroke-dashoffset: 24; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path48 { stroke-dasharray: 19; stroke-dashoffset: 0; animation: dash11 .25s linear forwards; animation-delay: 7.5s;
}
@keyframes dash11 { 0%, 15% { stroke-dashoffset: 19; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path50 { stroke-dasharray: 15; stroke-dashoffset: 0; animation: dash12 .25s linear forwards; animation-delay: 7.75s;
}
@keyframes dash12 { 0%, 15% { stroke-dashoffset: 15; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path52 { stroke-dasharray: 122; stroke-dashoffset: 0; animation: dash13 .5s linear forwards; animation-delay: 9s;
}
@keyframes dash13 { 0%, 15% { stroke-dashoffset: 122; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path56 { stroke-dasharray: 201; stroke-dashoffset: 0; animation: dash14 1s linear forwards; animation-delay: 8s;
}
@keyframes dash14 { 0%, 15% { stroke-dashoffset: 201; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path60 { stroke-dasharray: 79; stroke-dashoffset: 0; animation: dash15 .25s linear forwards; animation-delay: 8.75s;
}
@keyframes dash15 { 0%, 15% { stroke-dashoffset: 79; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path62 { stroke-dasharray: 92; stroke-dashoffset: 0; animation: dash16 .25s linear forwards; animation-delay: 9.5s;
}
@keyframes dash16 { 0%, 15% { stroke-dashoffset: 92; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path64 { stroke-dasharray: 59; stroke-dashoffset: 0; animation: dash17 .25s linear forwards; animation-delay: 9.75s;
}
@keyframes dash17 { 0%, 15% { stroke-dashoffset: 59; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path66 { stroke-dasharray: 247; stroke-dashoffset: 0; animation: dash18 1s linear forwards; animation-delay: 10s;
}
@keyframes dash18 { 0%, 15% { stroke-dashoffset: 247; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path68 { stroke-dasharray: 259; stroke-dashoffset: 0; animation: dash19 1s linear forwards; animation-delay: 11.5s;
}
@keyframes dash19 { 0%, 15% { stroke-dashoffset: 259; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path70 { stroke-dasharray: 412; stroke-dashoffset: 0; animation: dash20 1s linear forwards; animation-delay: 10.5s;
}
@keyframes dash20 { 0%, 15% { stroke-dashoffset: 412; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path72 { stroke-dasharray: 48; stroke-dashoffset: 0; animation: dash21 .5s linear forwards; animation-delay: 12.5s;
}
@keyframes dash21 { 0%, 15% { stroke-dashoffset: 48; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path74 { stroke-dasharray: 160; stroke-dashoffset: 0; animation: dash22 .5s linear forwards; animation-delay: 13s;
}
@keyframes dash22 { 0%, 15% { stroke-dashoffset: 160; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path76 { stroke-dasharray: 151; stroke-dashoffset: 0; animation: dash23 .5s linear forwards; animation-delay: 13.3s;
}
@keyframes dash23 { 0%, 15% { stroke-dashoffset: 151; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path78 { stroke-dasharray: 342; stroke-dashoffset: 0; animation: dash24 .5s linear forwards; animation-delay: 4s;
}
@keyframes dash24 { 0%, 15% { stroke-dashoffset: 342; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path80 { stroke-dasharray: 212; stroke-dashoffset: 0; animation: dash25 .5s linear forwards; animation-delay: 4.5s;
}
@keyframes dash25 { 0%, 15% { stroke-dashoffset: 212; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path82 { stroke-dasharray: 28; stroke-dashoffset: 0; animation: dash26 .2s linear forwards; animation-delay: 5s;
}
@keyframes dash26 { 0%, 15% { stroke-dashoffset: 28; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path84 { stroke-dasharray: 63; stroke-dashoffset: 0; animation: dash27 .3s linear forwards; animation-delay: 14.5s;
}
@keyframes dash27 { 0%, 15% { stroke-dashoffset: 63; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path86 { stroke-dasharray: 99; stroke-dashoffset: 0; animation: dash28 .5s linear forwards; animation-delay: 14s;
}
@keyframes dash28 { 0%, 15% { stroke-dashoffset: 99; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
#path88 { stroke-dasharray: 121; stroke-dashoffset: 0; animation: dash29 .5s linear forwards; animation-delay: 13.5s;
}
@keyframes dash29 { 0%, 15% { stroke-dashoffset: 121; } 30% { stroke: #444444; } 100% { stroke-dashoffset: 0; stroke: #444444; }
}
.brow { animation: up 1s ease-in-out !important; stroke-dashoffset: 0; stroke: #444444;
}
@keyframes up { 0%, 50%, 100% { transform: translateX(0) translateY(0); } 25%, 75% { transform: translateX(1px) translateY(-6px); }
}

Self-Caricature SVG Animation - Script Codes JS Codes

$(function() { setTimeout(function() { $("#path28, #path30").addClass("brow"); }, 15000);
});
Self-Caricature SVG Animation - Script Codes
Self-Caricature SVG Animation - Script Codes
Home Page Home
Developer Elmer Balbin
Username elmzarnsi
Uploaded January 22, 2023
Rating 4
Size 5,943 Kb
Views 2,024
Do you need developer help for Self-Caricature SVG Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Elmer Balbin (elmzarnsi) Script Codes
Name
My Profile CSS
Simple hover color slide effect
Direction Aware Tiles using clip-path Pure CSS
Material Design Input Placeholder
Collapsed div borders using CSS3 box-shadow
Material Design Card Flip - Direction Aware
Some button hover effects
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!