SVG Reflection

Developer
Chris Wright
Size
8,859 Kb
Views
62,744
  1. SVG Reflection Previews
  2. SVG Reflection HTML Codes
  3. SVG Reflection CSS Codes

How do I make an svg reflection?

The point of this experiment was to create a reflection of the SVG object. I'm attempting to see how far I can go with SVG graphics before the files becomes too large to work with (the size of a raster file). What is a svg reflection? How do you make a svg reflection? This script and codes were developed by Chris Wright on 12 July 2022, Tuesday.

SVG Reflection Previews
IQ Test

SVG Reflection - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Reflection</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <body> <div class="animated tada">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="280px" height="694.58px" viewBox="0 0 280 694.58" enable-background="new 0 0 280 694.58" xml:space="preserve">
<g id="Layer_16">	<defs>	<filter id="OpacityMaskFilter" filterUnits="userSpaceOnUse" x="5.5" y="544.58" width="275" height="82">	<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>	</filter>	</defs>	<mask maskUnits="userSpaceOnUse" x="5.5" y="544.58" width="275" height="82" id="SVGID_1_">	<g filter="url(#OpacityMaskFilter)">	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="151.2808" y1="540.5801" x2="151.2808" y2="614.665">	<stop offset="0" style="stop-color:#FFFFFF"/>	<stop offset="0.0194" style="stop-color:#E1E1E1;stop-opacity:0.972"/>	<stop offset="0.0503" style="stop-color:#B8B8B8;stop-opacity:0.9276"/>	<stop offset="0.085" style="stop-color:#939392;stop-opacity:0.8777"/>	<stop offset="0.1227" style="stop-color:#737372;stop-opacity:0.8233"/>	<stop offset="0.1644" style="stop-color:#585856;stop-opacity:0.7633"/>	<stop offset="0.2115" style="stop-color:#424240;stop-opacity:0.6955"/>	<stop offset="0.2665" style="stop-color:#31312F;stop-opacity:0.6163"/>	<stop offset="0.3345" style="stop-color:#262624;stop-opacity:0.5184"/>	<stop offset="0.4299" style="stop-color:#1F1F1D;stop-opacity:0.3811"/>	<stop offset="0.6946" style="stop-color:#1D1D1B;stop-opacity:0"/>	</linearGradient>	<rect x="-46.709" y="540.58" fill="url(#SVGID_2_)" width="395.981" height="74.085"/>	</g>	</mask>	<g opacity="0.6" mask="url(#SVGID_1_)">	<defs>	<filter id="OpacityMaskFilter_1_" filterUnits="userSpaceOnUse" x="5.5" y="544.58" width="275" height="82">	<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>	</filter>	</defs>	<mask maskUnits="userSpaceOnUse" x="5.5" y="544.58" width="275" height="82" id="SVGID_1_">	<g filter="url(#OpacityMaskFilter_1_)">	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="303.5332" y1="544.0801" x2="303.5332" y2="654.7471">	<stop offset="0" style="stop-color:#FFFFFF"/>	<stop offset="0.0066" style="stop-color:#F7F7F7"/>	<stop offset="0.047" style="stop-color:#C9C9C9"/>	<stop offset="0.0924" style="stop-color:#9E9E9E"/>	<stop offset="0.1412" style="stop-color:#797878"/>	<stop offset="0.1944" style="stop-color:#585858"/>	<stop offset="0.2532" style="stop-color:#3D3C3C"/>	<stop offset="0.3195" style="stop-color:#272626"/>	<stop offset="0.3969" style="stop-color:#161515"/>	<stop offset="0.4927" style="stop-color:#0B0A0A"/>	<stop offset="0.6271" style="stop-color:#040303"/>	<stop offset="1" style="stop-color:#020101"/>	</linearGradient>	<rect x="1.2" y="544.08" fill="url(#SVGID_3_)" width="604.666" height="110.667"/>	</g>	</mask>	<path fill="none" stroke="#A7A7A7" stroke-miterlimit="10" d="M6,585.08c0-22.092,17.908-40,40-40h194c22.092,0,40,17.908,40,40	v41H6V585.08z"/>	<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="-231.2085" y1="644.0801" x2="-231.2085" y2="571.9951" gradientTransform="matrix(-1 0 0 -1 -87.9316 1191.1602)">	<stop offset="0" style="stop-color:#282828"/>	<stop offset="0.0097" style="stop-color:#262626"/>	<stop offset="0.1219" style="stop-color:#161515"/>	<stop offset="0.2609" style="stop-color:#0A0A0A"/>	<stop offset="0.4566" style="stop-color:#040303"/>	<stop offset="1" style="stop-color:#020101"/>	</linearGradient>	<path fill="url(#SVGID_4_)" stroke="#282828" stroke-width="2" stroke-miterlimit="10" d="M8.882,587.08c0-22.092,17.908-40,40-40	h188.789c22.092,0,40,17.908,40,40v32.085H143.2H8.882V587.08z"/>	</g>
</g>
<g id="Layer_19">
</g>
<g id="Layer_17">
</g>
<g id="Metal_buttons">	<path fill="#B7B7B7" stroke="#A8A8A8" stroke-miterlimit="10" d="M7.054,129.455c0,1.104-0.896,2-2,2H3.638c-1.104,0-2-0.896-2-2	v-15c0-1.104,0.896-2,2-2h1.417c1.104,0,2,0.896,2,2V129.455z"/>	<path fill="#B7B7B7" stroke="#A8A8A8" stroke-miterlimit="10" d="M7.054,177.08c0,1.104-0.896,2-2,2H3.638c-1.104,0-2-0.896-2-2	v-15c0-1.104,0.896-2,2-2h1.417c1.104,0,2,0.896,2,2V177.08z"/>	<path fill="#B7B7B7" stroke="#A8A8A8" stroke-miterlimit="10" d="M7.054,86.705c0,1.104-0.896,2-2,2H3.638c-1.104,0-2-0.896-2-2	v-22c0-1.104,0.896-2,2-2h1.417c1.104,0,2,0.896,2,2V86.705z"/>	<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="199.7007" y1="-9.7534" x2="222.6996" y2="13.2455">	<stop offset="0" style="stop-color:#FFFFFF"/>	<stop offset="0.0955" style="stop-color:#E1E1E1"/>	<stop offset="0.198" style="stop-color:#C8C8C8"/>	<stop offset="0.3053" style="stop-color:#B6B6B6"/>	<stop offset="0.4194" style="stop-color:#ABABAB"/>	<stop offset="0.5517" style="stop-color:#A8A8A8"/>	<stop offset="0.5741" style="stop-color:#C0C0C0"/>	<stop offset="0.6024" style="stop-color:#D7D7D7"/>	<stop offset="0.6352" style="stop-color:#E9E9E9"/>	<stop offset="0.6745" style="stop-color:#F6F6F6"/>	<stop offset="0.727" style="stop-color:#FDFDFD"/>	<stop offset="0.8473" style="stop-color:#FFFFFF"/>	<stop offset="0.8478" style="stop-color:#FEFEFE"/>	<stop offset="0.8587" style="stop-color:#E3E3E3"/>	<stop offset="0.8711" style="stop-color:#CDCDCD"/>	<stop offset="0.8858" style="stop-color:#BCBCBC"/>	<stop offset="0.9039" style="stop-color:#B1B1B1"/>	<stop offset="0.9294" style="stop-color:#AAAAAA"/>	<stop offset="1" style="stop-color:#A8A8A8"/>	</linearGradient>	<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="211.1997" y1="0.0801" x2="211.1997" y2="3.4106">	<stop offset="0.2414" style="stop-color:#FFFFFF"/>	<stop offset="0.3019" style="stop-color:#FFFFFF"/>	<stop offset="0.6552" style="stop-color:#FFFFFF"/>	<stop offset="0.6563" style="stop-color:#FEFEFE"/>	<stop offset="0.681" style="stop-color:#E3E3E3"/>	<stop offset="0.709" style="stop-color:#CDCDCD"/>	<stop offset="0.7421" style="stop-color:#BCBCBC"/>	<stop offset="0.7831" style="stop-color:#B1B1B1"/>	<stop offset="0.8405" style="stop-color:#AAAAAA"/>	<stop offset="1" style="stop-color:#A8A8A8"/>	</linearGradient>	<rect x="189.367" y="0.58" fill="url(#SVGID_5_)" stroke="url(#SVGID_6_)" stroke-miterlimit="10" width="43.667" height="2.331"/>	<g>	<image overflow="visible" width="387" height="79" xlink:href="data:image/png;base64,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" transform="matrix(1 0 0 1 -51.2998 503.5801)">	</image>	</g>
</g>
<g id="Shadows_on_metal_buttons">	<rect x="1.2" y="122.969" fill="#6D6D6D" width="5.667" height="4.223"/>	<rect x="1.2" y="79.969" fill="#6D6D6D" width="5.667" height="4.223"/>	<rect x="1.2" y="170.969" fill="#6D6D6D" width="5.666" height="4.223"/>
</g>
<g id="Layer_20">
</g>
<g id="Metal_body">	<path fill="#D8D8D8" stroke="#A8A8A8" stroke-miterlimit="10" d="M278.034,504.08c0,22.092-17.908,40-40,40h-194	c-22.091,0-40-17.908-40-40v-461c0-22.092,17.909-40,40-40h194c22.092,0,40,17.908,40,40V504.08z"/>
</g>
<g id="Shadows_on_metal_body">	<rect x="3.2" y="482.969" fill="#6D6D6D" width="5.667" height="4.223"/>	<rect x="273.2" y="482.969" fill="#6D6D6D" width="5.666" height="4.223"/>
</g>
<g id="Black_phone">	<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="141.0942" y1="540.5801" x2="141.0942" y2="6.4111">	<stop offset="0" style="stop-color:#282828"/>	<stop offset="0.0097" style="stop-color:#262626"/>	<stop offset="0.1219" style="stop-color:#161515"/>	<stop offset="0.2609" style="stop-color:#0A0A0A"/>	<stop offset="0.4566" style="stop-color:#040303"/>	<stop offset="1" style="stop-color:#020101"/>	</linearGradient>	<path fill="url(#SVGID_7_)" stroke="#282828" stroke-width="2" stroke-miterlimit="10" d="M275.488,500.58	c0,22.092-17.908,40-40,40H46.7c-22.092,0-40-17.908-40-40V46.411c0-22.092,17.908-40,40-40h188.788c22.092,0,40,17.908,40,40	V500.58z"/>
</g>
<g id="Circle_Button_x2C__speaker">	<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="141.2822" y1="520.5791" x2="141.2822" y2="468.7461">	<stop offset="0" style="stop-color:#575858"/>	<stop offset="1" style="stop-color:#282828"/>	</linearGradient>	<circle opacity="0.4" fill="url(#SVGID_8_)" stroke="#444444" stroke-miterlimit="10" cx="141.282" cy="494.662" r="25.917"/>	<path fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M149.699,499.339c0,2.065-1.675,3.74-3.741,3.74h-9.352	c-2.066,0-3.741-1.675-3.741-3.74v-9.353c0-2.065,1.675-3.74,3.741-3.74h9.352c2.066,0,3.741,1.675,3.741,3.74V499.339z"/>	<path fill="#111111" d="M169.867,49.497c0,3.452-2.486,6.25-5.554,6.25h-40.726c-3.067,0-5.554-2.798-5.554-6.25l0,0	c0-3.452,2.487-6.25,5.554-6.25h40.726C167.381,43.247,169.867,46.045,169.867,49.497L169.867,49.497z"/>	<circle display="none" fill="#2D2D2D" cx="96.033" cy="64.164" r="6.083"/>
</g>
<g id="Camera">	<circle fill="#4F14A6" stroke="#353535" stroke-miterlimit="10" cx="96.033" cy="49.497" r="3.5"/>	<ellipse cx="96.033" cy="49.663" rx="1.125" ry="1"/>
</g>
<g id="Speaker_inset">	<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="143.8101" y1="53.5381" x2="143.8101" y2="45.834">	<stop offset="0" style="stop-color:#575858"/>	<stop offset="1" style="stop-color:#282828"/>	</linearGradient>	<path fill="url(#SVGID_9_)" d="M167.42,49.686c0,2.127-1.725,3.852-3.852,3.852h-39.516c-2.127,0-3.852-1.725-3.852-3.852l0,0	c0-2.127,1.725-3.852,3.852-3.852h39.516C165.695,45.834,167.42,47.559,167.42,49.686L167.42,49.686z"/>
</g>
<g id="Screen">	<rect x="23.034" y="93.414" fill="#515151" stroke="#515151" stroke-miterlimit="10" width="236" height="353.333"/>
</g>
<g id="Light_reflection">
</g>
<g id="Button_shadow">	<g>	<defs>	<path id="SVGID_10_" d="M166.782,494.501c0,14.403-11.678,26.078-26.083,26.078c-14.406,0-26.084-11.675-26.084-26.078	c0-14.408,11.679-26.087,26.084-26.087C155.104,468.414,166.782,480.093,166.782,494.501z"/>	</defs>	<clipPath id="SVGID_11_">	<use xlink:href="#SVGID_10_" overflow="visible"/>	</clipPath>	<circle opacity="0.5" clip-path="url(#SVGID_11_)" cx="141.282" cy="452.747" r="42"/>	</g>	<g id="Layer_11">	</g>	<g id="Layer_18">	</g>
</g>
<g id="Grill">	<ellipse fill="#2E2E2F" cx="124.54" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="124.558" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="127.215" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="127.232" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="129.889" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="129.906" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="132.563" cy="48.754" rx="0.806" ry="0.683"/>	<ellipse fill="#090405" cx="132.58" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="135.237" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="135.254" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="137.91" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="137.928" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="140.585" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="140.603" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="143.259" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="143.276" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="145.933" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="145.95" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="148.606" cy="48.754" rx="0.806" ry="0.683"/>	<ellipse fill="#090405" cx="148.624" cy="48.784" rx="0.736" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="151.281" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="151.298" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="153.954" cy="48.754" rx="0.806" ry="0.683"/>	<ellipse fill="#090405" cx="153.972" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="156.629" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="156.646" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="159.302" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="159.32" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="161.977" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="161.994" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="123.146" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="123.163" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="125.819" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="125.837" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="128.494" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="128.511" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="131.167" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="131.185" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="133.841" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="133.859" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="136.515" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="136.533" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="139.189" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="139.207" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="141.864" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="141.881" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="144.538" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="144.556" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="147.211" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="147.229" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="149.885" cy="50.451" rx="0.806" ry="0.682"/>	<ellipse fill="#090405" cx="149.903" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="152.56" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="152.577" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="155.233" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="155.251" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="157.907" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="157.925" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="160.581" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="160.599" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="163.255" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="163.273" cy="50.48" rx="0.737" ry="0.624"/>
</g>
<g id="Light_reflection_1_">	<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="210.8569" y1="6.4106" x2="210.8569" y2="375.4839">	<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.2"/>	<stop offset="0.1413" style="stop-color:#FFFFFF;stop-opacity:0.1859"/>	<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.1"/>	</linearGradient>	<path fill="url(#SVGID_12_)" d="M275.782,374.58c0,22.092-129.85-368.169-129.85-368.169h89.85c22.092,0,40,17.908,40,40V374.58z"	/>
</g>
</svg> </div> </body>
</html>
</body>
</html>

SVG Reflection - Script Codes CSS Codes

html { height:100%;
}
body { height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed; background-image: linear-gradient(#c3acc2, #645685);
}
div { padding:4em 0 0 0; width:280px; margin:0 auto;
}
.animated {	-webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;	-webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;
}
.tada {	-webkit-animation-name: tada;	-moz-animation-name: tada;	-o-animation-name: tada;	animation-name: tada;
}
@-webkit-keyframes tada {	0% {-webkit-transform: scale(1);}	10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}	30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}	40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}	100% {-webkit-transform: scale(1) rotate(0);}
}
@-moz-keyframes tada {	0% {-moz-transform: scale(1);}	10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}	30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}	40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}	100% {-moz-transform: scale(1) rotate(0);}
}
@-o-keyframes tada {	0% {-o-transform: scale(1);}	10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}	30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}	40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}	100% {-o-transform: scale(1) rotate(0);}
}
@keyframes tada {	0% {transform: scale(1);}	10%, 20% {transform: scale(0.9) rotate(-3deg);}	30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}	40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}	100% {transform: scale(1) rotate(0);}
SVG Reflection - Script Codes
SVG Reflection - Script Codes
Home Page Home
Developer Chris Wright
Username chriswrightdesign
Uploaded July 12, 2022
Rating 3.5
Size 8,859 Kb
Views 62,744
Do you need developer help for SVG Reflection?

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!

Chris Wright (chriswrightdesign) Script Codes
Name
Typography SVG experiment
Flexbox responsive navigation
Timeline animation
Experiments with nth-of-type animation
SVG Noise blended radial
Bouncing ball arc horizontal
CSS Responsive animated Accordion
Inertia CSS
Form adaptation
IPhone SVG
Create amazing captions 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!