Pink Ribbon

Developer
Tristan
Size
2,847 Kb
Views
40,480
  1. Pink Ribbon Previews
  2. Pink Ribbon HTML Codes
  3. Pink Ribbon CSS Codes
  4. Pink Ribbon JS Codes

How do I make an pink ribbon?

The symbol of breast cancer awareness.. What is a pink ribbon? How do you make a pink ribbon? This script and codes were developed by Tristan on 25 August 2022, Thursday.

Pink Ribbon Previews
IQ Test

Pink Ribbon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pink Ribbon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pink Ribbon - Script Codes CSS Codes

*{margin:0;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
body{font-size:75%;background:#222;font-family:arial;padding:20px 0 0 20px}
canvas{border:1px solid #181818;display:block;box-shadow:0 0 10px #111}

Pink Ribbon - Script Codes JS Codes

var canvas, c, w, h, twoPI = Math.PI * 2, mX, mY;
window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}();
window.onload = function(){ canvas = document.createElement('canvas') w = canvas.width = window.innerWidth - 40; h = canvas.height = window.innerHeight - 40; c = canvas.getContext('2d'); document.body.appendChild(canvas); window.addEventListener('resize', function(e){ w = canvas.width = window.innerWidth - 40; h = canvas.height = window.innerHeight - 40; }); canvas.addEventListener('mousemove', function(e){ mX = e.pageX; mY = e.pageY; }); c.globalCompositeOperation = "lighter"; c.fillStyle = "rgba(234,128,176,0.75)"; Pink(50);
}
var Pink = function(num){ var	points = [], scale = 40, gravity = 0.005; function Point(){ var point = { x: Math.random() * w, y: h+90, scale: 1, direction: Math.random() * twoPI, speed: Math.random() * 2, scale: (Math.random() * 40) + 10 }; point.xd = Math.cos(point.direction) * point.speed; point.yd = Math.sin(point.direction) * point.speed; return point; } function update(){ for(var p = 0; p < points.length; p++){ var xd = points[p].x - mX, yd = points[p].y - mY, dd = Math.sqrt(xd * xd + yd * yd), da = Math.atan2(yd, xd); if(dd < 100){ points[p].xd -= Math.cos(da)/10; points[p].yd -= Math.sin(da)/10; } else { points[p].yd -= gravity; } points[p].x += points[p].xd; points[p].y += points[p].yd; if(points[p].x > w+100 || points[p].x < 0-100 || points[p].y > h+100 || points[p].y < -100){ points[p] = new Point(); } } } function draw(){ for(var p = 0; p < points.length; p++){ var x = points[p].x, y = points[p].y, s = points[p].scale, d = points[p].direction; c.save(); c.beginPath(); c.moveTo(x+0.23*s,y+0.14*s); c.lineTo(x+0.34*s,y-0.05*s); c.bezierCurveTo(x+0.34*s,y-0.05*s,x+0.50*s,y-0.39*s,x+0.37*s,y-0.65*s); c.bezierCurveTo(x+0.24*s,y-0.92*s,x+0.22*s,y-0.98*s,x+0.22*s,y-0.98*s); c.bezierCurveTo(x+0.22*s,y-0.98*s,x+0.16*s,y-1.09*s,x+0.00*s,y-1.08*s); c.bezierCurveTo(x+-0.15*s,y-1.07*s,x+-0.18*s,y-0.96*s,x+-0.18*s,y-0.96*s); c.bezierCurveTo(x+-0.18*s,y-0.96*s,x+-0.19*s,y-0.94*s,x+-0.32*s,y-0.64*s); c.bezierCurveTo(x+-0.44*s,y-0.35*s,x+-0.30*s,y-0.02*s,x+-0.30*s,y-0.02*s); c.lineTo(x+-0.22*s,y+0.12*s); c.lineTo(x+-0.54*s,y+0.90*s); c.lineTo(x+-0.40*s,y+1.29*s); c.lineTo(x+-0.01*s,y+0.57*s); c.lineTo(x+0.25*s,y+1.09*s); c.lineTo(x+0.71*s,y+1.13*s); c.lineTo(x+0.23*s,y+0.14*s); c.closePath(); c.moveTo(x+0.12*s,y-0.52*s); c.bezierCurveTo(x+0.05*s,y-0.39*s,x+0.00*s,y-0.30*s,x+0.00*s,y-0.30*s); c.bezierCurveTo(x+0.00*s,y-0.30*s,x+-0.06*s,y-0.39*s,x+-0.11*s,y-0.50*s); c.bezierCurveTo(x+-0.16*s,y-0.61*s,x+-0.19*s,y-0.75*s,x+-0.19*s,y-0.75*s); c.bezierCurveTo(x+-0.19*s,y-0.75*s,x+-0.13*s,y-0.83*s,x+0.00*s,y-0.84*s); c.bezierCurveTo(x+0.13*s,y-0.85*s,x+0.23*s,y-0.78*s,x+0.23*s,y-0.78*s); c.bezierCurveTo(x+0.23*s,y-0.78*s,x+0.19*s,y-0.65*s,x+0.12*s,y-0.52*s); c.closePath(); c.fillStyle = "rgba(234,128,176,0.75)"; c.fill(); c.restore(); } } function clear(){ c.save(); c.globalCompositeOperation = "source-over"; c.fillStyle = "rgba(55,30,41,1)"; c.fillRect(0,0,w,h); c.restore(); } function animate(){ update(); clear(); draw(); requestAnimFrame(animate); } for(var i = 0; i < num; i++){ points.push( new Point() ); } requestAnimFrame(animate);
};
Pink Ribbon - Script Codes
Pink Ribbon - Script Codes
Home Page Home
Developer Tristan
Username sinthetyc
Uploaded August 25, 2022
Rating 3
Size 2,847 Kb
Views 40,480
Do you need developer help for Pink Ribbon?

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!

Tristan (sinthetyc) Script Codes
Name
A Better Colour Picker
Perspective
Lightrays v2
Hovering a Hexagon
Pipes
Iterative Function Tree
Nebular
Particle System 7
Geese
Zodiac
Create amazing art & images 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!