Holy Cow Mandala

Developer
Gabi
Size
2,764 Kb
Views
42,504
  1. Holy Cow Mandala Previews
  2. Holy Cow Mandala HTML Codes
  3. Holy Cow Mandala CSS Codes
  4. Holy Cow Mandala JS Codes

How do I make an holy cow mandala?

For even more holiness I'm using the Hope In God palette . What is a holy cow mandala? How do you make a holy cow mandala? This script and codes were developed by Gabi on 22 August 2022, Monday.

Holy Cow Mandala Previews
IQ Test

Holy Cow Mandala - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Holy Cow Mandala</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- http://www.colourlovers.com/palette/2380287/Hope_In_God -->
<svg height="1000" width="1000">
<defs>
<symbol id= "cow" viewBox= "0 0 200 200">	<path class="head" stroke-width="1" d="M87 110 c5 0 12-0 21-0 c9-0 26 2 33-4 c5-4 2-14 0-19 c-6-11-14-11-25-11c-10-0-15-7-8-16 c11-13 22-2 35-3 c7-0.622 15.812-11.692 5.757-14.441c-3.556-0.973-12.802 0.949-15.412-0.906c6.371 4.5 20.854-11.553 23.774-15.168 c4.103-5.079 7.713-10.561 10.987-16.205c0.678-1.169 2.928-7.366 4.133-7.882c-7.42 3.175-14.234 8.021-22.368 10.7 c-20.585 6.695-42.426 9.711-64.039 9.711c-18.865 0.045-41.083-2.831-60.479-8.723C16.774 10.2 9.1 5 0.6 1.4 C4.425 3 11 19.4 13.8 23.083c3.03 4 18.5 22.6 25.6 17.551c-2.173 1.544-10.67-0.021-13.562 0.5 c-9.382 1.672-7.292 11.8 1 14.308c12.151 3.7 23.371-8.617 35 0.611c7.217 5.7 11.1 18.941-1.428 19.4 c-10.27 0.355-20.138-1.575-26.384 8.23c-4.091 6.423-6.256 13.976-2.265 20.886c3.503 6.1 24.2 4.7 30.3 4.9 C70.382 109.8 78.7 109.9 87 109.8"/>	<circle class="eyeR" fill="#040B13" stroke-width="1" cx="117.3" cy="64.9" r="6"/>	<circle class="eyeL" fill="#040B13" stroke-width="1" cx="55.4" cy="64.9" r="6"/>	<circle class="nostrilL" fill="#446B70" stroke-width="1" cx="50.6" cy="92.9" r="9"/>	<circle class="nostrilR" fill="#446B70" stroke-width="1" cx="123.4" cy="92.9" r="9"/>
</symbol>
</defs>
</svg> <script src="js/index.js"></script>
</body>
</html>

Holy Cow Mandala - Script Codes CSS Codes

html, body { display: block; height: 100vh; width: 100vw; margin: 0; padding: 0; background-color:#446B70;
}
svg{background-color:#446B70; display:block; margin:0 auto;}

Holy Cow Mandala - Script Codes JS Codes

var svg = document.querySelector("svg");
for( var i = 0; i<=360; i+=20){	drawCow("#E8FDFF","#900",90,450,440);	drawCow("#D6FAFA","#900",160,450,500);	drawCow("#688F94","#900",250,450,580);
}
function drawCow(color,stroke,w,x,y){	var use = document.createElementNS("http:\/\/www.w3.org/2000/svg", "use");	use.setAttributeNS( "http://www.w3.org/1999/xlink", "href", "#cow");	use.setAttributeNS(null, "fill", color);	use.setAttributeNS(null, "stroke", stroke);	use.setAttributeNS(null, "width", w);	use.setAttributeNS(null, "height", w);	use.setAttributeNS(null, "x", x);	use.setAttributeNS(null, "y", y);	use.setAttributeNS(null, "transform", "rotate("+i+" 530 400)");	var animate = document.createElementNS("http:\/\/www.w3.org/2000/svg", "animate");	animate.setAttributeNS(null, "attributeType", "XML");	animate.setAttributeNS(null, "attributeName", "x");	animate.setAttributeNS(null, "dur", "10s");	animate.setAttributeNS(null, "values", x+";"+(x + 100)+";"+x);	animate.setAttributeNS(null, "repeatCount", "indefinite");	use.appendChild(animate);	svg.appendChild(use);	}
Holy Cow Mandala - Script Codes
Holy Cow Mandala - Script Codes
Home Page Home
Developer Gabi
Username enxaneta
Uploaded August 22, 2022
Rating 4
Size 2,764 Kb
Views 42,504
Do you need developer help for Holy Cow Mandala?

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!

Gabi (enxaneta) Script Codes
Name
Sine wave ice cream
Rift
SVG gauge
Animated chart
CSS only star rating
Sea Creature
Broken English
Sakura
Wave
Conical Helix
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!