SVG Faux-Conical Gradient

Developer
Joey Hoer
Size
6,531 Kb
Views
38,456
  1. SVG Faux-Conical Gradient Previews
  2. SVG Faux-Conical Gradient HTML Codes
  3. SVG Faux-Conical Gradient CSS Codes
  4. SVG Faux-Conical Gradient JS Codes

How do I make an svg faux-conical gradient?

SVG faux-conical gradient in CSS with SCSS.Until mesh gradients are released with SVG2, this method can be used to simulate a conical gradient by drawing a number of triangles radiating from a central point.. What is a svg faux-conical gradient? How do you make a svg faux-conical gradient? This script and codes were developed by Joey Hoer on 14 September 2022, Wednesday.

SVG Faux-Conical Gradient Previews
IQ Test

SVG Faux-Conical Gradient - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Faux-Conical Gradient</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Varela+Round'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* SVG dosen't currently support conical gradients; conical gradients should be supported in SVG2. For now, we must simulate it using a slice method. */
.char2 { /* The SVG animation crushed my CPU/RAM, so I'm using a CSS animation instead. */ /*
$animation: '<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="1.5s" repeatCount="indefinite"/>'; /**/ background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0 200,200"> <defs> <linearGradient id="fade" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#ccc;stop-opacity:1"/> <stop offset="100%" style="stop-color:#ccc;stop-opacity:0"/> </linearGradient> <clipPath id="clip"><path d="M100,100m-100,0a100,100,0,0,1,200,0,100,100,0,0,1-200,0zM100,100m-75,0a75,75,0,0,0,150,0,75,75,0,0,0-150,0z"/></clipPath><path id="p" d="M94.75922,0l10.48156,0-5.24078,100-5.24078-100z" fill="#ccc"/></defs> <path d="M100,100m0-100a12.5,12.5,0,0,1,0,25z" fill="#ccc"/> <g transform="rotate(-3 100 100)" clip-path="url(#clip)"><use xlink:href="#p" fill-opacity="0" transform="rotate(0 100 100)"></use><use xlink:href="#p" fill-opacity="0.01667" transform="rotate(6 100 100)"></use><use xlink:href="#p" fill-opacity="0.03333" transform="rotate(12 100 100)"></use><use xlink:href="#p" fill-opacity="0.05" transform="rotate(18 100 100)"></use><use xlink:href="#p" fill-opacity="0.06667" transform="rotate(24 100 100)"></use><use xlink:href="#p" fill-opacity="0.08333" transform="rotate(30 100 100)"></use><use xlink:href="#p" fill-opacity="0.1" transform="rotate(36 100 100)"></use><use xlink:href="#p" fill-opacity="0.11667" transform="rotate(42 100 100)"></use><use xlink:href="#p" fill-opacity="0.13333" transform="rotate(48 100 100)"></use><use xlink:href="#p" fill-opacity="0.15" transform="rotate(54 100 100)"></use><use xlink:href="#p" fill-opacity="0.16667" transform="rotate(60 100 100)"></use><use xlink:href="#p" fill-opacity="0.18333" transform="rotate(66 100 100)"></use><use xlink:href="#p" fill-opacity="0.2" transform="rotate(72 100 100)"></use><use xlink:href="#p" fill-opacity="0.21667" transform="rotate(78 100 100)"></use><use xlink:href="#p" fill-opacity="0.23333" transform="rotate(84 100 100)"></use><use xlink:href="#p" fill-opacity="0.25" transform="rotate(90 100 100)"></use><use xlink:href="#p" fill-opacity="0.26667" transform="rotate(96 100 100)"></use><use xlink:href="#p" fill-opacity="0.28333" transform="rotate(102 100 100)"></use><use xlink:href="#p" fill-opacity="0.3" transform="rotate(108 100 100)"></use><use xlink:href="#p" fill-opacity="0.31667" transform="rotate(114 100 100)"></use><use xlink:href="#p" fill-opacity="0.33333" transform="rotate(120 100 100)"></use><use xlink:href="#p" fill-opacity="0.35" transform="rotate(126 100 100)"></use><use xlink:href="#p" fill-opacity="0.36667" transform="rotate(132 100 100)"></use><use xlink:href="#p" fill-opacity="0.38333" transform="rotate(138 100 100)"></use><use xlink:href="#p" fill-opacity="0.4" transform="rotate(144 100 100)"></use><use xlink:href="#p" fill-opacity="0.41667" transform="rotate(150 100 100)"></use><use xlink:href="#p" fill-opacity="0.43333" transform="rotate(156 100 100)"></use><use xlink:href="#p" fill-opacity="0.45" transform="rotate(162 100 100)"></use><use xlink:href="#p" fill-opacity="0.46667" transform="rotate(168 100 100)"></use><use xlink:href="#p" fill-opacity="0.48333" transform="rotate(174 100 100)"></use><use xlink:href="#p" fill-opacity="0.5" transform="rotate(180 100 100)"></use><use xlink:href="#p" fill-opacity="0.51667" transform="rotate(186 100 100)"></use><use xlink:href="#p" fill-opacity="0.53333" transform="rotate(192 100 100)"></use><use xlink:href="#p" fill-opacity="0.55" transform="rotate(198 100 100)"></use><use xlink:href="#p" fill-opacity="0.56667" transform="rotate(204 100 100)"></use><use xlink:href="#p" fill-opacity="0.58333" transform="rotate(210 100 100)"></use><use xlink:href="#p" fill-opacity="0.6" transform="rotate(216 100 100)"></use><use xlink:href="#p" fill-opacity="0.61667" transform="rotate(222 100 100)"></use><use xlink:href="#p" fill-opacity="0.63333" transform="rotate(228 100 100)"></use><use xlink:href="#p" fill-opacity="0.65" transform="rotate(234 100 100)"></use><use xlink:href="#p" fill-opacity="0.66667" transform="rotate(240 100 100)"></use><use xlink:href="#p" fill-opacity="0.68333" transform="rotate(246 100 100)"></use><use xlink:href="#p" fill-opacity="0.7" transform="rotate(252 100 100)"></use><use xlink:href="#p" fill-opacity="0.71667" transform="rotate(258 100 100)"></use><use xlink:href="#p" fill-opacity="0.73333" transform="rotate(264 100 100)"></use><use xlink:href="#p" fill-opacity="0.75" transform="rotate(270 100 100)"></use><use xlink:href="#p" fill-opacity="0.76667" transform="rotate(276 100 100)"></use><use xlink:href="#p" fill-opacity="0.78333" transform="rotate(282 100 100)"></use><use xlink:href="#p" fill-opacity="0.8" transform="rotate(288 100 100)"></use><use xlink:href="#p" fill-opacity="0.81667" transform="rotate(294 100 100)"></use><use xlink:href="#p" fill-opacity="0.83333" transform="rotate(300 100 100)"></use><use xlink:href="#p" fill-opacity="0.85" transform="rotate(306 100 100)"></use><use xlink:href="#p" fill-opacity="0.86667" transform="rotate(312 100 100)"></use><use xlink:href="#p" fill-opacity="0.88333" transform="rotate(318 100 100)"></use><use xlink:href="#p" fill-opacity="0.9" transform="rotate(324 100 100)"></use><use xlink:href="#p" fill-opacity="0.91667" transform="rotate(330 100 100)"></use><use xlink:href="#p" fill-opacity="0.93333" transform="rotate(336 100 100)"></use><use xlink:href="#p" fill-opacity="0.95" transform="rotate(342 100 100)"></use><use xlink:href="#p" fill-opacity="0.96667" transform="rotate(348 100 100)"></use><use xlink:href="#p" fill-opacity="0.98333" transform="rotate(354 100 100)"></use><use xlink:href="#p" fill-opacity="1" transform="rotate(360 100 100)"></use></g> </svg> '); background-repeat: no-repeat; background-position: 50% 50%; animation: spin 1s linear infinite; display: inline-block; width: 0.8em; height: 0.8em; margin-bottom: -0.03em; color: transparent; overflow: hidden;
}
@keyframes spin { to { transform: rotate(360deg) translatez(0); }
}
body { font-family: 'Varela Round', sans-serif; text-transform: uppercase; color: #ccc; background-color: #2c135f;
}
h1 { font-size: 4em; margin: 0; font-weight: 400; /* EXTRA PULSE ANIMATION */ /*
animation: pulse 3s linear infinite;
transform: scale(0.98);
/**/
}
@keyframes pulse { 50% { transform: scale(1.02); }
}
:root { height: 100%; display: flex;
}
:root > * { margin: auto;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1 id="load">Loading</h1> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

SVG Faux-Conical Gradient - Script Codes CSS Codes

/* SVG dosen't currently support conical gradients; conical gradients should be supported in SVG2. For now, we must simulate it using a slice method. */
.char2 { /* The SVG animation crushed my CPU/RAM, so I'm using a CSS animation instead. */ /*
$animation: ''; /**/ background-image: url('data:image/svg+xml,           '); background-repeat: no-repeat; background-position: 50% 50%; animation: spin 1s linear infinite; display: inline-block; width: 0.8em; height: 0.8em; margin-bottom: -0.03em; color: transparent; overflow: hidden;
}
@keyframes spin { to { transform: rotate(360deg) translatez(0); }
}
body { font-family: 'Varela Round', sans-serif; text-transform: uppercase; color: #ccc; background-color: #2c135f;
}
h1 { font-size: 4em; margin: 0; font-weight: 400; /* EXTRA PULSE ANIMATION */ /*
animation: pulse 3s linear infinite;
transform: scale(0.98);
/**/
}
@keyframes pulse { 50% { transform: scale(1.02); }
}
:root { height: 100%; display: flex;
}
:root > * { margin: auto;
}

SVG Faux-Conical Gradient - Script Codes JS Codes

$('#load').lettering();
/* Inline XML data URI fix */
/* Some browsers (most browsers) don't render inline XML data URI's unless they are escaped. */
(function() {
if(!window.StyleFix) return;
if(hasxmldatauri()) return;
// Test unescaped XML data uri
function hasxmldatauri() { var img = new Image(); datauri = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"></svg>'; img.src = datauri; return (img.width > 0 && img.height > 0); // (img.complete && img.src == datauri);
}
StyleFix.register(function(css) { return css.replace(RegExp(/url\(([\'\"])data:image\/svg\+xml,(.*)\1\)/gi), function($0, $1, svg) {	return "url('data:image/svg+xml," + escape(svg) + "')";	});
});
})();
SVG Faux-Conical Gradient - Script Codes
SVG Faux-Conical Gradient - Script Codes
Home Page Home
Developer Joey Hoer
Username joeyhoer
Uploaded September 14, 2022
Rating 4
Size 6,531 Kb
Views 38,456
Do you need developer help for SVG Faux-Conical Gradient?

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!

Joey Hoer (joeyhoer) Script Codes
Name
Slide to Check
Perforated Leather Background
CSS Middle Child Selector
Mirrored Background
Flexible Rounded Hexagons
Shift
Multi-line Text Fading
Fighting the Space
CSS Preloader Animations
Pinked Border
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!